什么是ajax

Ajax(Asynchronous JavaScript and XML),是一種可以向服務器請求額外的數據并且無需刷新頁面的技術,ajax的出現帶來了更好的用戶體驗.

Ajax的核心就是XMLHttpRequest(XHR)對象.XHR為向服務器發送請求和解析服務器響應提供了流暢的接口.可以使用XHR對象獲取新數據,通過DOM將新數據插入到頁面.雖然名字中包含XML,但是ajax通信和數據格式無關;這種技術就是可以不用刷新就從服務器獲取數據,但是不一定是XML數據,也可以是json.

XMLHttpRequest對象

XHR的用法

1.創建一個XMLHttpRequest對象

2.發送請求

1）.設置請求行 xhr.open()
2）.POST請求需要設置請求頭 xhr.setRequestHeader() POST請求頭Content-Type的值: application/x-www-form-urlencoded
3）.設置請求體 xhr.send() get請求傳null,post根據情況

3.處理服務器響應

先判斷響應狀態碼和異步對象是否解析完畢.

服務器返回的狀態碼 status

1xx:消息
2xx:成功
3xx:重定向
4xx:請求錯誤
5xx:服務器錯誤

異步對象的狀態碼 readystate

0:異步對象已經創建
1:異步對象初始化完成,發送請求
2:接收服務器返回的原始數據
3:數據正在解析,解析需要時間
4:數據解析完成,數據可以使用了

XML

XML的特點，出身名門，W3C制定，微軟和IBM曾經共同大力推薦過的數據格式.XML 指可擴展標記語言（Extensible Markup Language）,被設計用來傳輸和存儲數據,HTML 是設計用來表示頁面的.

語法規則:和HTML差不多,都是通過標記來表示的

特殊符號:比如<>要使用實體-轉移字符

xml的解析需要前后臺配合:
1.后臺在返回的時候,在響應頭中設置Content-Type的值為 application/xml
2.前臺異步對象在接收后臺數據時,記得按照xml的方式來接收,xhr.responseXML,并且它返回的是一個object對象,內容是#document

JSON

JSON(JavaScript Object Notation),出身草根，是 Javascript 的子集，專門負責描述數據格式.JSON本身是一個特殊格式的字符串,可以轉換成js對象,是網絡上用來傳輸數據使用最廣泛的數據格式，沒有之一.

語法規則:數據以 key/value 值對表示,數據由逗號分隔,大括號保存對象,中括號保存數組,名稱和值都需要使用雙引號包含(這個是和js的一點小區別).
js中解析/操作JSON:
1.JSON.parse(json字符串); 將一個json格式的字符串解析成js對象
2.JSON.stringify(js對象); 將一個js對象轉成一個json格式的字符串

自己封裝一個ajax

function pinjieData(obj) { //obj 就相當于 {key:value,key:value} //最終拼接成鍵值對的字符串 "key:value,key:value" var finalData = ""; for(key in obj){  finalData+=key+"="+obj[key]+"&"; //key:value,key:value& } return finalData.slice(0,-1);//key:value,key:value}function ajax(obj) { var url = obj.url; var method = obj.method.toLowerCase(); var success = obj.success; var finalData = pinjieData(obj.data); //finalData最終的效果key:value,key:value //1.創建xhr對象 var xhr = new XMLHttpRequest(); //get方法拼接地址,xhr.send(null) if (method=='get'){  url = url + "?"+finalData;  finalData = null; } //2.設置請求行 xhr.open(method,url); // 如果是post請求,要設置請求頭 if (method=='post'){  xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded") } //3.發送 xhr.send(finalData); //4.監聽服務器返回的數據 xhr.onreadystatechange = function () {  if (xhr.status==200 && xhr.readyState==4){   var result = null;   //獲取返回的數據類型   var rType = xhr.getResponseHeader("Content-Type");   if (rType.indexOf('xml')!=-1){    result = xhr.responseXML;   }else if(rType.indexOf('json')!=-1){    // JSON.parse 的意思是 將 json格式的字符串    //比如 [{ "src":"./images/nav0.png","content":"商品分類1"}]    //轉成js對象    result = JSON.parse(xhr.responseText);   }else{//當成普通的字符串去處理    result = xhr.responseText;   }   //將這里解析好的數據交給頁面去渲染   success(result);  } }}