AJAX/跨域
1. ajax
$.ajax({
url:" ... ",
type: "get"|"post",
data:"變量=值&..."|{變量:值,...},
dataType:"json",將json字符串轉換為對象
success:function(res){ //在響應成功結束后自動執行
//res就是響應的結果
},
error(){ 當請求出錯時，自動觸發 },
complete(){ 無論成功還是出錯，只要請求結束就執行 }
})
2. 跨域:
什么是: 一個域名下的網站，請求另一個域名下的網站的資源
問題: ajax禁止發送跨域請求！
以下情況不允許發送ajax請求:
1.
http://www.baidu.com ajax->
http://www.tmooc.cn
2.
http://oa.baidu.com ajax->
http://hr.baidu.com yuxing 域名不一樣
3.
http://localhost:3000 ajax->
http://localhost:8000 端口號不一樣
4.
https://baidu.com ajax->
http://baidu.com 協議不同
5.
http://localhost ajax->
http://127.0.0.1
如何跨域訪問: 2種:
1. JSONP，需要客戶端與服務端配合
什么是：填充式JSON——JSON with Padding
何時: 今后跨域，首選jsonp
如何:
基本思想：用其它可以跨域請求的元素，代替ajax
程序中都是用<script>元素代替ajax發送請求
方案一:
1. 服務端: 將要返回的數據，填充進一條字符串格式的js語句中，組成一條正確的可執行的js語句，
再返回
2. 客戶端: 添加<script src="服務器端地址">
結果: script可跨域請求到服務器返回的js語句，並在客戶端立刻執行。
問題: 服務端返回的js語句是寫死的，眾口難調。
方案二:
1. 服務端: 返回一條自定義函數的調用語句
要求客戶端必須執行指定名稱的函數
2. 客戶端: 提前定義一個與服務端同名的函數
函數有一個參數可接受服務器端的數據
函數內可執行任意操作
問題: 函數名是寫死的，極容易發生沖突！
方案三:
1. 服務端：接受一個函數名參數
將客戶端發來的函數名參數拼接到js語句的開頭！
2. 客戶端：<script src="地址?參數名=本地函數名"
問題: script是寫死的！只能在頁面加載時請求一次
方案四:
1. 服務端不變
2. 客戶端: 動態創建script元素
script只要被加到頁面上，就立刻自動請求
問題: script不斷累積
解決: 在回調函數中自動刪除script
其實: $.ajax也支持jsonp
$.ajax({
dataType:"jsonp",
})
強調: dataType:"jsonp"需要服務器端配合才能實現。
其實，dataType:"jsonp"的原理和方案四一致:
1. 也是通過在head中動態添加<script>發送請求
2. 也是通過?callback=函數名，發送函數名到服務端
3. 函數名其實是$.ajax自動為success函數生成的隨機函數名。
2. CORS，只要服務器端允許即可
在服務器端添加響應頭: node中:
res.writeHead(200,{
"Content-Type":"application/json;charset=utf-8",
"Access-Control-Allow-Origin":"指定來源域名"|"*"
})