一些Ajax的相關內容

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請求分成兩類:

  1. 簡單跨域請求GET\POST\HEAD:
    請求頭會攜帶Origin頭,響應頭會有Access-Control-Allow-Origin頭服務器授權信息,不通過就忽略該次響應

當請求方法是POST時,Content-Type必須是application/x-www-form-urlencoded, multipart/form-data或着text/plain中的一個值,且請求中沒有自定義HTTP頭部;
JSONP技術只用於GET請求;

  1. 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 服務器目前無法使用(超載或停機維護)
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章