一、jsonp方式
1.服務器搭建:
文件jsonpcli.js:作為客戶端服務器 jsonp.html:請求頁

文件jsonpser.js:作為服務端服務器 process_get:響應頁

運行這兩個文件,客戶端端口為8082,服務端端口為8081,跨域。

2.跨域請求
文件jsonp.html(三種方式任選一個)jsonp.html向process_get發出請求




3.測試
在瀏覽器中輸入網址:http://127.0.0.1:8082/jsonp.html
如圖,請求成功!

方式一

方式二

方式三

二、XHR2方式
依然上述三個文件,做部分修改,下圖所示。
1.修改
請求頁ajax不用jsonp方式,響應頁頭信息中加了字段"Access-Control-Allow-Origin"


2.測試
在瀏覽器中輸入網址:http://127.0.0.1:8082/jsonp.html
如圖,請求成功!


xhr響應過程:
1.⊙o⊙發現這次跨域ajax請求是簡單請求
2.自動在請求頭中添加一個Origin字段
3.服務器根據Origin值,決定是否同意這次請求
4.(∩_∩)同意,響應頭里添加一個access-control-allow-origin字段,響應。(╯^╰)不同意,不加該字段,拋錯,被error函數捕獲。

