介绍Ajax
Ajax 概述
- Ajax 是 “Asynchronous JavaScript and XML” 的首字母缩写，即“异步 JavaScript 与 XML”。
- Ajax 是一种前端技术，基于 JavaScript 驱动，最初设计时采用 XML 数据格式。
- 它的主要作用是在不刷新整个页面的情况下，进行局部内容的更新，提高用户体验。
Ajax 的优势
- 避免整个页面刷新，提高响应速度和用户体验。
- 可以在同一个页面中动态加载和更新局部内容，如微博中的新闻板块或动态更新等。
应用场景示例
- 打开慕课网主页（www.imooc.com），观察页面中课程答疑部分的信息是通过 Ajax 技术动态加载的。
- 页面加载时，主体内容一次性加载完成，但某些数据（如课程答疑）是后续动态加载的。
- 移动端浏览时，课程列表在滚动时动态加载数据，且无需刷新整个页面，这是 Ajax 技术在手机端应用的典型案例。
创建XMLHttpRequest对象 发送Ajax请求与处理响应
1. 发送 Ajax 请求
创建 XMLHttpRequest 对象
- 通过
XMLHttpRequest对象来发送 Ajax 请求，这是 Ajax 技术的核心。
- 通过
使用
open方法创建请求- 使用
XMLHttpRequest.open(method, url)方法创建请求：method: 请求类型（GET 或 POST）。url: 请求的 URL 或 URI。
- 使用
使用
send方法发送请求- 通过
XMLHttpRequest.send()方法发送请求。
- 通过
2. 处理服务器响应
捕获请求状态变化
- 使用
onreadystatechange事件监听XMLHttpRequest对象的状态变化。
- 使用
处理响应状态
readyState: 表示请求的处理阶段，共有五个状态值：0: 请求未初始化。1: 服务器连接已建立。2: 请求已接收。3: 请求处理中。4: 请求已完成，响应已就绪。
status: 表示服务器返回的 HTTP 响应状态码，常见状态码：200: 请求成功。404: 资源未找到。
获取响应内容
- 当
readyState等于4且status等于200时，表示请求成功，可以通过responseText属性获取服务器返回的响应文本。
- 当
3. 完整案例
- 创建 XMLHttpRequest 对象。
- 使用
open方法创建 GET 请求。 - 使用
send方法发送请求。 - 使用
onreadystatechange事件处理响应，将服务器返回的 HTML 片段显示在页面上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="btnLoad" type="button" value="加载"/>
<div id="divContent"></div>
<script>
document.getElementById("btnLoad").onclick = function(){
//1. 创建XMLHttpRequest对象
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
console.log("XMLHttpRequest:",xmlhttp);
//2. 发送Ajax请求
xmlhttp.open("GET", "/content");
xmlhttp.send();
//3. 处理服务器响应
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
var t = xmlhttp.responseText;
console.log(t);
document.getElementById("divContent").innerHTML = document.getElementById("divContent").innerHTML + "<br/>" + t;
}
}
}
</script>
</body>
</html>