ajax解決跨域

 

http://www.cnblogs.com/sunxucool/p/3433992.htmljavascript

 

爲何會出現跨域
跨域問題來源於JavaScript的同源策略,即只有 協議+主機名+端口號 (如存在)相同,則容許相互訪問。也就是說JavaScript只能訪問和操做本身域下的資源,不能訪問和操做其餘域下的資源。跨域問題是針對JS和ajax的,html自己沒有跨域問題,好比a標籤、script標籤、甚至form標籤(能夠直接跨域發送數據並接收數據)html

 

java

如何解決跨域問題
JSONP
  JSONP是JSON with Padding的略稱。它是一個非官方的協議,它容許在服務器端集成Script tags返回至客戶端,經過javascript callback的形式實現跨域訪問(這僅僅是JSONP簡單的實現形式)。關於jsonp的使用方式,能夠參考http://blog.csdn.net/alen1985/article/details/6365394,優缺點能夠參考http://blog.csdn.net/z69183787/article/details/19191385  
添加響應頭,容許跨域
  addHeader(‘Access-Control-Allow-Origin:*’);//容許全部來源訪問
  addHeader(‘Access-Control-Allow-Method:POST,GET’);//容許訪問的方式
代理的方式
服務器A的test01.html頁面想訪問服務器B的後臺action,返回「test」字符串,此時就出現跨域請求,瀏覽器控制檯會出現報錯提示,因爲跨域是瀏覽器的同源策略形成的,對於服務器後臺不存在該問題,能夠在服務器A中添加一個代理action,在該action中完成對服務器B中action數據的請求,而後在返回到test01.html頁面。
Demo1(添加容許跨域請求的響應頭)
html頁面 jquery

 


Web後臺 web

 

 


按照上面的訪問,因爲127.0.0.1:8080和localhost:8081的域和端口不一樣,因此一樣會出現跨域問題。 ajax

 


如今用添加響應頭的方式 json

 

 

Demo2(jsonp的callback方式)
這裏演示的是jquery的ajax,後臺採用的是webservice接口形式跨域

 

注意此時的dataType爲jsonp格式,看看後臺的接收
瀏覽器

 


咱們返回的其實就是一個函數的調用文本,這裏注意,callback的名稱,因爲前臺沒有指定callback函數,因此這裏自動生成了,若是想自定義回調函數名稱以下操做,添加一行請求參數服務器

 

這樣後臺的回調函數名就變成了mytest

 

瀏覽器發出的請求格式和響應數據以下,其實就是返回函數的調用,而須要返回的數據則以函數參數值的形式填入

 

此時控制檯就可以獲取到「hello world」

相關文章
相關標籤/搜索