解析 -AJAX 及 -jQuery中ajax的應用

什麼是 AJAX

async javascript and xml： 異步的 JS 和 XML

• 此處的異步指的是：局部刷新（對應的是全局刷新）
• XML：可擴展的標記語言，用本身自定義的標籤來存儲數據的（在很早之前，咱們基於 AJAX 和服務器進行交互的數據格式通常都已 XML 格式爲主，由於它能清晰展現出對應的數據和結構層級；可是到後面，流行了一種新的數據格式 JSON，它不只比 XML 更清晰展現數據的結構，並且一樣的數據存儲，JSON 更加輕量，也方便解析和相關的操做，因此如今先後端的數據交互都已 JSON 格式爲主）

<?xml version="1.0" encoding="UTF-8"?>
<root> <student> <name>張三</name> <age>25</age> <score> <english>95</english> </score> </student> <student> <name>張三</name> <age>25</age> </student> <student> <name>張三</name> <age>25</age> </student> </root>
-------------------------
[{
"name": "張三",
"age": 25,
"score": {
"english": 95
}
}, {
"name": "張三",
"age": 25
}, {
"name": "張三",
"age": 25
}]
複製代碼

• AJAX解決了頁面異步刷新的問題

AJAX的基礎操做

//1.建立AJAX實例
let xhr=new XMLHttpRequest; //=>IE低版本瀏覽器中用的是 new ActiveXObject() 高程三中JS惰性編程思想，關於XHR的兼容處理

//2.打開URL（配置發送請求的信息）
//METHOD:HTTP請求方式
//URL:請求地址（API接口地址）
//ASYNC:設置同步或者異步，默認是TRUE異步，FALSE同步
//USER-NAME:傳遞給服務器的用戶名
//USER-PASS:傳遞給服務器的密碼
xhr.open('GET','./json/xxx.json',true);

//3.監聽AJAX狀態，在狀態爲X的時候，獲取服務器響應的內容
//AJAX狀態碼：0 1 2 3 4
xhr.onreadystatechange=function(){
   if(xhr.readyState===4 && /^(2|3)\d{2}$/.test(xhr.status)){
      let result = xhr.responseText;
   }
}

//4.發送請求
//SEND中放的是請求主體的內容
xhr.send(null);

=>AJAX任務（發送一個請求給服務器，從服務器獲取到對應的內容）從SEND後開始，到XHR.READYSTATE===4的時候算任務結束
複製代碼

HTTP的請求方式

• GET系列請求
  • GET
  • DELETE 通常應用於告訴服務器，從服務器上刪除點東西
  • HEAD 只想獲取響應頭內容，告訴服務器響應主體內容不要了
  • OPTIONS 試探性請求，發個請求給服務器，看看服務器能不能接收到，能不能返回
• POST系列請求
  • POST
  • PUT 和DELETE對應，通常是想讓服務器把我傳遞的信息存儲到服務器上（通常應用於文件和大型數據內容）

=>真實項目中用對應的請求方式，會使請求變的更加明確（語義化），不遵循這些方式也能夠，最起碼瀏覽器在語法上是容許的；可是這些是開發者們相互間約定俗成的規範；

get 和 post 區別？

GET系列通常用於從服務器獲取信息，POST系列通常用於給服務器推送信息，可是不論GET和POST均可以把信息傳遞給服務器，也能從服務器獲取到結果，只不過是誰多誰少的問題

• GET:給的少，拿的多
• POST:給的多，拿的少

客戶端怎麼把信息傳遞給服務器?

• 問號傳參 xhr.open('GET','/getdata?xxx=xxx&xxx=xxx')
• 設置請求頭 xhr.setRequestHeader([key],[value])
• 設置請求主體 xhr.send(請求主體信息)

服務器怎麼把信息返回給客戶端？

• 經過響應頭
• 經過響應主體（大部分信息都是基於響應主體返回的）

GET系列和POST系列的本質區別：

GET系列傳遞給服務器信息的方式通常採用：問號傳參 POST系列傳遞給服務器信息的方式通常採用：設置請求主體

1. GET傳遞給服務器的內容比POST少，由於URL有最長大小限制（IE瀏覽器通常限制2KB，谷歌瀏覽器通常限制4~8KB，超過長度的部分自動被瀏覽器截取了）

