Ajax的原理和應用

標籤：非同步請求   xmlhttprequest   同步請求   ajax   

一、什麼是AJAX

    AJAX（Asynchronous JavaScript and XML）非同步 JavaScript 和 XML，通過與後端介面互動，實現頁面中局部重新整理。

二、AJAX原理

    AJAX是通過XMLHttpRequest（所有現代瀏覽器均支援 XMLHttpRequest 對象，IE5 和 IE6 使用 ActiveXObject）與伺服器互動，擷取資料後通過javascript操作DOM來顯示資料。

三、XMLHttpRequest對象

1、建立XMLHttpRequest對象

function createXHR(){    var xmHttp = null;    if(window.XMLHttpRequest){        xmlHttp = new window.XMLHttpRequest();    }else{        xmlHttp = new window.ActiveXObject(‘Microsoft.XMLHTTP‘);    }     return xmlHttp;}

2、向伺服器發送請求

向伺服器發送請求，要使用XMLHttpRequest的open和send方法

open()方法，規定請求的類型、URL、是否非同步請求

open(method,url,async)

mehtod：請求的類型（POST或GET）

url：請求的URL

anync：是否是非同步請求，true(非同步)、false(同步)，預設為非同步請求

send()方法，將請求發送到伺服器

send(string)

string：僅用於POST請求，發送請求所帶的參數

發送GET請求

var xmlHttp = createXHR();xmlHttp.onreadystatechange = function(){    if(xmlHttp.readyState == 4 && xmlHttp.status == 200){        var result = xmlHttp.responseText;        //對應的處理邏輯    }}xmlHttp.open(‘GET‘,‘test.php?aa=aa&bb=bb‘,true);xmlHttp.send();

發送POST請求

var xmlHttp = createXHR();xmlHttp.onreadystatechange = function(){    if(xmlHttp.readyState == 4 && xmlHttp.status == 200){        var result = xmlHttp.responseText;        //對應的處理邏輯    }}xmlHttp.open(‘POST‘,‘test.php‘,true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlHttp.send(‘aa=aa&bb=bb‘);

使用POST方式發送請求時，需要設定http頭資訊，通過send方法傳遞要發送的參數

當請求是非同步請求時 ，需要通過onreadystatechange事件註冊一些響應後的操作，如果是同步請求，只需要在send方法後直接調用xmlHttp.responseText，不需要註冊onreadystatechange

onreadystatechange：每當readyState發生改變時，都會觸發該事件

readyState：儲存XMLHttpRequest的狀態，從0到4發生變化

• 0: 請求未初始化

• 1: 伺服器串連已建立

• 2: 請求已接收

• 3: 請求處理中

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

status：從伺服器端返回的響應代碼，比如200（就緒），404（未找到）

responseText：從伺服器返回的字串資料

responseXML：從伺服器返回的XML資料，需要作為XML對象解析

四、完整執行個體

php代碼，test.php

<?php    $uname = $_GET(‘uname‘);        $age = $_GET(‘age‘);        $result = array(               ‘uname‘ => $uname,                ‘age‘ => $age        );        echo json_encode($result);?>

javascript代碼：

function createXHR(){    var xmHttp = null;    if(window.XMLHttpRequest){        xmlHttp = new window.XMLHttpRequest();    }else{        xmlHttp = new window.ActiveXObject(‘Microsoft.XMLHTTP‘);    }    return xmlHttp;}var xmlHttp = createXHR();xmlHttp.onreadystatechange = function(){    if(xmlHttp.readyState == 4 && xmlHttp.status == 200){        var result = xmlHttp.responseText;        alert(result);    }}xmlHttp.open(‘GET‘,‘test.php?uname=kaixin&age=16‘,true);xmlHttp.send();

    

本文出自 “我就是標準” 部落格，請務必保留此出處http://liumanwei.blog.51cto.com/3005291/1437981