Ajax的基本使用

十八只兔

已于 2023-03-22 10:17:33 修改

阅读量72

点赞数

分类专栏：前后端数据交互文章标签： ajax javascript 前端

于 2023-03-22 10:12:52 首次发布

原文链接：https://www.imooc.com

版权

前后端数据交互专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Ajax简介

实际开发中，数据一般不是前台写死的，而是从后端请求的，Ajax就可以解决前端如何向后台请求数据的问题。
Ajax是异步JavaScript和XML的简写。简单来说，Ajax就是浏览器和服务器之间的一种异步通信方式。
异步：即浏览器可以异步地向服务器发送请求。
在等待响应的过程中，不会阻塞当前页面，浏览器可以做自己的事情。直到成功获取响应后，浏览器才开始处理响应数据。

Ajax开发环境搭建

Ajax需要服务器环境，非服务器环境下，很多浏览器无法正常使用Ajax

代码编辑器：Visual Studio Code
插件：LIve Server
该插件可以为Ajax的使用提供一个服务器环境

进行插件的下载即可

Ajax使用步骤

step1:创建xhr对象

使用XMLHttpRequest构造函数来创建xhr对象

// 创建xhr对象
const xhr= new XMLHttpRequest();

step2:准备发送请求

伪代码：

// 准备发送请求
 xhr.open('HTTP方法GET、POST、PUT、DELETE选一个','地址URL',true)

注意：
（1）地址URL：可以是远程请求也可以是本地请求
（2）true：表示使用异步，false即使用同步
（3）调用open并不是真正发送请求，而是做好发送请求前的准备工作

step3:正式发送请求

调用send()来正式发送请求
send的参数是通过请求体携带的数据

// 调用send()正式发送请求
xhr.send();

step4:监听事件，处理响应

获取到响应后，会触发xhr对象的readystatechange事件，可以在该事件中对响应进行处理
readystatechange事件可以监听readyState这个状态的变化，我们一般只关注完成状态，即readyState的取值为4的时候。

// 监听事件，处理响应
xhr.onreadystatechange =()=>{	
    // 判断数据是否准备好
    if(xhr.readyState !==4) rerurn;
}

若readyState不为4，说明数据还没有准备好，此时我们不返回任何东西。

HTTP CODE:
（1）获取到响应后，响应的内容会自动填充xhr对象的属性
（2）而readyState的取值为4时，仅仅表示数据在传输的过程中没有问题。不代表服务器端或者请求没有问题，因此还需要判断状态码。
（3）xhr.status : 表示状态码
（4）xhr.statusText：表示状态码的说明；比如HTTP状态码为 200说明OK; 404表示Not Found
(5)由于兼容性的原因，此步骤最好放在open步骤即step2准备发送请求之前
举例：

// 监听事件，处理响应
xhr.onreadystatechange =()=>{	
    // 一般只关注完成状态
    if(xhr.readyState !==4) rerurn;
    // 获取到响应后，响应的内容会自动填充 xhr 对象的属性
    if ((xhrstatus >= 200) & (xhr.status < 300)||xhr.status === 304){		
        // 获取数据的字符串形式
        console.log(xhr.responseText);
	}	
}

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>

    <script>

        // 创建xhr对象
        const xhr= new XMLHttpRequest();

        const url= 'https://www.imooc.com/api/http/search/suggest?words=js';

        // 监听事件，处理响应
        xhr.onreadystatechange =()=>{

            // 不等于4，说明数据还没准备好
            if(xhr.readyState !==4){
                return;
            } 

            // 根据HTTP CODE 判断是否已经成功读取数据
            if ((xhr.status >= 200 && xhr.status < 300) ||xhr.status === 304){
                console.log(xhr.responseText);  // 获取数据的字符串形式
                console.log(typeof xhr.responseText);
            }
            
        };

        // 准备发送请求
        xhr.open('GET',url,true);

        // 调用send()正式发送请求
        xhr.send(null);

    </script>
    
</body>
</html>