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/json
JSON,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 服務器目前無法使用(超載或停機維護)