Ajax實現異步請求

時間 2019-11-11

標籤 ajax 實現異步請求欄目 Ajax 简体版

原文原文鏈接

基本步驟：建立XMLHttpRequest對象-->配置發送參數-->執行發送-->處理響應php

ajax 通俗講有四個步驟

1.建立Ajax對象
2.連接到服務器
3.發送請求
4.接受返回值web

1.建立對象

　　var xhr = null;

if(window.XMLHttpRequest){

標準瀏覽器

xhr = new XMLHttpRequest();

}else{

非標準瀏覽器IE6/7/8

xhr = new ActiveXObject('Microsoft.XMLHTTP');

}

對於前面要在if中加window判斷是由於，瀏覽器會對未定義值的變量讀取時報錯，而對於window.variable不會報錯，而是報undefined.ajax

2.鏈接服務器

首先理解同步與異步
同步：事情一件一件來
異步：多件事情一塊兒作
而ajax就是爲了異步而生的,例如用戶請求表單後，提交到服務器的過程，用戶不用等待，能夠幹別的事情。。。。。。瀏覽器

　　 var type = 'get';

var myurl = './data.php';

var async = false;//第三個參數默認值就是true,表示異步；false表示同步

xhr.open(type,myurl,async);

3發送請求

//發送請求

　var param = null;

xhr.send(param);

4.接受請求

主要是判斷瀏覽器和服務器的交互進度和結果緩存

        xhr.onreadystatechange=function(){
            //oAjax.readyState瀏覽器和服務器的交互狀況
            if(oAjax.readyState == 4)//讀取完成
            {
                if(oAjax.status==200)//http狀態碼,用來判斷是否成功接受並返回文件
                {
                    alert(oAjax.status+" Success" +oAjax.responseText);//讀取響應文件裏面的TEXT
                }else{
                    alert(oAjax.status+" NotFound");
                }
            }
        };

A、處理響應中的status （xhr.status == 200 ）：

xhr.status是http協議的狀態碼：200成功、404沒有找到資源、500服務器報錯

ajax清除緩存：

    //將文件名設置隨系統時間改變而改變，這樣能夠避免瀏覽器緩存舊數據
    oAjax.open('GET','./a.txt?t='+new Date().getTime(),true);

B、XMLHttpRequest取得響應：

(1)responseText:得到字符串形式的響應數據服務器

(2)responseXML:得到xml形式的響應數據app

(3)status和statusText：以數字和文本形式返回Http轉態碼異步

(4)getAllResponseHeader():得到因此得響應報頭async

(5)getResponseHeader():查詢響應中的某個字段的值函數

(6)readState屬性

"0"請求未初始化，open還未調用

"1":服務器鏈接已經創建，open已調用

"2":請求已接收，也就是接收到頭信息了

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

"4":請求已經完成，且響應就緒，響應完成了

C、注意事項：

一、xhr的對象建立須要兼容處理

二、xhr.open的3個參數的做用

三、xhr.readyState狀態值要了解

四、經過xhr.responseText獲取服務器響應的數據

五、對於get請求來講，xhr.send()的參數固定寫成null

六、xhr.status和xhr.readyState的做用和區別

D、阻止表單提交的幾種方式：

1.return false;

2.e.preventDefault();

3. <input type="submit" value="提交" id="btn">把「submit」換成「button」

E、Ajax-get提交：

Aja的get提交數據是經過url傳遞參數，而且須要對參數進行編碼處理

xhr.send();方法參數固定爲null

2.配置發送函數
            encodeURI做用對get參數進行編碼處理，防止亂碼
            var param = encodeURI('?username='+uname+'&password='+pw);
            xhr.open('get','./data.php'+param);
3.發送
            xhr.send(null);

F、Ajax-post提交：

Ajax的post提交方式經過xhr.send();

函數傳遞的參數發送數據，而不是經過url傳遞數據

post提交方式必須設置請求頭

post提交的數據不須要進行編碼處理

2.配置發送函數
               xhr.open('post','./33data.php');
               //設置請求頭信息(對於post提交必須設置請求頭)
               xhr.setRequestHeader('Content-Type','application/x-www-form-urlencode');
3.發送
               var param = 'username='+uname+'&password='+pw;
               xhr.send(param);

G、post和get的區別：

get	post
2.配置發送函數 encodeURI做用對get參數進行編碼處理，防止亂碼 var param = encodeURI('?username='+uname+'&password='+pw); xhr.open('get','./data.php'+param); 3.發送 xhr.send(null);	2.配置發送函數 xhr.open('post','./33data.php'); 設置請求頭信息(對於post提交必須設置請求頭) xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 3.發送 var param = 'username='+uname+'&password='+pw; xhr.send(param);
一、Aja的get提交數據是經過url傳遞參數，而且須要對參數進行編碼處理二、xhr.send();方法參數固定爲null	一、Ajax的post提交方式經過xhr.send(); 函數傳遞的參數發送數據，而不是經過url傳遞數據二、post提交方式必須設置請求頭（ xhr.setRequestHeader('Content-Type','application/x-www-form-urlencode'); ）三、post提交的數據不須要進行編碼處理