Ajax 异步请求数据交互

最新推荐文章于 2024-04-17 17:01:56 发布

阿湫o

最新推荐文章于 2024-04-17 17:01:56 发布

阅读量662

点赞数

文章标签： ajax js php

本文链接：https://blog.csdn.net/qq_39927061/article/details/105224952

版权

Ajax 异步请求与数据交互

1、初始 Ajax

Ajax 是什么？

Asynchronous JavaScript And XML

异步的 JavaScript 和 XML

Web 开发的一种技术

是一种使用 JavaScript 请求 XML 数据的技术

异步发送和请求数据

使用异步的方式提交和请求数据，不需要重新刷新当前页面

目前 JSON 数据格式已经占据市场

目前 Ajax 技术主要用于请求 JSON 数据

Ajax 请求数据图解

1、客户端使用 Js 通过调用一个对象 XMLHttpRequest 来请求服务器
2、服务器返回 XML/JSON 的数据格式，数据返回到 HTML Response 中

XMLHttpRequest 对象

XMLHttpRequest 是一个对象类型的 API
在浏览器环境下使用
是 BOM 中的一个对象
用于客户端和服务端数据的传递和接收
用于请求 XML 数据（JSON，纯文本text）

其他类似技术 / 库

jQuery
Axios
Superagent
Fetch API
Prototype
Node HTTP

安装 XAMPP

XAMPP 是一个集成的服务器组件，它包含了 PHP、Apache、Mysql 等服务。
下载地址：XAMPP DownLoad

1、安装完成后，启动 Apache、Mysql、PHP 等服务；
2、在浏览器地址栏输入 http://localhost ，如果显示欢迎页面则说明服务已经开启；
3、 http://127.0.0.1/phpmyadmin/ 进入后台管理页面；
4、进入 XAMPP 安装目录下的 htdocs 文件夹，配置文件都在这个目录下；
5、在 htdocs 目录下新建自己的项目文件，就可以在服务器环境中运行了；
6、运行 html 文时，要使用 localhost 前缀，例如：http://localhost/ajaxsandbox/ajax4.html

2、Ajax 请求的两种方式

使用 Ajax 来请求数据时，需要创建一个 XMLHttpRequest() 对象，然后使用这个对象中的一些属性和方法来请求数据。

XMLHttpRequest 对象的属性和方法

// 点击一个 button 后拿到一个纯文本信息
document.getElementById("button").addEventListener("click", loadText);
function loadText() {
   
    // 创建 XMLHttpRequest 对象
    var xhr = new XMLHttpRequest();
    console.log(xhr);
}

运行上述代码，结果如下：

Ajax请求的两种方式

onload 事件
onreadystatechange 事件

Ajax 请求纯文本

1、通过 onload 方法请求：

<button id="button">请求纯文本</button>
<script>
// 点击一个 button 后拿到一个纯文本信息
document.getElementById("button").addEventListener("click", loadText);
function loadText() {
   
    // 创建 XMLHttpRequest 对象
    var xhr = new XMLHttpRequest();
    // console.log(xhr);  // 打印 XMLHttpRequest 对象

    // open(type, url, async) 
    // 参数1：请求的类型 "GET" 或 "POST"
    // 参数2：请求的目标地址 
    // 参数3：是否开启异步请求 true 或 false
    xhr.open("GET","sample.txt", true);

    // 两种方式请求 onload / onreadystatechange
    xhr.onload = function () {
   
        // 以文本的形式打印返回的内容
        console.log(this.responseText);
    }
    
    // 发送请求
    xhr.send();
}

2、通过 onreadystatechange 方法请求：

<button id="button">请求纯文本</button>
<br>
<div id="text"></div>

<script>
    // 点击一个 button 后拿到一个纯文本信息
    document.getElementById("button").addEventListener("click", loadText);
    var text = document.getElementById("text");
    function loadText() {
   
        // 创建 XMLHttpRequest 对象
        var xhr = new XMLHttpRequest();
        
        // open(type, url, async) 
        // 参数1：请求的类型 "GET" 或 "POST"
        // 参数2：请求的目标地址 
        // 参数3：是否开启异步请求 true 或 false
        xhr.open("GET","sample.txt", true);
        xhr.onreadystatechange = function () {
   
            // 以文本的形式打印返回的内容
            console.log(this.responseText);
        }
        // 发送请求
        xhr.send();
     }

3、XMLHttpRequest 对象中 onload 事件与 onreadystatechange 事件的区别

onload 和 onreadystatechange 两种方法都可以请求数据，不同之处在于状态码的不同，从而导致触发的时间不同。

readyState 是 XMLHttpRequest 对象的一个属性，当请求状态发生改变时，readyState 的值（状态码）也会发生改变：
readyState 状态码:

0 : 请求未初始化
1 : 服务器连接已建立
2 : 请求已接收
3 : 请求处理中
4 : 请求已完成，且响应已就绪

status 也是 XMLHttpRequest 对象的一个属性，其记录 HTTP 请求状态码：
HTTP 状态码（这里仅列举一部分）

200 - 服务器成功返回网页
404 - 请求的网页不存在
503 - 服务器暂时不可用
…

onreadystatechange

onreadystatechange 事件会在 this.readyState 状态码发生改变时触发

xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
   
    console.log(this.readyState);
}
// 2
// 3
// 4

onprogress 事件的触发条件是：当 readyState 状态码为 3 时。基于此设定，可以将一些加载动画放入 onprogress 事件函数中：

xhr.onprogress = function () {
   
    console.log(this.readyState);
}
// 3

onload

onload 事件会在 this.status 为 200 时触发

xhr.onload = function () {
   
    console.log(this.status);
}
// 200

注意：当触发 onload 事件时，readyState 状态码一定为 4；

基于以上请求状态码的不同，可以封装一个事件函数来完善 onreadystatechange 事件：

// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 请求信息
xhr.open("GET", "example.txt", true);
// 绑定 onreadystatechange 事件
xhr.onreadystatechange = function () {
   
    if(this.readyState === 4 && this.status === 200) {
   
        console.log(this.responseText);
    } else if (this.status === 404) {
   
        console