我们都知道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); };