码迷,mamicode.com
首页 > Web开发 > 详细

原生js 异步请求,responseXML解析

时间:2015-07-10 11:18:35      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:


异步更新原理:用XMLHTTP发送请求得到服务器端应答数据,在不重新载入整个页面的情况下,用js操作Dom最终更新页面
1.创建XMLHttp请求协议

 1 function createXMLHttpRequest(){
 2 var xmlHttp;
 3 if(window.ActiveXObject) { //IE浏览器
 4 //IE浏览器(将XMLHttpRequest对象作为ActiveX对象来创建)
 5 try{
 6 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
 7 }catch(e){
 8 try {
 9 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
10 }catch(e){}
11 }
12 }else{//非IE浏览器(将XMLHttpRequest对象作为本地浏览器对象来创建)
13 xmlHttp = new XMLHttpRequest();
14 }
15 if(xmlHttp == null){
16 alert("不能创建XMLHttpRequest对象");
17 return false;
18 }
19 return xmlHttp;
20 }

 

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=" + Math.random(),true);
xmlhttp.send();

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;

亲自试一试

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: 未找到页面

在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 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;
    }
  });
}
注意:xmlHttp.responseText返回时有可能是一组数据【josn..】,我们就需要将其转换为对象了。
var obj=eval("("+xmlHttp.responseText+")");

原生js 异步请求,responseXML解析

标签:

原文地址:http://www.cnblogs.com/WarBlog/p/4635062.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!