Ajax

　　全稱:異步javascript和XML

使用jax的優點

• 不須要安裝插件支持
• 經過適當的AJAX應用能達到更好的客戶體驗
• 減輕服務器和帶寬的負擔

Ajax工做原理

在用戶與服務器之間加了一箇中間層,使用戶操做與服務器響應異步化

XMLHttpRequest對象實現異步交互

XMLHttpRequest對象

1.如何建立 XMLHttpRequest

      IE5,IE6 　　 

XMLHttpReq=new ActiveXObject("*****")

　　其餘

　   　原生XMLHttpRequest對象

XMLHttpReq=new XMLHttpRequest();

格式:

 

var xmlHttp//聲明一個保存XMLHttpRequest的變量

function  CreatXHR(){
    if(window.ActiveXObject){
      xmlHttp=new ActiveXObject("******");//IE5,IE6
    }else{
      xmlHttp=new XMLHttpRequest();//IE7+以及其餘瀏覽器
    }
{

2.建立好XHR對象後準備啓動一個請求

xhr.open(method,url,asynchronous);

method:設置請求類型:get和post請求

url:  請求地址

asynchronous:  默認爲true異步  false爲同步

 

3.設置請求頭

xhr.setRequestHeader(key,value);//能夠設置多個頭信息

4.發送Get請求

Get請求直接將輸入的數據放入到異步請求的URL地址中,而send方法不發送任何數據.

xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();

5.發送POST 請求

Post請求將數據統一放在send()方法中發送,請求地址沒有任何信息.

若是須要像 HTML 表單那樣 POST 數據，請使用 setRequestHeader() 來添加 HTTP 頭。而後在 send() 方法中規定您但願發送的數據

xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

數據很少採用Get 不然  Post

 

註冊回調事件處理函數

onreadystatechange 事件

當請求被髮送到服務器時，咱們須要執行一些基於響應的任務。

每當 readyState 改變時，就會觸發 onreadystatechange 事件。

readyState 屬性存有 XMLHttpRequest 的狀態信息。

 

 if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("***").innerHTML=xmlhttp.responseText;
    }

 

注意： onreadystatechange 事件被觸發 4 次（0 - 4）, 分別是： 0-一、1-二、2-三、3-4，對應着 readyState 的每一個變化

 

 處理服務端響應的內容

 如需得到來自服務器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性

 

responseText 屬性

若是來自服務器的響應並不是 XML，請使用 responseText 屬性。

responseText 屬性返回字符串形式的響應，所以您能夠這樣使用：

 

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

responseXML 屬性

若是來自服務器的響應是 XML，並且須要做爲 XML 對象進行解析，請使用 responseXML 屬性：

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
    txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;