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

學(xué)習(xí)目錄：

AJAX基礎(chǔ)

PHP與AJAX

JSON格式

jQuery中的AJAX

個人網(wǎng)站原創(chuàng)鏈接地址：不足之處歡迎留言...逃...

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

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

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

(4)AJAX同步與異步：同步說白了就是加載整個頁面;異步能夠加載部分頁面。具體的話,客戶端與服務(wù)器端的聯(lián)系。Ajax技術(shù)出現(xiàn)之前，都是同步的交換數(shù)據(jù)，如果填寫的比較復(fù)雜的表單將非常麻煩。有了XMLHttpRequest對象后，同步世界變?yōu)榱水惒绞澜纭Ｍㄟ^XMLHttpRequest這個對象后臺可以和服務(wù)器進行數(shù)據(jù)交換。

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

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

(6)HTTP請求：http是一種無狀態(tài)的協(xié)議：說白了就是不能建立持久連接且無記憶的協(xié)議。進一步：通過頁面請求和響應(yīng)的過程，實現(xiàn)網(wǎng)頁的調(diào)試。

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

建立TCP連接

Web瀏覽器向Web服務(wù)器發(fā)送請求命令

Web瀏覽器發(fā)送請求頭信息

Web服務(wù)器應(yīng)答

Web服務(wù)器發(fā)送應(yīng)答頭信息

Web服務(wù)器向瀏覽器發(fā)送數(shù)據(jù)

Web服務(wù)器關(guān)閉TCP連接

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

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

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

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

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

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

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

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

由一個數(shù)字和文字組成的狀態(tài)碼，用來顯示請求是成功還是失敗；

響應(yīng)頭，包含服務(wù)器類型，日期時間，內(nèi)容類型和長度等；

響應(yīng)體，也就是響應(yīng)正文。

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

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

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

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

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

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

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

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

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

舉個栗子:

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

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

responseText:簡單來說:就是接收服務(wù)器響應(yīng)回送的數(shù)據(jù)。獲得字符串形式的相應(yīng)數(shù)據(jù)。

responsXML:獲得XML形式的相應(yīng)數(shù)據(jù)。現(xiàn)在一般轉(zhuǎn)換為JSON形式的數(shù)據(jù)。

status和statusText：以數(shù)字和文本形式返回http狀態(tài)碼。

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

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

readyState屬性：響應(yīng)返回成功的時候得到通知。

0：請求未初始化，open還沒有調(diào)用。

1：服務(wù)器連接已建立，open已經(jīng)調(diào)用了。

2：請求已經(jīng)接收，也就是接收到頭信息了。

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

4：請求已完成，且響應(yīng)已就緒，也就是響應(yīng)完成了。

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

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

實戰(zhàn):[服務(wù)器端與客戶端]實現(xiàn)查詢員工和新建員工的后臺接口

(1)客戶端部分代碼:

//新建員工客戶端代碼
document.getElementById("save").onclick=function(){
    var request=new XMLHttpRequest();//創(chuàng)建XHR對象
    request.open("POST","action.php");//調(diào)用異步請求
    //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");//設(shè)置http的頭信息
    request.send(data);//發(fā)送異步請求
    //對事件進行監(jiān)聽,判斷服務(wù)器是否能正確做出響應(yīng)
    request.onreadystatechange=function(){
        if(request.readyState===4){
            if(request.status===200){
                //innerHTML不僅可以讀取元素內(nèi)容,還可以將內(nèi)容寫入元素
                //ajax引擎對象通過responseText屬性或者responseXML屬性接收服務(wù)器回送的數(shù)據(jù)，然后在靜態(tài)頁面中對其進行處理，使頁面達到局部刷新的效果
                document.getElementById("createResult").innerHTML=request.responseText;
            }else{
                alter("發(fā)生錯誤:"+request.status);
            }
        }
    }
}

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

//查詢員工服務(wù)器端代碼

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

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

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

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

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

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

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

舉個栗子：

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

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

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

eval();不安全，如果json中有函數(shù)或js程序代碼（alert或一個window.location.href()跳轉(zhuǎn)鏈接病毒網(wǎng)站等），會優(yōu)先執(zhí)行代碼，危險操作。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);

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

(7)json驗證工具：JSONLint

(8)舉個栗子:

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

服務(wù)器端部分代碼:

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

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

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

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

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

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

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

url：發(fā)送請求的地址。

data：是一個對象，連同請求發(fā)送到服務(wù)器的數(shù)據(jù)。

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

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

error：是一個方法，請求失敗時調(diào)用此函數(shù)。傳入XMLHttpRequest對象。

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