一、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>
794
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
