第18周 第1章Ajax基础知识
介绍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>