ajax三部曲
var http = new XMLHttpRequest()
http.open("GET","xxx.com/xx",true)
http.send()
http.onreadystatechange(()=>{
//做出不同的處理
if(http.readyState === 4){
if(http.status === 200){
console.log(http.responseText)
}
}
})
封裝
function ajax(url,method,async,callback,data){
var http = new XMLHttpRequest()
http.open(method,url,async)
if(data){
data = JSON.stringify(data)
http.send(data)
}else{
http.send()
}
http.onreadystatechange(()=>{
//做出不同的處理
if(http.readyState === 4){
if(http.status === 200){
console.log(http.responseText)
// callback(http.responseText)
}
}
})
}
ajax("xxx.com/xx","GET",true)
傳參JSON化
function ajax(e){
var http = new XMLHttpRequest()
http.open(e.method,e.url,e.async)
if(e.data){
data = JSON.stringify(e.data)
http.send(data)
}else{
http.send()
}
http.onreadystatechange((response)=>{
//做出不同的處理
if(http.readyState === 4){
if(http.status === 200){
console.log(http.responseText)
// e.callback(http.responseText)
}
}
})
}
ajax({
url:"xxx.com/xx",
method:"GET",
data:null,
async:true,
callback:(r)=>{console.log(r)},
})
JSON.stringify()字符串化，JSON.parse()解析爲對象
jQeury的封裝
$.extend({
ajax(e){
//...
}
})
// $.extend({ajax}) => $.ajax
// $.fn.extend({ajax}) => $("#div").ajax
jQuery中的ajax請求
$.ajax({
type:"GET",
data:"",
url:"xxx.com/xxx",
timeout: 10000,
beforeSend: function(r) {
r.setRequestHeader("name":"value");
},
headers: {
'Access-Token':$.cookie('access_token')
},
dataType:"jsonp",
success(){},
error(){},
complete(){},
})
jquery Ajax參數表 – cuishifeng.cn
設置請求頭
- JS
調用 open( ) 之後 且 調用 send( ) 之前，需要後端配置，響應請求頭http.setRequestHeader("name","value")； - jQuery：
$.ajax({
headers:{
"Origin":"http://www.baidu.com/"
}
})
//或
$.ajax({
beforeSend:(request){
request.setRequestHeader("Origin","http://www.baidu.com/")
}
})
瀏覽器默認不讓修改Origin等等一些敏感字段；
content-type：application/x-www-form-urlencoded表單鍵值對，瀏覽器默認，multipart/form-data二進制文件，application/jsonJSON，text/*遠程調用*文件，HTML,XML等等，text/plain純文本
跨域
同源策略（http協議+域名+端口號要相同）
- Jsonp（ajax跨域請求一般是get請求）
- document.domain + iframe
- location.hash + iframe
- window.name + iframe
- postMessage
- 跨域資源共享（CORS）
- nginx代理
- nodejs中間件代理
- WebSocket協議
單向的數據請求，我們應該優先選擇JSONP或者window.name，
雙向通信優先採取location.hash，
在未與數據提供方達成通信協議的情況下我們也可以用server proxy的方式來抓取數據。
解決：
1. jsonp（只解決get）：
動態創建一個script標籤，利用script標籤的src屬性不受同源策略限制(因爲所有的src屬性和href屬性都不受同源策略的限制)，可以請求第三方服務器資源內容
script的src屬性設置接口地址，URL接口參數必須要帶一個自定義函數名，服務器端通過參數去接受返回的數據。
2. document.domain：
基礎域名相同，子域名不同。
3. window.name：
利用在一個瀏覽器窗口內，載入所有的域名都是共享一個window.name。
4. 服務器設置對CORS的支持
原理：服務器設置Access-Control-Allow-Origin HTTP響應頭之後，瀏覽器將會允許跨域請求。
6. 利用h5新特性window.postMessage()
CORS把HTTP請求分成兩類：
- 簡單跨域請求GET\POST\HEAD：
請求頭會攜帶Origin頭，響應頭會有Access-Control-Allow-Origin頭服務器授權信息，不通過就忽略該次響應
當請求方法是POST時，Content-Type必須是application/x-www-form-urlencoded, multipart/form-data或着text/plain中的一個值，且請求中沒有自定義HTTP頭部；
JSONP技術只用於GET請求；
- Preflighted跨域請求：
其他類型請求或有自定義頭部時，先發送OPTIONS請求確認權限
server-end：徹底解決跨域問題(五種解決跨域的方式)
攔截器
$.ajaxSetup({statusCode: {400:{...}})，配置默認設置
Angular2：我教Rx寫文檔
Vue：axios.js中文網
MVC model（數據相關的） view（頁面視圖相關的） controller（控制器） -----Angular.js、React.js
MVVM model view viewmodel（數據和頁面視圖相關的隱形的控制變化） -----vue（修改數據或者頁面視圖的時候，不用擔心出事，viewmodel幫我們處理。只需要控制好數據和頁面視圖，中間的所有處理是viewmodel相關的）
HTTP 1.0/1.1/2 HTTPS
- HTTP1： GET、POST、HEAD、
- HTTP1.1： OPTIONS、DELETE、PUT、TRACE、CONNECT
- HTTP2 ：二進制文本傳輸數據，壓縮表頭，服務器推送，減少請求次數
- HTTPS：SSL加密
狀態碼
2XX（成功處理了請求狀態）
200 服務器已經成功處理請求，並提供了請求的網頁
201 用戶新建或修改數據成功
202 一個請求已經進入後臺
204 用戶刪除成功
3XX（每次請求使用的重定向不要超過5次）
304 網頁上次請求沒有更新，節省帶寬和開銷
4XX（表示請求可能出錯，妨礙了服務器的處理）
400 服務器不理解請求的語法
401 用戶沒有權限（用戶名，密碼輸入錯誤）
403 用戶得到授權（401相反），但是訪問被禁止
404 服務器找不到請求的網頁，
5XX（表示服務器在處理請求的時候發生內部錯誤）
500 服務器遇到錯誤，無法完成請求
503 服務器目前無法使用（超載或停機維護）