xhr.open('GET','/list?name=zhufeng&year=10&xxx=xxx...')
xhr.send('....')  請求主體中傳遞的內容理論上沒有大小限制，可是真實項目中，爲了保證傳輸的速度，咱們會本身限制一些
複製代碼

2. GET會產生緩存（緩存不是本身可控制的）：由於請求的地址（尤爲是問號傳遞的信息同樣），瀏覽器有時候會認爲你要和上次請求的數據同樣，拿的是上一次信息；這種緩存咱們不指望有，咱們指望的緩存是本身可控制的；因此真實項目中，若是一個地址，GET請求屢次，咱們要去除這個緩存；

//=>解決辦法設置隨機數
xhr.open('GET','/list?name=zhufeng&_='+Math.random());
...
xhr.open('GET','/list?name=zhufeng&_='+Math.random());
複製代碼

3. GET相比較POST來講不安全：GET是基於問號傳參傳遞給服務器內容，有一種技術叫作URL劫持，這樣別人能夠獲取或者篡改傳遞的信息；而POST基於請求主體傳遞信息，不容易被劫持；

AJAX的狀態碼

xhr.readyState 獲取狀態碼

• UNSEND 0 : 未發送（建立一個XHR，初始狀態是0）
• OPENED 1 ：已經打開（執行了xhr.open）
• HEADERS_RECEIVED 2 : 響應頭信息已經返回給客戶端（發送請求後，服務器會依次返回響應頭和響應主體的信息）
• LOADING 3 : 等待服務器返回響應內容
• DONE 4 : 響應主體信息已經返回給客戶端

<script>
		 let xhr = new XMLHttpRequest;
		// console.log(xhr.readyState); //=> 0 
		xhr.open('GET', 'json/data.json');
		// console.log(xhr.readyState); //=>1
		xhr.onreadystatechange = function () {
			// console.log(xhr.readyState); //=>2 3 4
			if (!/^(2|3)\d{2}$/.test(xhr.status)) return;
			if (xhr.readyState === 2) {
				//=>獲取響應頭信息
				//獲取的服務器時間是標準的日期格式對象（GMT格林尼治時間）
				//new Date()能把格林尼治時間轉換爲北京時間
				let serverTime = xhr.getResponseHeader('Date');
				// console.log(new Date(serverTime));
			}
			if (xhr.readyState === 4) {
				//=>獲取響應主體信息：咱們通常用responseText，由於服務器返回的信息通常都是JSON格式的字符串，若是返回的是XML格式，咱們用responseXML...
				// xhr.responseXML
				// xhr.response
				// xhr.responseType
				// console.log(xhr.responseText);
			}
		}
		xhr.send(null); 
	</script>
複製代碼

同步異步

<script>
   //=>AJAX任務的異步
    let xhr = new XMLHttpRequest;
   xhr.open('GET', 'json/data.json');
   //=>設置事件綁定以前狀態1
   xhr.onreadystatechange = function () {
      console.log(xhr.readyState); //=>2 3 4
   }
   xhr.send(null);

    let xhr = new XMLHttpRequest;
   xhr.open('GET', 'json/data.json');
   xhr.send(null);
   xhr.onreadystatechange = function () {
      console.log(xhr.readyState); //=>2 3 4
   }


   //=>AJAX的同步/**/
    let xhr = new XMLHttpRequest;
   xhr.open('GET', 'json/data.json', false);
   xhr.onreadystatechange = function () {
      console.log(xhr.readyState); //=>4 使用AJAX同步編程，不能在狀態碼爲2的時候獲取到響應頭的信息，可是狀態碼爲4的時候也是能夠獲取到頭和主體信息
   }
   xhr.send(null); 

    let xhr = new XMLHttpRequest;
   xhr.open('GET', 'json/data.json', false);
   xhr.send(null);//=>執行後，只有狀態碼爲4纔會繼續處理下面的代碼
   //=>狀態碼爲4的時候綁定的，而狀態不會在變了，因此方法不會執行
   xhr.onreadystatechange = function () {
      console.log(xhr.readyState);
   }

   // API：Application Programming Interface 凡是可被別人調用，而且給予反饋結果的均可以被稱之爲API接口
</script>
複製代碼

