摘要：響應一般由三個部分組成由一個數字和文字組成的狀態碼，用來顯示請求是成功還是失敗響應頭，包含服務器類型，日期時間，內容類型和長度等響應體，也就是響應正文。獲得形式的相應數據。和以數字和文本形式返回狀態碼。

學習目錄：

AJAX基礎

PHP與AJAX

JSON格式

jQuery中的AJAX

個人網站原創鏈接地址：不足之處歡迎留言...逃...

(1)AJAX(Asynchronous JavaScript and XML):異步的javascript和xml的縮寫。

(2)AJAX不是某種編程語言,而是一種在無需加載整個頁面的情況下能夠更新部分網頁的技術。

(3)傳統網頁的缺點：需要更新內容或者提交一個表單,需要重新加載整個頁面;使用AJAX優點：通過在后臺跟服務器進行少量的數據交換，網頁就可以實現異步局部更新。對于填寫復雜表單來說，有非常好的用戶體驗。

(4)AJAX同步與異步：同步說白了就是加載整個頁面;異步能夠加載部分頁面。具體的話,客戶端與服務器端的聯系。Ajax技術出現之前，都是同步的交換數據，如果填寫的比較復雜的表單將非常麻煩。有了XMLHttpRequest對象后，同步世界變為了異步世界。通過XMLHttpRequest這個對象后臺可以和服務器進行數據交換。

(5)XMLHttpRequest對象創建：var requerst=new XMLHttpRequest();直接實例化對象即可!注意：IE5和IE6不支持這種定義，如果要實現瀏覽器頁面兼容，如下代碼所示：

var request;
if(window.XMLHttpRequest){
    request  = new XMLHttpRequest();  // IE7+,Firefox,Chrome,Opera,Safari...
}else{
    request = new ActiveObject("Microsoft.XMLHTTP"); // IE6,IE5
}

(6)HTTP請求：http是一種無狀態的協議：說白了就是不能建立持久連接且無記憶的協議。進一步：通過頁面請求和響應的過程，實現網頁的調試。

(6.1)一個完整的HTTP請求過程，通常有下面7個步驟：

建立TCP連接

Web瀏覽器向Web服務器發送請求命令

Web瀏覽器發送請求頭信息

Web服務器應答

Web服務器發送應答頭信息

Web服務器向瀏覽器發送數據

Web服務器關閉TCP連接

(6.2)http請求一般由四部分組成：

HTTP請求的方法或動作，比如是GET還是POST請求

正在請求的URL，總得知道請求的地址是什么吧

請求頭，包含一些客戶端的環境信息，身份驗證信息等

請求體，也就是請求正文，請求正文中可以包含客戶提交的查詢支付穿信息，表單信息等等

(6.3)GET與POST[收集來自method="post/get"的表單中的name值]

說白了,都是收集從表單里面傳過來的值。傳過去的值,一種以url的形式顯示(不安全),一種以值的形式顯示(安全);GET一般用于信息的獲取，使用url傳遞參數，限制在2000個字符，對所有人可見，不安全。POST一般用于從表單發送數據，參數在http請求體中，不限制信息發送數量。

(6.4)Http響應一般由三個部分組成:

由一個數字和文字組成的狀態碼，用來顯示請求是成功還是失敗；

響應頭，包含服務器類型，日期時間，內容類型和長度等；

響應體，也就是響應正文。

(6.5)Http狀態碼由三位數字組成，其中首位數字定義了狀態碼的類型：

1XX:信息類，表示收到web瀏覽器請求，正在進一步的處理中；

2XX:成功，表示用戶請求被正確接收、理解和處理，例如：200 OK

3XX:重定向，表示請求沒有成功，客戶必須采取進一步的動作

4XX:客戶端錯誤，表示客戶端提交的請求有錯誤，如404 NOT FOUND，意味著請求中引用的文檔不存在。

5XX:服務器錯誤，表示服務器不能完成對請求的處理。

(7)XMLHttpRequest發送請求:(對象的方法)

open(method請求方法,url請求地址,async請求同步或者異步(異步是true,同步是false,其實默認就是true));///調用異步請求

send(string);(使用get方法時，參數可以不填寫或者null，因為信息都包含在地址欄url中；使用post則一定要填寫);//把請求發送到服務器

舉個栗子:

request.open("POST","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");//設置http的頭信息,告訴web服務器要發送一個表單;注意：setRequest請求一定要放在open和send之間，否則會拋出異常
request.send("name=王大錘&sex=男");

(8)XMLHttpRequest取得響應:(對象的方法和屬性)

responseText:簡單來說:就是接收服務器響應回送的數據。獲得字符串形式的相應數據。

responsXML:獲得XML形式的相應數據。現在一般轉換為JSON形式的數據。

status和statusText：以數字和文本形式返回http狀態碼。

getAllResponseHeader()：獲取所有的響應報頭。

getResponseHeader()：查詢響應中的某個字段的值。

readyState屬性：響應返回成功的時候得到通知。

0：請求未初始化，open還沒有調用。

1：服務器連接已建立，open已經調用了。

2：請求已經接收，也就是接收到頭信息了。

3：請求處理中，也就是接收到響應主體了。

4：請求已完成，且響應已就緒，也就是響應完成了。

舉個栗子:涵蓋了ajax的大部分內容(典型的xhr建立ajax的過程)

var request = new XMLHttpRequest();//創建XHR對象
request.open("GET","get.php",true);//調用異步請求
request.send();//發送異步請求
//對事件進行監聽,判斷服務器是否正確得做出了響應
request.onreadystatechange = function(){
  if(request.readyState===4 && request.status === 200){
    request.reponseText;//接收服務器響應回送的數據
   }
}

實戰:[服務器端與客戶端]實現查詢員工和新建員工的后臺接口

