Ajax学习（1）

1.今天上课内容是有关Ajax的学习，学习的内容比较基础。

2.Ajax功能是可以更新局部网页，可以不用加载全部页面。方式有异步和同步两种，通过xhr.open(method,url,async);这个函数设置。注解一下，xhr是XMLHttpRequest对象的实例，method有两个值（“GET”|“POST”），async值有（“false”|“true”），这个值就是设置异步或同步，值为true就是异步，FALSE就是同步，一般建议采用异步。

3.接下来介绍整个XHR的操作过程：

（1）创建XMLHttpRequest对象

var xmlhttp;//创建XHR对象
 if(window.XMLHttpRequest){//codes for iE7+,firfox,chrome,opera,safari
     xmlhttp=new XMLHttpRequest();
 }
 else {//code for IE6,IE5
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }

（2）像服务器发送请求，响应，处理（以静态页面为例）

异步：

xmlhttp.onreadystatechange=function () {
    if(xmlhttp.readyState==4&&xmlhttp.status==200){
        var json=JSON.parse(xmlhttp.responseText);//XHR响应
            for (var i=0;i<json.length;i++){
                add(myTable2, json[i].userid, json[i].username);
            }
    }

}
xmlhttp.open("GET","json.html",true);
xmlhttp.send();//向服务器发送请求

同步：

xmlhttp.open("GET","json.html",true);
xmlhttp.send();//向服务器发送请求

var json= JSON. parse( xmlhttp. responseText); //XHR响应

            for (var i=0;i<json.length;i++){
                add(myTable2, json[i].userid, json[i].username);
            }

4.接下重点介绍我在实现一个案例遇到问题--主要是responseText/responseXML响应不同类型的文档如何解析

注意:XHR响应的属性只有responseText/responseXML也就是说根据文档格式来定除了.xml用responseXML其他都可以采用responseText

json文件，我们采用responseText,得到字符串后要转换成json格式，

本例json.html内容为

[
    {"userid":"1","username":"张三"},
    {"userid":"2","username":"李四"},
    {"userid":"4","username":"王五"}
]

方法一：

 var json=JSON.parse(xmlhttp.responseText);

 json[i].userid, json[i].username
方法二：
var json=eval("("+xmlhttp.responseText+")");//eval()函数可以把参数的内容当做代码处理而不是普通字符串
 json[i].userid, json[i].username

xml文件 通过responseXML得到是xml对象

本例xml.xml内容

<students>
    <student>
        <suerid>1</suerid>
        <username>张三</username>
    </student>
    <student>
        <suerid>2</suerid>
        <username>李四</username>
    </student>
    <student>
        <suerid>3</suerid>
        <username>王五</username>
    </student>
</students>

方法：

var xml= xmlhttp.responseXML;//获取xml对象
// alert(xmlhttp.responseXML);
 var useridAry=xml.getElementsByTagName("suerid");//获取标签数组注意是数组
 var usernameAry=xml.getElementsByTagName("username");
 for(var i=0;i<useridAry.length;i++){
     var userid=useridAry[i].innerHTML;//访问标签内的容
     var username=usernameAry[i].innerHTML;
     alert（userid，username);
 }

注意：容易遇到的问题，如果给定的文档不是xml格式而是html或者是其他则容易产生

responseXML=null的问题，所以这点要注意。
还有，json，和xml访问节点内容的方式也是不一样的，json访问和访问数组数据类似，而xml要用dom获取标签名然后得到标签数组，利用innerHTML属性访问节点内的数据