一、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>