跨域: js有一個同源限制,簡單說來源不一樣的話就無法相互間交互.那么怎么算來源不一樣呢, 舉個例子:瀏覽器訪問-->服務(wù)器A--->得到頁面A---頁面A中的js腳本只能訪問服務(wù)器A的資源(相同域名和端口,此外域名與對應(yīng)的ip也算不同源,要么都域名,要么都ip).

以上就是js的跨域問題,但是這里需要注意一點(diǎn)的是服務(wù)器A是沒有跨域的問題的,這個只有js存在這個問題,也就是說: 頁面A中js-->服務(wù)器A--->跨域資源,這個路徑是可以.只有 頁面A中的js--->跨域資源,這個路徑是不行的.

然后說一下解決方案中的jsonp,這個不是一種格式,而是一種解決方案.

jsonp的原理:js雖然有同源限制,但是引入js文件的時候卻沒有這個限制,也就是說:

<script type="text/javascript" src="xxx/xxxx.js"></script>

其中src屬性引入js文件的時候是沒有同源限制的,此時是可以引入域外資源的.jsonp的原理就在這里,通過動態(tài)的創(chuàng)建一個以上那行js引入語句,通過其src屬性訪問域外資源.而域外資源服務(wù)器只要返回一個能被解析為js語句的字符串即可達(dá)到返回結(jié)果的目的,形如:

callback({"key":"value",...})

其中callback是需要事先約定的名字,綠字部分為要返回的json字符串,然后拼接成以上那種形式直接返回即可.這樣頁面中的js從服務(wù)端接收到這個拼接的字符串后,就會直接執(zhí)行本地的名為callback的js方法,這也就是為何callback這個需要事先約定的原因,需要保證頁面?zhèn)纫嬖谶@個js方法,這個方法傳入的參數(shù)就為服務(wù)器側(cè)的返回值.

ajax是支持jsonp的,所以以上那些麻煩事情都會替我們做,寫法如下:

$.ajax({type: 'GET',url: "http://127.0.0.1:8080/xxx/xxx",async: false,dataType: "jsonp",jsonp: "callback",success: function(result){.....},timeout:3000 });

紅字部分標(biāo)識我們使用jsonp的方式調(diào)用,實(shí)際上此時這個已經(jīng)不是傳統(tǒng)意義上的ajax的get請求了,它的真實(shí)實(shí)現(xiàn)方式就是我們上文中說的那樣.其中紅字部分的callback為我們要和服務(wù)器端進(jìn)行溝通的部分,這個請求發(fā)送到服務(wù)器端,實(shí)際上這樣的:

http://127.0.0.1:8080/xxx/xxx?callback=jqueryxxxx

服務(wù)器端需要通過callback來取值(類似用request.getParameter("callback")),也就是取后面的jqueryxxxx等自動生成的值,這個值實(shí)際上就是對應(yīng)的我們發(fā)送請求的ajax方法中的success回調(diào)方法,服務(wù)器端如果返回

jqueryxxxx({"ret":"ok"})

頁面中會自動執(zhí)行success方法,且將{"ret":"ok"}傳給success方法的參數(shù)result.

以上就是ajax通過jsonp的方式實(shí)現(xiàn)跨域訪問的過程.可以看出基本不用我們做什么額外操作,全都封裝好了.

轉(zhuǎn)載于:https://www.cnblogs.com/chyu/p/5005323.html

總結(jié)

以上是生活随笔為你收集整理的Ajax请求利用jsonp实现跨域的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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