使用AJAX技術局部刷新頁面

Asynchronous JavaScript and XML（異步的 JavaScript 和 XML），一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。

1、使用Ajax五部曲

1.1、新建Ajax對象

兼容性處理：

var oAjax;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
    oAjax=new XMLHttpRequest();
}else{// code for IE6, IE5
    oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}1.2、設置請求方式和請求地址

open(method，url，async)方法的參數解讀：method：請求的類型；GET 或 POST，url：文件在服務器上的位置，async：true（異步）或 false（同步）
請求方式為GET方法時，請求參數需要接在url后面：oAjax.open("GET","url?key1=value1 & key2=value2 & t="+(new Date().getTime()),true);
此處傳入一個隨機的參數t是為了防止低版本IE瀏覽器的緩存問題
請求方式為GET方法時，請求參數需要放在請求頭中，即下一步才需要處理請求參數：
oAjax.open("POST","url",true);
1.3、發送請求
請求方式為GET方法時，直接調用方法：oAjax.send();
請求方式為GET方法時，先設置請求頭，再調用並將請求參數傳入send()方法中
oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
oAjax.send("key1=value1 & key2=value2 & t="+(new Date().getTime())");
此處傳入一個隨機的參數t是為了防止低版本IE瀏覽器的緩存問題
1.4、監聽狀態的變化
Ajax對象的readyState屬性值表示請求處理的5個階段：
0: 請求未初始化
1: 服務器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應已就緒

if(oAjax.readyState === 4){// 判斷是否請求成功
　　if(oAjax.status >= 200 && oAjax.status < 300 || oAjax.status === 304){
　　　　// 處理返回的結果
　　}else{
　　　　console.log("沒有接收到服務器返回的數據");
　　}
}

1.5、處理返回的結果
當使用 async=false 時，不要編寫onreadystatechange函數，直接處理返回的結果
Ajax的responseText屬性以字符串形式存儲返回的文本數據（json數據包括在內），responseXML屬性返回的存儲XML數據，其返回的是一個xml的document對象，可以使用js中各種選擇節點的方法對該document對象進行查詢操作。

2、如何處理XML數據

2.1、XML文件格式了解

<?xml version="1.0" encoding="UTF-8" ?>
<root_node>
    <primary_node1>
        ······
    </primary_node1>
    <primary_node2>
        ······
    </primary_node2>
    ······
</root_node>

說明：xml文檔第一行標明xml版本號和文檔編碼，接着是一個根節點，根節點可隨意命名，其他子節點必須嵌套在根節點中
2.2、php處理xml文件
2.2.1、直接復制xml文件內容：

header("content-type:text/xml; charset=utf-8");    
header("Cache-control:no-cache,no-store,must-revalidate"); 
header("Pragma:no-cache"); 
header("Expires:-1"); 
//以上代碼設置文檔類型，字符編碼，防止緩存
echo file_get_contents("test.xml"); 

2.2.2、根據請求參數有選擇地復制xml文件內容：

$q=$_GET["q"];
$xmlDoc = new DOMDocument();                    //新建xml文檔對象
$xmlDoc->load("cd_catalog.xml");                //加載xml文檔
$x=$xmlDoc->getElementsByTagName('ARTIST');        //選擇相應標簽
for ($i=0; $i<=$x->length-1; $i++){            //遍歷選中節點
    if ($x->item($i)->nodeType==1){                //判斷節點類型
        if ($x->item($i)->childNodes->item(0)->nodeValue == $q){     //判斷內容是否等於請求參數
            $y=($x->item($i)->parentNode);        //取出符合條件的節點
        }
    }
}
$cd=($y->childNodes);
//打印符合條件的節點內容
for ($i=0;$i<$cd->length;$i++){ //Process only element nodes
    if ($cd->item($i)->nodeType==1){ 
        echo($cd->item($i)->nodeName);
        echo(": ");
        echo($cd->item($i)->childNodes->item(0)->nodeValue);
        echo("<br />");
    } 
}

2.3、js處理xml

var xmldoc=oAjax.responseXML;
var node=xmldoc.getElement.querySelector("selector");
var nodes=xmldoc.getElement.TagName("tagName");
var text=node.innerHTML();
···

3、處理json數據

無論返回的數據是什么類型，oAjax.responseText都可以將其以字符串形式存儲在其中，但如果返回的是xml類型的數據，推薦使用responseXML來處理，對於普通的文本數據，則直接取oAjax.responseText的值然后進行切割、拼接等處理即可。

3.1、json了解：json是javascript對象的一種特殊形式，其本質是一個字符串，在標准格式的json中，對象中的key值以字符串形式來存儲。

3.2、JSON字符串和js對象互轉

js對象轉換為JSON字符串，使用 JSON.stringify()方法： var jsonstr = JSON.stringify({a: 'Hello', b: 'World'});

JSON字符串轉換為js對象，使用 JSON.parse()方法： var jsonobj = JSON.parse('{"a": "Hello", "b": "World"}');

兼容問題：原生的js JSON.parse方法在低版本的IE中不支持，可以使用json2.js框架中的JSON.parse()方法，用法一致

注意：以上方法只能轉換標准格式的json字符串，(非)標准json字符串轉換為js對象： var jsonobj = eval('('+jsonstr+')');

3.3、php處理json文件 全部復制（不用設置header）： echo file_get_contents("json_test.json");

4、Ajax方法封裝

最簡單的get方法封裝

function get(url, callback) {
   var xhr = new XMLHttpRequest()
    // 當請求加載成功之后要調用指定的函數
   xhr.onload = function () {
        // 我現在需要得到這里的 oReq.responseText
        callback(oReq.responseText)
    }
    xhr.open("get", url, true)
    xhr.send()
}    

綜合封裝

傳參：請求類型、請求地址、請求數據、超時時間、請求成功回調函數、請求失敗回調函數

傳參靈活性：以對象方式傳入參數

封裝函數： 

function ajax(option) {
　　var str = objToStr(option.data); // 將對象轉換為字符串
　　var oAjax, timer;
　　if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
　　　　oAjax=new XMLHttpRequest();
　　}else{// code for IE6, IE5
　　　　oAjax=new ActiveXObject("Microsoft.XMLHTTP");
　　}
　　if(option.method.toLowerCase() === "get"){
　　　　oAjax.open(option.method, option.url+"?"+str, true);
　　　　oAjax.send();
　　}else{
　　　　oAjax.open(option.method, option.url,true);
　　　　oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
　　　　oAjax.send(str);
    }
    oAjax.onreadystatechange = function (ev2) {
　　　　if(oAjax.readyState === 4){
　　　　　　clearInterval(timer);
          if(oAjax.status >= 200 && oAjax.status < 300 || oAjax.status === 304){
　　　　　　　　option.success(oAjax);
          }else{
          　　option.error(oAjax);
　　　　　　}
　　　　}
   }
　　if(option.timeout){    // 判斷外界是否傳入了超時時間
　　　　timer = setInterval(function () {
　　 　 　　oAjax.abort();        //中斷請求
       　　clearInterval(timer);
    　　}, option.timeout);
    }
}

function objToStr(data) {        //對象轉字符串函數
    data = data || {};             // 如果沒有傳參, 為了添加隨機因子,必須自己創建一個對象
    data.t = new Date().getTime();
    var res = [];
    for(var key in data){
        // 在URL中是不可以出現中文的, 如果出現了中文需要轉碼，可以調用encodeURIComponent方法
        res.push(encodeURIComponent(key)+"="+encodeURIComponent(data[key])); 
    }
    return res.join("&"); 
}    

5、jQuery的ajax()方法

$.ajax({
    url: "test.php",
    type: "get",    //不區分大小寫
    data: "key1=value1 & key2=value2",
    success: function(msg){},
    error: function (xhr) {}
});