JavaScript初学必备 之 初识ajax

今日推荐歌曲：

遇见

一、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状态码有：

1. 200（OK）：表示请求成功并返回了预期的数据。
2. 400（Bad Request）：请求有语法错误，服务器无法理解。
3. 404（Not Found）：请求的资源未找到，通常是URL无效。
4. 500（Internal Server Error）：服务器内部错误，可能是服务器端代码问题。
5. 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这个页面
        }