1.使用XMLHttpRequest实现Ajax
2019-08-26 本文已影响0人
Ringo_
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
window.onload = function() {
//1.获取a节点，为其添加onclick响应函数
document.getElementsByTagName("a")[0].onclick = function(){
//3.创建一个XMLHTTPRequest对象
var request = new XMLHttpRequest();
//4.准备发送请求的数据
var method = "GET";
var url = this.href;
//5.调用XMLHttpRequest对象的open方法
request.open(method, url);
//6.调用XMLHTTPRequest对象的send方法
request.send(null);
//7.为XMLHTTPRequest对象添加onreadystatechange响应函数
request.onreadystatechange = function() {
//8.判断响应是否完成 XMLHTTPRequest对象的readyState属性值为4
if(request.readyState == 4) {
//9.再判断响应是否可用 XMLHTTPRequest对象status属性值为200
if(request.status == 200 || request.status == 304) {
//10.打印响应结果
alert(request.responseText);
}
}
}
//2.取消a节点的默认行为
return false;
}
}
</script>
</head>
<body>
<a href="content/helloajax.txt">hello</a>
</body>
</html>
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
| 属性 | 描述 |
|---|---|
| open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。method：请求的类型；GET 或 POST；url：文件在服务器上的位置；async：true（异步）或 false（同步） |
| setRequestHeader(header,value) | 向请求添加 HTTP 头；header: 规定头的名称；value: 规定头的值 |
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化。1: 服务器连接已建立；2: 请求已接收；3: 请求处理中；4: 请求已完成，且响应已就绪 |
| status | 200: "OK"；404: 未找到页面 |
