您的位置 >>> 星想互聯 >>> 課堂教學 >>> 試卷成績
ajax入門
點擊數:244  發布時間2020-03-23 17:08:53

Ajax 全稱是 asynchronous javascript and xml,并不是新的編程語言,可以說是已有技術的組合,主要用來實現客戶端與服務器端的異步通信效果,實現頁面的局部刷新,從而創建快速動態網頁的技術。


l Ajax過程

- 創建xhrRequest對象,也就是創建一個異步調用對象

- 創建一個新的HTTP請求,并指定其請求的方法、URL及驗證信息

- 設置響應 HTTP 請求狀態變化的函數

- 發送 HTTP 請求

- 獲取異步調用返回的數據

- 使用 JavaScript DOM 實現局部刷新


l 創建xhrRequest 對象

xhrRequest 用于在后臺與服務器交換數據。這意味著可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新。

在使用ajax之前 ,首先要通過xhrRequest構造函數創建ajax對象

創建 xhrRequest 對象的語法:

xhr=new xhrRequest();


老版本的 Internet Explorer IE5 IE6)使用 ActiveX 對象:

xhr=new ActiveXObject("Microsoft.xhr");


l Ajax向服務器發送請求:

Ajax對象創建完成后,就可以向服務器發送請求,我們使用 xhrRequest 對象的 open() send() 方法:

GET 請求:

xhr.open("GET","show.php?fname=Bill&lname=Gates",true);

xhr.send();


POST 請求:

xhr.open("POST","show.php",true);

xhr.send();


POST 表單請求:

如果需要像 HTML 表單那樣 POST 數據,請使用 setRequestHeader() 來添加 HTTP 頭。然后在 send() 方法中規定您希望發送的數據:

xhr.open("POST","show.php",true);

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xhr.send("fname=Bill&lname=Gates");


l 處理務器返回的信息:

Ajax向服務器發送請求后,會等待服務器返回響應信息,然后對響應結果進行處理,下面將對Ajax如何處理服務器返回的信息進行詳細分析:

① readyState屬性

readyState屬性用于獲取當前Ajax狀態,從 0 4有五種形式。

0: 請求未初始化

1: 服務器連接已建立

2: 請求已接收

3: 請求處理中

4: 請求已完成,且響應已就緒


② onreadystatechange 事件

onreadystatechange 事件用于感知readyState屬性狀態的改變,每當 readyState 屬性改變時,就會調用該函數。下面是一個例子:



③ status屬性

status屬性用于返回當前請求的http狀態碼,值為數值類型,如,當請求 成功時,狀態碼為200;


④ 服務器響應

當請求成功且數據接收完成時,可使用Ajax對象提供的 responseText responseXML 屬性得到來自服 務器的響應。如:

document.getElementById("myDiv").innerHTML=xhr.responseText;


【案例】AJAX請求

下面是一個完整的AJAX請求的案例:

<script>

    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {


        }

    };

    xhr.open('GET', 'show.php');

    xhr.send();

</script>


來源:咸寧網站建設
【上一篇】ajax請求頭設置
【下一篇】laravel 服務容器的用法
日本高清成 人,A级高清毛片av无码,欧美成 人 免费在线播放-首页 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>