2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

? ? ? ?我們都知道ajax是不能跨域的，那么怎么實(shí)現(xiàn)ajax跨域呢？

? ? ? ?看了看jquery，當(dāng)然，jquery封裝的很好，$.ajax就可以實(shí)現(xiàn)跨域，只需要在參數(shù)中配置一下即可，但在這兒，我把它和ajax分開(kāi)，因?yàn)樗脑砗蚢jax的原理還是大不一樣的。

? ? ? ? 實(shí)現(xiàn)ajax跨域的一個(gè)常用方法是使用jsonp，jsonp可以說(shuō)是一種格式，它實(shí)際上把請(qǐng)求的URL里面的內(nèi)容當(dāng)成一個(gè)JS，當(dāng)URL的內(nèi)容下載下來(lái)之后直接執(zhí)行。

? ? ? ? 因?yàn)檫@樣，所以對(duì)請(qǐng)求的URL的格式是有一定要求的，如：fn({}),{}這個(gè)里面的內(nèi)容就是傳遞回來(lái)的數(shù)據(jù)。

? ? ? ? 搞懂這個(gè)之后，整個(gè)實(shí)現(xiàn)就不難了，基本上就是首先拼接URL，把所有要傳遞的數(shù)據(jù)拼接到URL上面，即通過(guò)GET方式傳遞數(shù)據(jù)。

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

? ? ? ? 之后就是創(chuàng)建一個(gè)DOM節(jié)點(diǎn)，將這個(gè)節(jié)點(diǎn)插入到文檔中，發(fā)起一個(gè)HTTP請(qǐng)求，當(dāng)數(shù)據(jù)下載完畢之后，由于它是被當(dāng)做JS，它會(huì)自動(dòng)執(zhí)行這個(gè)函數(shù)。

? ? ? ? 代碼如下：

?

var jsonp = function(options) {var _options = {url : options['url'] || "",success : options['success'] || "",jsonp : options['jsonp'] || "callback", //jsonp調(diào)用參數(shù)jsonpCallback : options['jsonpCallback'] || "callbackHandler", //jsonp回調(diào)函數(shù)名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];//將函數(shù)掛在window上面，執(zhí)行之后立即刪除window[_options['jsonpCallback']] = function(data) {//拿到j(luò)sonp數(shù)據(jù)之后就需要將DOM中相應(yīng)的節(jié)點(diǎn)清除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); };

轉(zhuǎn)載于:https://my.oschina.net/mingtingling/blog/110961

總結(jié)

以上是生活随笔為你收集整理的ajax跨域实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。