今日推荐歌曲：
遇见
一、ajax介绍
1、学习前提
需要有以下基础：
- HTML和CSS基础
- JavaScript基础
2、什么是ajax？
（1）、全称
ajax === async Javascript and xml（ajax === 异步 JavaScript 和 XML），ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
- async : 异步
- xml ：闭合标签
- 但xml对JS的解析不友好，反而JSON数据格式处理很友好
（2）、特点
- ajax 不是新的编程语言，而是一种使用现有标准的新方法。
- ajax 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
- ajax 不需要任何浏览器插件，但需要用户允许 JavaScript 在浏览器上执行。
- XMLHttpRequest 只是实现 ajax 的一种方式。
（3）、优缺
优点：
- 不需要任何浏览器插件，原生JS就可以使用
- 用户体验好，不需要刷新页面就可以更新数据
- 减轻服务端和带宽的负担
缺点：
- 搜索引擎的支持度不够，因为数据都不在页面上，搜索引擎搜索不到
（4）、原理
ajax 相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验，原理如图：
二、ajax实现
tips：
- 在JS中有内置的构造函数来创建 ajax 对象
- 创建 ajax 对象后，我们就使用 ajax 对象的方法去发送请求和接收响应
1、步骤
（1）、创建 ajax对象 XHR
var xhr = new XMLHttpRequest() //new 一个对象（2）、配置open()
向 ajax 说明请求方式以及请求地址，默认异步
xhr.open(请求方式，请求地址，是否异步) //默认异步（3）、发送请求
xhr.send()（4）、接收数据
获取服务器端给客户端的响应数据
xhr.onload = function() {
// xhr.responseText 接收文本格式的响应数据
// xhr.responseXML 接收 xml 格式的响应数据
console.log(xhr.responseText);
}
2、完整流程
现模拟从后端接收一个文本文件1.txt：
//1、创建XHR new XMLHttpRequest (new一个对象)
var xhr = new XMLHttpRequest()
//2、配置 open(请求方式，请求地址，是否异步)
xhr.open("GET","http://localhost:63342/....../1.txt")
//3、发送出去
xhr.send()
//4、接收数据，注册一个事件
xhr.onload = function() {
console.log(xhr.responseText);
}
3、ajax状态码
1、解释
ajax 状态码——xhr.readyState，用来表示一个 ajax 请求的全部过程中的某一个状态。
xhr.readyState2、过程
- readyState === 0：表示未初始化完成，也就是open方法还没有执行
- readyState === 1：表示配置信息已经完成，也就是执行完open以后
- readyState === 2：表示send方法已经执行完成
- readyState === 3：表示正在解析响应内容
- readyState === 4：表示响应内容已经解析完毕，可以在客户端使用了
3、要点
这时发现，在一个 ajax 请求的全部过程中，只有当 readyState === 4 的时候，才可以正常使用服务端给我们的数据。
当AJAX请求完成时，通常会返回一个HTTP响应，包括状态码。常见的AJAX状态码有：
- 200（OK）：表示请求成功并返回了预期的数据。
- 400（Bad Request）：请求有语法错误，服务器无法理解。
- 404（Not Found）：请求的资源未找到，通常是URL无效。
- 500（Internal Server Error）：服务器内部错误，可能是服务器端代码问题。
- 200 OK with JSON：虽然状态码也是200，但服务器返回的是JSON而非纯文本，这是AJAX成功获取到数据的一种常见形式。
开发者通常会检查状态码来判断请求是否成功，并根据具体情况处理不同的状态。
4、readyStateChange事件
1、解释
在 ajax 中有一个事件，叫做readyStateChange事件，该事件专门用来监听 ajax 对象的 readyState 值改变的行为，也就是说，这个值一改变就会触发该事件，所以通过这个事件来监听 ajax 的 readyState 是不是到4了。
2、例子
var xhr = new XMLHttpRequest()
console.log(xhr)
xhr.open("GET","http://localhost:63342/.../1.txt")
xhr.send()
xhr.onreadystatechange = function (){
//每次 readyState 改变的时候就会触发该事件
//我们就在这里判断 readyState 的值是不是到4
//并且 http 的状态码是不是 200~299
if (xhr.readyState === 4 && xhr.status === 200){ //如果连接正确等于200，反之等于404
console.log("数据解析完成",xhr.responseText)//状态4的时候才能拿到数据
}else if (xhr.readyState ===4 && xhr.status ===404){ //如果连接错误
console.error("没找到这个页面")
location.href = "404.html" //跳转到404.html这个页面
}