探索jQuery中的JSONP技术

发表时间: 2024-02-26 16:46

jQuery中的JSONP技术

$.ajax

$.get

$.getJSON

由此可知, 无论任何框架, 其解决跨域请求都是通过底层的get方式实现的。

① 使用$.ajax解决跨域问题

<html><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><script src="jquery.js"></script><script type="text/javascript">$(function(){    $("#btn").bind("click", function(){        $.ajax({        type:"get",        url:"http://www.blog.com/demo.php",        dataType:"jsonp",        jsonp:'fn', //在一个jsonp请求中重写回调函数的名字 相当于键名(callback=fn中callbacki键名)        success:function(msg){        $(msg).each(function(i, item){        var artid = item.artid; //也可以写成msg[i].artid        var title = item.title; //也可以写成msg[i].title        $("#result").append(artid+"--"+title+"--"+"<hr>");        });    }    })    })})</script></head><body><input type="button" id="btn" value="获取远程数据"/><div id="result"></div></body></html>

dataType: "jsonp": JSONP 格式。使用 JSONP 形式调用函数时, 如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名, 以执行回调函数。

jsonp: 在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，

比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。

②使用$.get解决跨域问题

<html><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><script src="jquery.js"></script><script type="text/javascript">$(function(){$("#btn").bind("click", function(){$.get('http://www.blog.com/demo.php?fn=?', function(msg){$(msg).each(function(i, item){var artid = item.artid;var title = item.title;$("#result").append(artid+"--"+title+"--"+"<br>");});}, 'jsonp');})})</script></head><body><input type="button" id="btn" value="获取远程数据"/><div id="result"></div></body>

③ 使用$.getJSON解决跨域问题

<html><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><script src="jquery.js"></script><script type="text/javascript">$(function(){$("#btn").bind('click', function(){$.getJSON("http://www.blog.com/demo.php?fn=?", function(msg){$(msg).each(function(i, item){var artid = item.artid;var title = item.title;$("#result").append(artid+"--"+title+"--"+"<hr>");})})})})</script></head><body><input type="button" id="btn" value="获取远程数据"/><div id="result"></div></body></html>

demo.php

<?php$fn = $_GET['fn'];mysql_connect("localhost", "root", "123456");mysql_select_db("blog");mysql_query("set names utf8");$sql = "select artid, title, author, addtime from blog_article order by artid desc limit 10";$res = mysql_query($sql);$data = array();while($row = mysql_fetch_assoc($res)){$data[] = $row;}header("Content-type:text/html; charset=utf-8");$json = json_encode($data);echo $fn."($json)"; //echo callback({...})?>

blog_article表结构

CREATE TABLE blog_article (artid int(10) unsigned NOT NULL AUTO_INCREMENT,title varchar(40) NOT NULL,cateid smallint(6) NOT NULL,artpic varchar(255) DEFAULT NULL,thumb varchar(255) DEFAULT NULL,desn varchar(255) DEFAULT NULL,content text,author varchar(20) DEFAULT NULL,hits int(11) DEFAULT NULL,comments int(10) unsigned DEFAULT '0',isrecommend enum('1','0') DEFAULT '0',addtime int(11) DEFAULT NULL,path varchar(255) DEFAULT NULL,PRIMARY KEY (artid)) ENGINE=MyISAM AUTO_INCREMENT=37 DEFAULT CHARSET=utf8;

探索jQuery中的JSONP技术

热门阅读

推荐阅读