使用AJAX技术局部刷新页面

使用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) {}
});