(1)客戶端部分代碼:

//新建員工客戶端代碼
document.getElementById("save").onclick=function(){
    var request=new XMLHttpRequest();//創建XHR對象
    request.open("POST","action.php");//調用異步請求
    //data拼接的URL
    //document.getElementById("staffName").value獲取表單中用戶寫入的值
    var data = "username=" + document.getElementById("staffName").value 
                  + "&num=" + document.getElementById("staffNumber").value 
                  + "&workname=" + document.getElementById("staffJob").value;
    request.setRequestHeader("Content-type","application/x-www-form-urlencoded");//設置http的頭信息
    request.send(data);//發送異步請求
    //對事件進行監聽,判斷服務器是否能正確做出響應
    request.onreadystatechange=function(){
        if(request.readyState===4){
            if(request.status===200){
                //innerHTML不僅可以讀取元素內容,還可以將內容寫入元素
                //ajax引擎對象通過responseText屬性或者responseXML屬性接收服務器回送的數據，然后在靜態頁面中對其進行處理，使頁面達到局部刷新的效果
                document.getElementById("createResult").innerHTML=request.responseText;
            }else{
                alter("發生錯誤:"+request.status);
            }
        }
    }
}

(2)服務器端部分代碼:

//查詢員工服務器端代碼

(1)json:javascript對象表示法。

(2)json是存儲和交換文本信息的語法，類似xml。采用鍵值對的方式組織，易于人們閱讀與機器解析。

(3)json是獨立于語言的，不管什么語言都可以解析json，只要按json的規則來就行。

(4)json的長度比xml小;json讀寫的速度更快;json可以使用js內建方法直接解析，轉化成js對象，非常方便。

(5)json語法規則：json數據的書寫格式是：名稱/值對。

名稱/值對組合中的名稱寫在前面（在雙引號中），值對寫在后面（同樣在雙引號中），中間用冒號隔開，比如"name":"王大錘"。注意：json與javaScript對象表示法不同，javaScript對象表示法的鍵值不需要用引號，但是json的鍵值要用引號。

注意：json可以是整型、浮點型、字符串(在雙引號中)、布爾值(true或false)、數組(在方括號中)、對象(在花括號中)、null等數據類型。

舉個栗子：

{//定義了一個json對象
  "staff":[//定義了一個數組
    {"name":"王大錘","age":21},//定義了一個name對象
    {"name":"叫獸","age":35}
  ]
}

(6)json解析：eval()和JSON.parse()兩種方式解析成JSON形式

兩種方法比較：建議使用JSON.parse()方法解析成JSON形式

eval();不安全，如果json中有函數或js程序代碼（alert或一個window.location.href()跳轉鏈接病毒網站等），會優先執行代碼，危險操作。JSON.parse();對json文件具有校驗功能，如果json文件里面有程序腳本，會解析報錯。

舉個栗子：

var jsondata="{
    "staff":[{
            "name":"王大錘",
            "age":22
        },
        {
            "name":"叫獸",
            "age":23
        },
        {
            "name":"王尼瑪",
            "age":24
        }
    ]
}";

var jsonobj=JSON.parse(jsondata);//JSON.parse解析JSON
var jsonobj=eval("(" + jsondata + ")");//eval解析JSON

alert(jsonobj.staff[0].name);

注意：上面書寫是錯誤的，只為了看清楚。逗號不是分隔符，逗號是文本內容，所有的都應該緊湊寫，不能自己為了看清楚，人為用空格分開。(這里找了一個小時錯誤...)

(7)json驗證工具：JSONLint

(8)舉個栗子:

使用json,首先需要服務器端的約定,
用此種方法能夠減少更多的判斷,以更加優雅的形式顯示
{
    //前端規則驗證、后端數據驗證
    "success":true,//是否正確執行(表單等規則驗證)
    "msg":"×××"http://請求的響應值是否成功(http響應返回的信息)
}

服務器端部分代碼:

//echo "參數錯誤，員工信息填寫不全";
echo "{"success":false,"msg":"參數錯誤，員工信息填寫不全"}";

if($query){
    //echo "員工：" . $_POST["username"] . " 信息保存成功！";
    echo "{"success":true,"msg":"員工保存成功"}";
}else{
    //echo "員工：" . $_POST["username"] . " 信息保存失敗！";
    echo "{"success":false,"msg":"員工保存失敗"}";
}

客戶端json代碼:其它不變,將服務器端響應傳過來的responseText(文本形式)轉換為(JSON形式),將json字符串轉化為了一個json對象data,然后就能夠以對象的形式處理數據

    request.onreadystatechange=function(){
        if(request.readyState===4){
            if(request.status===200){
                //將服務器端響應傳過來的responseText(文本形式)轉換為(JSON形式)
                //將json字符串轉化為了一個json對象data
                var data=JSON.parse(request.responseText);
                if(data.success){
                    document.getElementById("createResult").innerHTML=data.msg;
                }else{
                    document.getElementById("createResult").innerHTML="出現錯誤"+data.msg;
                }
            }
        }
    }

(1)使用jquery實現ajax請求：作用：避免兼容問題，代碼簡潔，操作快捷方便。

(2)語法:jQuery.ajax([settings])

type：類型，“POST”或“GET”，默認為“GET”。

url：發送請求的地址。

data：是一個對象，連同請求發送到服務器的數據。

dataType：預期服務器返回的數據類型。如果不指定，jQuery將自動根據HTTP包MIME信息來智能判斷，一般我們采用json格式，可以設置為“json”。

success：是一個方法，請求成功后的毀掉函數。傳入返回后的數據，以及包含成功代碼的字符串。

error：是一個方法，請求失敗時調用此函數。傳入XMLHttpRequest對象。

更新時間:2018/2/13 23:36:53