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()函数可以把参数的内容当做代码处理而不是普通字符串xml文件 通过responseXML得到是xml对象json[i].userid, json[i].username
本例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属性访问节点内的数据