Ajax之XMLHttpRequest对象

open(method,url,async);

规定请求的类型、URL 以及是否异步处理请求。

method:请求的类型;GET 或 POST

url:文件在服务器上的位置

async:true(异步)或 false(同步)

send(string)

将请求发送到服务器。

string:仅用于 POST 请求

GET请求

  <!DOCTYPE html><html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
   <div id="myDiv"></div>
   </body>
   <script>var xmlhttp;if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }else
 {// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
   {
       console.log(xmlhttp);
   document.getElementById("myDiv").innerHTML=xmlhttp.response;    /*
   如果您希望通过 GET 方法发送信息,请向 URL 添加信息:
   防止缓存可加上一个随机数之类的
   xmlhttp.open("GET","server.txt?t="+Math.random(),true);
   */
   }
 }
xmlhttp.open("GET","server.txt",true);
xmlhttp.send();    
</script>
</html>

POST请求

setRequestHeader(header,value)

向请求添加 HTTP 头。

header: 规定头的名称

value: 规定头的值

var xmlhttp;
if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }else
 {// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
xmlhttp.onreadystatechange=function()
 {  if (xmlhttp.readyState==4 && xmlhttp.status==200)
   {
   document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
   }
 }  //GET改为POST就行了xmlhttp.open("POST","/ajax/demo_post.asp",true);
/*
如果需要像 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");
*/
xmlhttp.send();

服务器响应

responseText 获得字符串形式的响应数据。

responseXML 获得 XML 形式的响应数据。

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
xmlDoc=xmlhttp.responseXML;txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
 {
 txt=txt + x[i].childNodes[0].nodeValue + "
";
 }
document.getElementById("myDiv").innerHTML=txt;

onreadystatechange 事件

onreadystatechange

存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成,且响应已就绪

status

200: “OK”

404: 未找到页面

xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
   {
   document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
   }
 }

使用 Callback 函数

优点就是可将获得数据传到AJax函数外面,使其他函数也可以调用数据

var xmlhttp;function loadXMLDoc(url,cfunc)//cfunc就是---calback函数
{if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }else
 {// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
   xmlhttp.onreadystatechange=cfunc;
   xmlhttp.open("GET",url,true);
   xmlhttp.send();
}function myFunction(){loadXMLDoc("/ajax/test1.txt",function()
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
   {
   document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
   }
 });
}

欢迎分享本文,转载请保留出处:前端ABC » Ajax之XMLHttpRequest对象

赞 (1)
分享到:更多 ()

发表评论 1

  1. 不错,顶一下回复