怎么实现ajax跨域,ajax跨域实现

我们都知道ajax是不能跨域的，那么怎么实现ajax跨域呢？

看了看jquery，当然，jquery封装的很好，$.ajax就可以实现跨域，只需要在参数中配置一下即可，但在这儿，我把它和ajax分开，因为它的原理和ajax的原理还是大不一样的。

实现ajax跨域的一个常用方法是使用jsonp，jsonp可以说是一种格式，它实际上把请求的URL里面的内容当成一个JS，当URL的内容下载下来之后直接执行。

因为这样，所以对请求的URL的格式是有一定要求的，如：fn({}),{}这个里面的内容就是传递回来的数据。

搞懂这个之后，整个实现就不难了，基本上就是首先拼接URL，把所有要传递的数据拼接到URL上面，即通过GET方式传递数据。

如：test.PHP?data1=a&data2=b&data3=c

之后就是创建一个DOM节点，将这个节点插入到文档中，发起一个HTTP请求，当数据下载完毕之后，由于它是被当做JS，它会自动执行这个函数。

代码如下：

var jsonp = function(options) {

var _options = {

url : options['url'] || "",success : options['success'] || "",jsonp : options['jsonp'] || "callback",//jsonp调用参数

jsonpCallback : options['jsonpCallback'] || "callbackHandler",//jsonp回调函数名

data : options['data'] || "" //{}字面量形式

};

var url = _options['url'] + '?';

for(var key in _options['data']) {

url += (key + "=" + _options['data'][key] + "&");

}

url += (_options['jsonp'] + "=" + _options['jsonpCallback']);

var node = document.createElement("script");

var ele = document.getElementsByTagName("head")[0];

//将函数挂在window上面，执行之后立即删除

window[_options['jsonpCallback']] = function(data) {

//拿到jsonp数据之后就需要将DOM中相应的节点清除

window[_options['jsonpCallback']] = undefined;

try {

delete window[_options['jsonpCallback']];

} catch(e) {}

_options['success'](data);

setTimeout(function() {

ele.removeChild(node);

},10);

};

node.setAttribute("type","text/javascript");

node.setAttribute("src",url);

ele.appendChild(node);

};

总结

以上是编程之家为你收集整理的ajax跨域实现全部内容，希望文章能够帮你解决ajax跨域实现所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。