2019獨角獸企業(yè)重金招聘Python工程師標準>>>

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

? ? ? ?看了看jquery，當然，jquery封裝的很好，$.ajax就可以實現(xiàn)跨域，只需要在參數(shù)中配置一下即可，但在這兒，我把它和ajax分開，因為它的原理和ajax的原理還是大不一樣的。

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

? ? ? ? 因為這樣，所以對請求的URL的格式是有一定要求的，如：fn({}),{}這個里面的內(nèi)容就是傳遞回來的數(shù)據(jù)。

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

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

? ? ? ? 之后就是創(chuàng)建一個DOM節(jié)點，將這個節(jié)點插入到文檔中，發(fā)起一個HTTP請求，當數(shù)據(jù)下載完畢之后，由于它是被當做JS，它會自動執(zhí)行這個函數(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) {//拿到jsonp數(shù)據(jù)之后就需要將DOM中相應的節(jié)點清除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跨域实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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