代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js realize ajax</title>
</head>
<style>
#showhere {
width: 200px;
height: 100px;
margin-top: 5px;
border: 2px solid red;
}
</style>
<body>
<button id="btn" onclick="getText()">请求数据</button>
<div id="showhere"></div>
</body>
<script>
function getText() {
var xhr;
if (window.XMLHttpRequest) {
var xhr = new XMLHttpRequest();
} else {
var xhr = new ActiveXObject();
}
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var obj = JSON.parse(xhr.responseText);
document.getElementById('showhere').innerHTML = obj.test;
}
}
xhr.open('GET', './index.json', true);
xhr.send();
}
</script>
</html>本地模拟，没开服务器
Ajax工作原理
- 在用户和服务器之间加了一个中间层(Ajax引擎),使用户操作与服务器响应异步化
- 需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求
XMLHttpRequest对象的属性
- readystate 请求状态
- responseText 响应体的字符串
- responseXML 响应体的XML
- status 请求返回的HTTP状态码
- statusText HTTP响应状态文本
- onreadystatechange 当处理过程发生变化的时候执行下面的函数
XMLHttpRequest对象的方法
- open 请求初始化，此时并没有发送
- send 发送HTTP请求给服务器
实现Ajax的四个步骤
- 新建一个XMLHttpRequest对象。
- open方法表示初始化请求，此时并没有发送
- 定义数据返回后的回调函数，里面的代码在readystatechange值改变的时候执行
- 发送请求
readyState属性
- 0: XMLHttpRequest对象创建完成。————还没有调用open()方法
- 1: XMLHttpRequest对象初始化完成。————open() 方法已调用，但是 send()方法未调用。请求还没有被发送
- 2: 请求已经发送。———Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应
- 3: 服务器已经返回了数据（但是还没有被解析，可能只一段http报文）。————正在解析响应内容
- 4: 数据解析已经完成。————响应内容解析完成,可以在客户端调用了
onreadystatechange事件
每当readyState属性值改变时，就会触发 onreadystatechange 事件。——通过监听onreadystatechange事件,来判断请求的状态
发送请求
- send（）方法必须在open（）之后
- 在使用GET方式请求时无需填写参数
在使用POST方式时需要使用setRequestHeader()来添加http头，然后在 send() 方法中规定您希望发送的数据
3526
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
