一、Ajax的对象 XMLHttpRequest的方法
方法 | 描述 |
---|---|
abort() | 停止当前请求 |
getAllResponseHeaders() | 把 HTTP请求的所有响应首部作为健/值对返回 |
getResponseHdader(“header”) | 返回指定首部的串值 |
open(“method”,”url”) | 建立对服务器端调用。Method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL |
send(conten) | 向服务器发送请求 |
setRequestHeader(“header”,”value”) | 把制定首部设置为所提供的值。在设置任何首部之前必须先调用open() |
二、发送请求
setRequestHeader(header,value)
- 当浏览器向服务器请求页面时,它会伴随着这个请求发送一组首部信息。这些首部信息是一系列描述请求的元数据(metadata).首部信息用来声明一个请求是GET还是 POST。
- Ajax请求中,发送首部信息的工作可以由setRequestHeader完成
- 参数header :首部的名字;参数 value:首部的值
- 如果用POST请求向服务器发送数据,需要将”Content-type” 的首部设置为 “application/x-www-form-urlencoded”.它会告知服务器正在发送数据,并且数据已经符合URL编码来。
- 该方法必须在open()之后才能调用
三、接收响应
readyState
readyState属性表示Ajax请求的当前状态。它的值用数字代表。
- 0 代表未初始化,还没有调用open 方法
- 1 代表正在加载,open方法已经被调用,但 send方法还没有被调用
- 2 代表加载完毕。send方法已被调用,请求已经开始
- 3 代表交互中。服务器正在发送响应
-
4 代表完成。响应发送完毕
每次readyState值的改变,都会触发readystatechange事件。如果把onreadystatechange事件处理函数赋给一个函数,那么每次 readyState的值的改变都会引发该函数的执行。
readyState值的变化会因浏览器的不同而有所差异。但是,当请求结束的时候,每个浏览器都会把readyState的值统一设为4.实例代码呈现
<!doctype html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload=function(){ // 1、获取a节点,并为其添加onclick响应函数 document.getElementsByTagName("a")[0].onclick=function(){ // 3、创建一个XMLHttpRequest对象 var request=null; request= new XMLHttpRequest(); // 4、准备发送请求对数据:url // 增加时间戳起到禁用缓存对目的 var url= this.href+"?time="+new Date(); // var method="GET"; var method="POST"; // 5、调用XMLHttpRequest 对象对open方法 request.open(method,url); request.setRequestHeader("ContentType","application/x-www-form-urlencoded"); // 6、调用XMLHttpRequest对send方法 request.send("name='atguigu'"); // 7、为XMLHttpRequest 对象添加onreadystatechange响应函数 request.onreadystatechange=function(){ if(request.readyState==4){ if(request.status==200||request.status==304){ alert(request.responseText); } } } // 8、判断响应是否完成: XMLHttpRequest对象对readyState 属性值为4对时候 // 9、再判断响应是否可用:XMLHttpRequest对象对status属性值为200 // 10、打印响应结果:responseText // 2、取消a节点对默认行为 return false; } } </script> </head> <body> <a href="helloAjax.txt" >Ajax</a> </body> </html>