什么是Ajax

js ajax
js
发布日期:   2022-04-30
更新日期:   2026-05-06
文章字数:   1.8k
阅读时长:   7 分
阅读次数:  

Ajax的定义

官方是这么定义的：Ajax即Asynchronous Javascript And XML（异步JavaScript和 XML）。是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

Ajax 是一种用于创建快速动态网页的技术。

Ajax 通过在后台与服务器进行少量数据交换，使网页实现异步更新。这意味着可以在不重载整个页面的情况下，对网页的某些部分进行更新。

传统的网页（不使用 Ajax ）如果需要更新内容，必须重载整个页面。

一、原生JS中的Ajax

使用ajax发送数据的步骤

第一步：创建异步对象

var xhr;
// 现代浏览器中直接使用XMLHttpRequest
if (window.XMLHttpRequest) {
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xhr = new XMLHttpRequest();
} else {
    // IE6, IE5 浏览器执行代码
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

注：IE6、IE5等旧浏览器的兼容性处理已过时，现代前端开发中无需考虑。

第二步：设置 回调函数(可无)

xhr.onreadystatechange = callback;
function callback() {
    // 判断异步对象的状态
    if (xhr.readyState == 4) {
        // 判断交互是否成功
        if (xhr.status == 200) {
            // 获取服务器响应的数据
            var res = xhr.responseText;
            // 解析数据
            res = JSON.parse(res);
        }
    }
}

// 推荐使用this指向xhr对象
xhr.onreadystatechange = function () {
    // 判断异步对象的状态
    if (this.readyState == 4) {
        // 判断交互是否成功
        if (this.status == 200) {
            // 获取服务器响应的数据
            var res = this.responseText;
            // 解析数据
            res = JSON.parse(res);
        }
    }
};

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性 描述
onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status 200: “OK” 404: 未找到页面

第三步：设置 open(请求方式，url)方法与服务器建立连接

// get请求如果有参数就需要在url后面拼接参数
// post如果有参数，就在请求体中传递 xhr.open("get", "validate.php?username=" + name, true);
xhr.open("post", "validate.php", true);
xhr.send();

第四步：设置请求头 setRequestHeader()（GET 方式忽略此步骤）

// 1.get不需要设置
// 2.post需要设置请求头：Content-Type:application/x-www-form-urlencoded
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

第五步：设置 send() 服务器发送数据

// 1.get的参数在url拼接了，所以不需要在这个函数中设置
xhr.send(null);
// 2.post的参数在这个函数中设置(如果有参数)
xhr.send("name=hugh&age=18");
方法 描述
open(method,url,async) 配置请求。
method：HTTP 方法（GET、POST、PUT、DELETE 等）
url：请求地址（可以是 API 接口、静态文件、动态脚本等）
async：true（异步）或 false（同步），建议始终使用默认异步
send(string) 发送请求。
data：请求体数据，可选。数据类型可以是 string、FormData、Blob、ArrayBuffer、Document、URLSearchParams 等
GET/HEAD 请求不应传递 _data_，浏览器会忽略或抛出错误

一个成功的响应有两个条件：

  1. 服务器成功响应了 。
  2. 异步对象的响应状态为4(数据解析完毕可以使用了)。

ajax请求案例

get请求方式：

//1.创建xhr对象
var xhr;
if (window.XMLHttpRequest) {
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xhr = new XMLHttpRequest();
} else {
    // IE6, IE5 浏览器执行代码
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

// 定义变量
var name = "test";

//2.设置请求方式和URL
xhr.open("GET", "validate.php?username=" + encodeURIComponent(name));

//3.设置回调函数
xhr.onreadystatechange = function () {
    if (this.status == 200 && this.readyState == 4) {
        console.log(this.responseText);
        document.querySelector(".showmsg").innerHTML = this.responseText;
    }
};

//4.发送请求
xhr.send(null);

post请求方式：

const xhr = new XMLHttpRequest();
xhr.open("POST", "validate.php");
// 设置请求头
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

// 定义变量
var name = "test";

xhr.onreadystatechange = function () {
    if (this.status == 200 && this.readyState == 4) {
        console.log(this.responseText);
        document.querySelector(".showmsg").innerHTML = this.responseText;
    }
};
xhr.send("username=" + encodeURIComponent(name));

原生js简单封装ajax

function _ajax(obj) {
    let url = obj.url;
    let type = obj.type.toLowerCase(); //为了后续，发送方式一律改为小写
    let data = obj.data || {};
    let async = obj.async !== false; // 默认异步

    // 处理参数
    function processData(data) {
        let arr = [];
        for (let key in data) {
            arr.push(key + "=" + encodeURIComponent(data[key]));
        }
        return arr.join("&");
    }

    var xhr; //创建ajax对象
    if (window.XMLHttpRequest) {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xhr = new XMLHttpRequest();
    } else {
        // IE6, IE5 浏览器执行代码
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

    // 处理GET请求参数
    if (type === "get" && Object.keys(data).length > 0) {
        url += (url.includes("?") ? "&" : "?") + processData(data);
    }

    xhr.open(type, url, async);

    // 设置请求头（POST请求）
    if (type === "post") {
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    }

    // 发送请求
    xhr.send(type === "post" ? processData(data) : null);

    // 设置回调
    xhr.onreadystatechange = function () {
        // 判断异步对象的状态
        if (this.readyState == 4) {
            // 判断交互是否成功
            if (this.status == 200) {
                // 获取服务器响应的数据
                var res = this.responseText;
                // 解析数据
                try {
                    res = JSON.parse(res);
                } catch (e) {
                    // 非JSON格式数据
                }
                if (obj.success) {
                    obj.success(res);
                }
            } else {
                if (obj.error) {
                    obj.error(new Error("HTTP Error: " + this.status));
                }
            }
        }
    };
}

_ajax({
    url: "./friends.json", //请求地址
    type: "GET", //请求方式
    dataType: "jsonp",
    data: {
        name: "张三",
        age: 18,
    }, //传参
    async: true, //可选,同步或异步 true为异步,false为同步
    success: function (res) {
        //成功时的回调用函数
        console.log(res);
    },
    error: function (err) {
        //失败时的回调函数
        console.log(err);
    },
});

jquery中的ajax

//jquery ajax
$.ajax({
    type: "get", // get或者post
    url: "abc.php", // 请求的url地址
    data: {}, //请求的参数
    dataType: "json", //json写了jq会帮我们转换成数组或者对象 他已经用JSON.parse弄好了
    timeout: 3000, //3秒后提示错误
    beforeSend: function () {
        // 发送之前就会进入这个函数
        // return false 这个ajax就停止了不会发 如果没有return false 就会继续
    },
    success: function (data) {
        // 成功拿到结果放到这个函数 data就是拿到的结果
    },
    error: function () {
        //失败的函数
    },
    complete: function () {
        //不管成功还是失败 都会进这个函数
    },
});

// 常用
$.ajax({
    type: "get",
    url: "validate.php",
    data: {},
    dataType: "json",
    success: function (data) {},
});

二、现代 fetch API

在现代浏览器中，推荐使用fetch API来替代传统的XMLHttpRequest，它提供了更简洁、更强大的API：

// 定义变量
var name = "test";

// GET请求
fetch("validate.php?username=" + encodeURIComponent(name))
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error("Error:", error));

// POST请求
fetch("validate.php", {
    method: "POST",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
    },
    body: "username=" + encodeURIComponent(name),
})
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error("Error:", error));

// 使用async/await
async function fetchData() {
    try {
        const response = await fetch("validate.php", {
            method: "POST",
            headers: {
                "Content-Type": "application/x-www-form-urlencoded",
            },
            body: "username=" + encodeURIComponent(name),
        });
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Error:", error);
    }
}

三、现代网络请求方案

随着前端技术的发展，fetch API 已成为现代网络请求的主流方案。如需更高级的功能，可以考虑使用 axios 等库。

axios 示例

import axios from "axios";

axios
    .get("validate.php", {
        params: { username: name },
    })
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error("Error:", error);
    });

axios
    .post("validate.php", {
        username: name,
    })
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error("Error:", error);
    });

fetch API 的优点：

  • 使用 Promise，支持 async/await 语法
  • 更简洁的 API 设计
  • 内置 Response 对象，提供更多功能
  • 更好的错误处理机制
文章作者: 弈心
文章链接: https://blog.mingxuan.tech/2022/04/76.html
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 弈心 !
js ajax
赏
评论
  目录