<script>
		 let xhr = new XMLHttpRequest;
		// xhr.timeout = 10; //=>設置AJAX等待時間，超過這個時間算AJAX延遲
		// xhr.ontimeout = function () {
		// console.log('請求超時~~');
		// xhr.abort(); //=>手動中斷AJAX的請求
		// }
		// xhr.withCredentials = true; //=>在跨域請求中是否容許攜帶證書（攜帶COOKIE）
		xhr.open('GET', 'json/data.json');
		//=>設置請求頭信息
		// xhr.setRequestHeader('AAA', encodeURIComponent('珠峯培訓'));
		// Uncaught TypeError: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': Value is not a valid ByteString. 設置的請求頭信息值不能是中文
		xhr.onreadystatechange = function () {
			if (!/^(2|3)\d{2}$/.test(xhr.status)) return;
			if (xhr.readyState === 4) {
				console.log(xhr.responseText);//-> {"code":63732359.6050773,"data":[{"name":"laborum velit reprehenderit et adipisicing"},{"name":"sed occaecat dolore"}]}
			}
		}
		xhr.send(null);
	</script>
複製代碼

AJAX 的同步問題

阻塞代碼加

延遲加載時間，性能低

彙總XHR的屬性和方法及事件

【屬性】

• xhr.response 響應主體內容

• xhr.responseText 響應主體的內容是字符串（JSON或者XML格式字符串均可以）

• xhr.responseXML 響應主體的內容是XML文檔

• xhr.status 返回的HTTP狀態碼

• xhr.statusText 狀態碼的描述

• xhr.timeout 設置請求超時的時間

• xhr.withCredentials 在跨域請求中是否容許攜帶證書（攜帶COOKIE）

【方法】

• xhr.abort() 強制中斷AJAX請求
• xhr.getAllResponseHeaders() 獲取全部響應頭的信息
• xhr.getResponseHeader([key]) 獲取KEY對應的響應頭信息
  • 例如：xhr.getResponseHeader( 'date') 就是在獲取響應中的服務器時間
• xhr.open() 打開URL請求
• xhr.overrideMimeType() 重寫MIME類型
• xhr.send() 發送AJAX請求
• xhr.setRequestHeader() 設置請求頭

JQUERY中 ajax 的應用

<script src="js/jquery.min.js"></script>
	<script>
		/* * $.ajax() 基於原生JS的AJAX四步操做進行封裝 * $.ajax([URL],[OPTIONS]) * $.ajax([OPTIONS]) URL在配置項中（推薦） * $.get/post/getJSON/getScript() * ...... * 配置項信息 * url:請求的API接口地址 * method:HTTP請求方式，默認GET * data:傳遞給服務器的信息，默認null（能夠是字符串，能夠是對象，並且若是GET系列請求，JQ會自動把信息拼接到URL的末尾，基於問號傳參傳遞給服務器；若是是POST請求，JQ會基於請求主體，把信息傳遞給服務器） * dataType:預設服務器返回的結果格式（服務器返回的通常都是JSON格式的字符串，若是咱們設置了DATA-TYPE，JQ會根據設置的類型，把服務器返回的結果處理爲對應的格式），支持的內容text / json / xml / html / script / jsonp(跨域) =>不影響服務器返回的結果，只是把服務器返回的結果進行二次處理 * async:是否爲異步操做，默認是TRUE，表明異步操做 * cache:緩存處理，只對GET系列請求有做用，默認是TRUE不處理緩存，當咱們設置FALSE後，JQ幫咱們在URL的末尾設置一個隨機數 * contentType:設置傳遞給服務器內容的格式類型 默認是"application/x-www-form-urlencoded" * 客戶端傳遞給服務器信息的格式（類型通常都是字符串），經常使用的： * form-data表單數據：JSON格式 '{"name":"xxx","lx":1}' * x-www-form-urlencoded：name=xxx&lx=1 * raw：純文本格式 * headers:設置請求頭信息，他是一個對象 * timeout:設置超時的時間 * success:回調函數，當數據請求成功執行，方法中的參數就是從服務器獲取的結果 * error:回調函數，數據請求失敗執行，方法中的參數是錯誤信息 */
		$.ajax({
			url: 'http://yapi.demo.qunar.com/mock/95100/project/list',
			method: 'POST',
			data: {
				name: 'zhufeng',
				lx: 'teacher'
			},
			dataType: 'json',
			async: true,
			cache: false,
			headers: {},
			success: (result, status, xhr) => {
				//=>xhr:是JQ幫咱們處理過的AJAX實例
				console.log(result, status, xhr);
			}
		});
	</script>
複製代碼