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

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

AJAX基礎(chǔ)

PHP與AJAX

JSON格式

jQuery中的AJAX

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

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

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

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

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

(5)XMLHttpRequest對(duì)象創(chuàng)建：var requerst=new XMLHttpRequest();直接實(shí)例化對(duì)象即可!注意：IE5和IE6不支持這種定義，如果要實(shí)現(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請(qǐng)求：http是一種無狀態(tài)的協(xié)議：說白了就是不能建立持久連接且無記憶的協(xié)議。進(jìn)一步：通過頁面請(qǐng)求和響應(yīng)的過程，實(shí)現(xiàn)網(wǎng)頁的調(diào)試。

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

建立TCP連接

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

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

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

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

Web服務(wù)器向?yàn)g覽器發(fā)送數(shù)據(jù)

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

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

HTTP請(qǐng)求的方法或動(dòng)作，比如是GET還是POST請(qǐng)求

正在請(qǐng)求的URL，總得知道請(qǐng)求的地址是什么吧

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

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

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

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

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

由一個(gè)數(shù)字和文字組成的狀態(tài)碼，用來顯示請(qǐng)求是成功還是失?。?/p>

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

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

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

1XX:信息類，表示收到web瀏覽器請(qǐng)求，正在進(jìn)一步的處理中；

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

3XX:重定向，表示請(qǐng)求沒有成功，客戶必須采取進(jìn)一步的動(dòng)作

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

5XX:服務(wù)器錯(cuò)誤，表示服務(wù)器不能完成對(duì)請(qǐng)求的處理。

(7)XMLHttpRequest發(fā)送請(qǐng)求:(對(duì)象的方法)

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

send(string);(使用get方法時(shí)，參數(shù)可以不填寫或者null，因?yàn)樾畔⒍及诘刂窓趗rl中；使用post則一定要填寫);//把請(qǐng)求發(fā)送到服務(wù)器

舉個(gè)栗子:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(1)客戶端部分代碼:

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

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

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

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

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

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

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

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

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

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

舉個(gè)栗子：

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

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

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

eval();不安全，如果json中有函數(shù)或js程序代碼（alert或一個(gè)window.location.href()跳轉(zhuǎn)鏈接病毒網(wǎng)站等），會(huì)優(yōu)先執(zhí)行代碼，危險(xiǎn)操作。JSON.parse();對(duì)json文件具有校驗(yàn)功能，如果json文件里面有程序腳本，會(huì)解析報(bào)錯(cuò)。

舉個(gè)栗子：

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);

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

(7)json驗(yàn)證工具：JSONLint

(8)舉個(gè)栗子:

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

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

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

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)化為了一個(gè)json對(duì)象data,然后就能夠以對(duì)象的形式處理數(shù)據(jù)

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

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

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

type：類型，“POST”或“GET”，默認(rèn)為“GET”。

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

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

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

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

error：是一個(gè)方法，請(qǐng)求失敗時(shí)調(diào)用此函數(shù)。傳入XMLHttpRequest對(duì)象。

更新時(shí)間:2018/2/13 23:36:53