AJax技术

jQuery实例:关于$.getJSON跨域Ajax方法

字号+ 作者:H5之家 来源:H5之家 2015-10-22 14:39 我要评论( )

到网上的教程都是给了一个例子,不知道使用$.getJSON实现跨域Ajax的关键在哪里,经过一段时间的研究,现将成果写一下。 客户端: 使用$.getJSON()在传输第一个参

到网上的教程都是给了一个例子,不知道使用$.getJSON实现跨域Ajax的关键在哪里,经过一段时间的“研究”,现将成果写一下。

客户端:

使用$.getJSON()在传输第一个参数,也就是url时,如果是跨域请求一定要有一个参数的值为“?”,如:

Copy to Clipboard引用的内容:[]

$.getJSON(
"?callback=?",
function(data){
alert(data);
}
};

jQuery在发送请求时会将这个“?”替换为一个唯一的字符串,如下图

并且声明一个与这个字符串名称相同变量,将传入的回掉函数赋值给这个变量。

服务端:

服务端一定是动态的程序,不能是静态的文本文件,因为服务端要接收到传过来的函数名,就是上图中callback的值jQuery172031288272701203823_1344179936251。

然后服务端构造一个函数调用型的字符串,将需要发送给客户端的值做为参数。

也就是:jQuery172031288272701203823_1344179936251([这里传参数JSON数据])。

上PHP代码。

Copy to Clipboard引用的内容:[]

<?php
header('Content-Type:text/javascript; charset=utf-8');
class User{
public $id;
public $name;
public function __construct($id, $name){
$this->id = $id;
$this->name = $name;
}
}
$users = array(new User(1, 'admin'), new User(2, 'root'));

echo $_REQUEST['callback'].'('.json_encode($users).')';

Ajax得到的数据:

Copy to Clipboard引用的内容:[]

jQuery172031288272701203823_1344179936251([{"id":1,"name":"admin"},{"id":2,"name":"root"}])

客户端得到这个数据之后就执行这条语句,由于前面已经将$.getJSON()传入的回掉函数指定了同样的函数名,此时就会调用传入的函数,并将数据传入。

具体的跨域请求是利用了页面中可以引入其他域的js文件这个性质,在页面中创建一个script节点,将他的src属性指向其他域的动态文件。浏览器就会加载这个文件并执行其中的脚本。

网友评论:

这就是 JSONP,一般不需要这么麻烦,设置 dataType: "jsonp" 就可以了,默认就会把 callback=? 加上。 只有当你不以 callback 为回调函数取名参数时你才需要用到问好,例如 myOwnCallbackFunctionName=?。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • JQuery实现Ajax加载图片的方法

    JQuery实现Ajax加载图片的方法

    2016-02-24 17:01

  • 判断用户是不是为ajax请求

    判断用户是不是为ajax请求

    2016-02-24 17:00

  • Ajax与WEB开发 by alixixi.com

    Ajax与WEB开发 by alixixi.com

    2016-02-11 11:02

  • jQuery.ajax()的相关参数及使用

    jQuery.ajax()的相关参数及使用

    2016-02-08 16:00

网友点评