AJAX
Asynchronous JavaScript And XML.是一种创建交互式网页应用的的网页开发技术
Ajax 的优势: 通过异步模式,提升了用户体验。
优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用。
Ajax 引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载。
Ajax 的最大特点: 可以实现局部刷新,在不更新整个页面的前提下维护数据,提升用户体 验度。
- 浏览器内建XMLHttpRequest对象 (从Web浏览器请求数据)
- JavaScript 和 HTML DOM (显示或使用数据)
AJAX工作流程
1、页面中发生某个事件
2、由JavaScript创建XMLHttpRequest对象
3、XMLHttpRequest对象向web服务器发送请求
4、web服务器接收并处理请求
5、服务器将响应发送回网页
6、由 JavaScript 读取响应
7、由 JavaScript 执行正确的动作(比如更新页面)
创建XMLHttpRequest对象语法
variable = new XMLHttpRequest();
- XMLHttpRequest对象的属性
onreadystatechange 属性
通过 XMLHttpRequest 对象,您可以定义当请求接收到应答时所执行的函数。这个函数在onreadystatechange 属性中定义
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
responseText 属性以 JavaScript 字符串的形式返回服务器响应
document.getElementById("demo").innerHTML = xhttp.responseText;
- XMLHttpRequest对象的方法
如需向服务器发送请求,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:
xhttp.open("GET","ajax_info.txt",true); //异步为true 同步为false
xhttp.send
<!DOCTYPE html>
<html>
<body>
<h1>XMLHttpRequest 对象</h1>
<button type="button" onclick="loadDoc()">请求数据</button>
<p id="demo"></p>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "/demo/demo_get.asp", true);
xhttp.send();
}
</script>
</body>
</html>