今日推荐歌曲:
遇见
一、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.readyState
2、过程
- 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这个页面
}