原生js 异步请求,responseXML解析
2015-07-10 10:34
603 查看
异步更新原理:用XMLHTTP发送请求得到服务器端应答数据,在不重新载入整个页面的情况下,用js操作Dom最终更新页面
1.创建XMLHttp请求协议
在上面的例子中,您可能得到的是缓存的结果。
为了避免这种情况,请向 URL 添加一个唯一的 ID:
xmlhttp.send();[/code]
亲自试一试
如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:
//xmlhttp.readyState==4请求完成,0=未初始化;1=正在加载;2=已加载;3=交互中;4=完成
//xmlhttp.status==200请求状态,200为正常返回。
responseText 属性返回字符串形式的响应,因此您可以这样使用:
亲自试一试
请求 books.xml 文件,并解析响应:
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性:
在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时,表示响应已就绪:
亲自试一试
注释:onreadystatechange 事件被触发 4 次,对应着 readyState 的每个变化。
如果您的网站上存在多个 AJAX 任务,那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同):
1.创建XMLHttp请求协议
function createXMLHttpRequest(){ var xmlHttp; if(window.ActiveXObject) { //IE浏览器 //IE浏览器(将XMLHttpRequest对象作为ActiveX对象来创建) try{ xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){} } }else{//非IE浏览器(将XMLHttpRequest对象作为本地浏览器对象来创建) xmlHttp = new XMLHttpRequest(); } if(xmlHttp == null){ alert("不能创建XMLHttpRequest对象"); return false; } return xmlHttp; }
AJAX - 向服务器发送请求
如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:xmlhttp.open("GET","test1.txt",true); xmlhttp.send();
GET 请求
一个简单的 GET 请求:xmlhttp.open("GET","demo_get.asp",true); xmlhttp.send();
在上面的例子中,您可能得到的是缓存的结果。
为了避免这种情况,请向 URL 添加一个唯一的 ID:
xmlhttp.open("GET","demo_get.asp?t=" + [code]Math.random(),true);
xmlhttp.send();[/code]
POST 请求
一个简单 POST 请求:xmlhttp.open("POST","demo_post.asp",true); xmlhttp.send();
亲自试一试
如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:
xmlhttp.open("POST","ajax_test.asp",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Bill&lname=Gates");
Async = true
当使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数://xmlhttp.readyState==4请求完成,0=未初始化;1=正在加载;2=已加载;3=交互中;4=完成
//xmlhttp.status==200请求状态,200为正常返回。
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }xmlhttp.open("GET","test1.txt",true); xmlhttp.send();
AJAX - 服务器响应
服务器响应
如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。属性 | 描述 |
---|---|
responseText | 获得字符串形式的响应数据。 |
responseXML | 获得 XML 形式的响应数据。 |
responseText 属性
如果来自服务器的响应并非 XML,请使用 responseText 属性。responseText 属性返回字符串形式的响应,因此您可以这样使用:
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
注意:xmlHttp.responseText返回时有可能是一组数据【josn..】,我们就需要将其转换为对象了。 var obj=eval("("+xmlHttp.responseText+")");
亲自试一试
responseXML 属性
如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性:请求 books.xml 文件,并解析响应:
xmlDoc=xmlhttp.responseXML; txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br />"; } document.getElementById("myDiv").innerHTML=txt;
AJAX - onreadystatechange 事件
onreadystatechange 事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性:
属性 | 描述 |
---|---|
onreadystatechange | 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 |
readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成,且响应已就绪 |
status | 200: "OK" 404: 未找到页面 |
当 readyState 等于 4 且状态为 200 时,表示响应已就绪:
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }
亲自试一试
注释:onreadystatechange 事件被触发 4 次,对应着 readyState 的每个变化。
使用 Callback 函数
callback 函数是一种以参数形式传递给另一个函数的函数。如果您的网站上存在多个 AJAX 任务,那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同):
function myFunction() { loadXMLDoc("ajax_info.txt",function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }); }
相关文章推荐
- 移动设备、手机浏览器Javascript滑动事件代码
- JSP内置对象与servlet对应关系
- 不要使用SBJSON(json-framework)
- js 网页各种定位
- JavaScript数据类型转换
- JSVM代码阅读笔记
- JavaScript中的execCommand()命令详解及实例展示
- JSVM中配置文件介绍以及如何配出各种可分级
- JSP自定义标签开发入门
- MyEclipse/Eclipse 修改jsp XML java HTML 每行代码长度限制
- Servlet以及jsp异常的处理
- JSP四种注释方法及相关注意事项
- 2015.7.10js-07(简单时间)
- json串的解析格式
- js中判断json是否为空
- JavaScript进阶之路——认识和使用Promise,重构你的Js代码
- JSPatch实现原理详解:让JS调用/替换任意OC方法
- JSTL标签 参考手册
- JavaScript声明变量名的语法规则
- 完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码