ajax介紹及使用

時間 2019-11-21

標籤 ajax 介紹使用欄目 Ajax 简体版

原文原文鏈接

1、什麼是ajax:（只刷新局部頁面的技術）

AJAX全稱爲「Asynchronous JavaScript and XML」（異步JavaScript和XML），是指一種建立交互式網頁應用的網頁開發技術。 Ajax並非一種全新的技術，而是整合了幾種現有的技術：javascript、xml、css。使用Ajax的好處是提供友好的用戶體驗，只刷新局部頁面，有效利用帶寬等。其特色是不刷新整個頁面。javascript

異步：發送請求後不等返回結果，繼續作別的事情，由回調函數處理結果css

JavaScript ：經過XMLHttpRequest對象向服務器發起請求，得到返回結果，更新頁面java

XML：封裝數據ajax

Css：用於美化頁面樣式。瀏覽器

2、用途

使用JavaScript從服務器獲取數據而沒必要刷新整個頁面緩存

3、怎樣使用Ajax

AJAX 遵循Request/Response 模式，這個框架的基本流程爲：對象初始化－＞發送請求－＞服務器接收－＞服務器返回－＞客戶端接收－＞修改客戶端頁面內容。這個過程是異步進行的。服務器

一、初始化對象併發出XMLHttpRequest 請求併發

functionCreateXmlHttpRequest(){
if(window.ActiveXObject){
xmlHttpRequest =newActiveXObject("Microsoft.XMLHTTP");
}elseif(window.XMLHttpRequest){
xmlHttpRequest =newXMLHttpRequest();
}
return xmlHttpRequest;
}
//爲了讓Javascript 能夠向服務器發送HTTP 請求，必須使用XMLHttpRequest 對象。各個瀏覽器對這個實例化過程的實現方式不一樣。IE 以ActiveX 控件的形式提供，而Mozilla 等瀏覽器則直接以XMLHttpRequest 類的形式提供

2、指定響應處理函數框架

指定當服務器返回信息時客戶端的處理方式，相應的處理函數名稱賦給XMLHttpRequest 對象的onreadystatechange屬性。異步

例如：xmlHttpRequest.onreadystatechange=haolejiaowo;

3、發出HTTP 請求

指定響應處理函數以後，就能夠向服務器發出HTTP 請求。這一步調用XMLHttpRequest 對象的open 和send 方法。

xmlHttpRequest.open("GET",url,true);

xmlHttpRequest.send(null);

open 的第一個參數是HTTP 請求的方法，爲Get、Post或者Head。

open 的第二個參數是目標URL。

open 的第三個參數只是指定在等待服務器返回信息的時間內是否繼續執行下面的代碼。若是爲True，則不會繼續執行，直到服務器返回信息。默認爲True。

4、處理服務器返回的信息

首先，它要檢查XMLHttpRequest 對象的readyState 值，判斷請求的當前狀態。服務器返回信息後，還須要判斷返回的HTTP 狀態碼，肯定返回的頁面沒有錯誤。

全部的狀態碼均可以在W3C 的官方網站上查到，http狀態碼

請求狀態：

0 -- 未初始化

1 -- 初始化

2 -- 發送請求

3 -- 開始接受結果

4 -- 接受結果完畢，信息已經返回，能夠開始處理

每次狀態改變都會調這個函數

HTML返回碼：

200 – OK，表明頁面正常

404 -- Not found（沒有找到資源）

500 -- 服務器端出錯

function haoLeJiaoWo(){
if( xmlHttpRequest.readyState ==4&& xmlHttpRequest.status ==200){
var b = xmlHttpRequest.responseText;
if(b=="true"){
alert("用戶名已經存在");
}else{
alert("用戶名可使用");
}
}
}

XMLHttpRequest 對成功返回的信息有兩種處理方式：

responseText 將傳回的信息當字符串使用；

responseXML 將傳回的信息當XML 文檔使用，能夠用DOM 處理。

總體的函數：

Function check(){
// 發送請求到服務器，判斷用戶名是否存在
// 請求字符串
var url ="?operate=doCheckUserExists&uname="+uname;
// 1. 建立XMLHttpRequest組件
xmlHttpRequest = createXmlHttpRequest();
// 2.設置回調函數
xmlHttpRequest.onreadystatechange = haoLeJiaoWo;(狀態改變時，將要調用的函數的名字)
// 3.初始化XMLHttpRequest組件
xmlHttpRequest.open("GET",url,true);
// 4.發送請求
xmlHttpRequest.send(null);
}

4、Ajax緩存

ajax緩存:當再次請求同一url時,瀏覽器會直接取出緩存裏的內容返回,而不向服務器端發送請求.這隻有在提交方式使用get時纔會發生,解決方法是在url後面加上一個參數來告訴瀏覽器這是一個新的請求,一般能夠用new Date()來生成時間戳。而post方式提交每次都會向服務器發送請求,不要考慮緩存.