Ajax的操作流程

最新推荐文章于 2025-07-02 22:27:34 发布

DYH1564335

最新推荐文章于 2025-07-02 22:27:34 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/g1564335/article/details/84946160

本文详细介绍了Ajax技术，包括异步请求的基本原理，如何使用原生JS及jQuery进行GET和POST请求，展示了局部刷新和页面无刷新的效果，是前端开发者不可多得的学习资料。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 Ajax
异步请求
google的成名技术之一
后台提交请求
页面无刷新
局部刷新
2 js中的Ajax
1 发送Get请求

var xhr = new XMLHttpRequest();//构造ajax对象
xhr.open("GET", "/infos?name=admin", true);//打开连接
xhr.send();//发送请求
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {//4 代表服务器正确的给客户端响应,客户端也正确的收到了响应
        var ret = eval("(" + xhr.responseText + ")")
        console.log(ret.name);
    }
}1
2
3
4
5
6
7
8

2 发送POST请求

var xhr = new XMLHttpRequest();
xhr.open("POST", "/infos", true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//
xhr.send("name=admin123");
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {//4 代表响应成功
        var ret = eval("(" + xhr.responseText + ")")
        console.log(ret.name);
    }
}1
2
3
4
5
6
7
8
9

3 jquery的ajax
get请求

$.ajax({
    url: "/infos1?name=admin1234",
    type: "GET",//可以省略  默认为GET请求
    dataType: "json"
}).done(function () {
    console.log("成功...");
}).fail(function () {
    console.log("失败...");
});1
2
3
4
5
6
7
8

2 post请求

$.ajax({
    url: "/infos",
    type: "POST",//
    data: "name=admin222",
    dataType: "json"
}).done(function (data) {
    console.log(data);
}).fail(function () {
    console.log("失败...");
});1
2
3
4
5
6
7
8
9

以上是Ajax的代码如有错误请大佬指出

        </div>
					<link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-a47e74522c.css" rel="stylesheet">
            </div>