Ajax异步请求

最新推荐文章于 2025-06-14 20:41:11 发布

原创最新推荐文章于 2025-06-14 20:41:11 发布 · 541 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #java #js #http

web开发专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了Ajax技术的概念及其在网页开发中的应用。通过讲解Ajax的工作原理、实现方式及具体案例，帮助读者理解如何利用Ajax实现页面的异步更新，提高用户体验。

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

Ajax

Ajax概念

Ajax(Asynchronous JavaScript and XML):异步JavaScript和XML.

作用

使用Ajax,可以无刷新的状态更新页面,实现异步提交页面,提升用户体验.

本质

利用浏览器提供的一个特殊对象(XMLHttpRequest)异步的向服务器发送请求,服务器返回数据,浏览器可以无刷新的提供返回到页面,不会打断用户操作.

同步和异步区别

案例:在进行注册学生信息时,把学生的信息(学号,姓名,地址,生日…)填写完毕后准备提交,和数据库连接时,发现填写的学号存在,服务器向客户端进行响应时,不能提交该次数据,此时的同步和异步请求的作用就体现出来了

同步:会刷新整个页面,填写的数据不会保留.

异步:不会刷新整个页面,填写的数据就会保留.

同步

以前与服务器交互的方式是同步的,当客户端与服务器交互时,客户端不能进行其他操作,只能等待服务器端的响应,会刷新页面.

异步

当客户端正在进行正常操作时,可以同时与服务器进行交互,服务器向客户端响应信息,将信息更新到网页局部,真个过程页面不会刷新

实现方式

原生的js实现方式

创建XMLHttpRequest对象:发送请求到服务器并返回获得结果

JavaScript对象XMLHttpRequest是整个Ajax技术的核心,提供了异步发送的请求的能力

常用方法:

方法名	说明
open(method,URL,async)	建立与服务器的连接 method参数:指定请求Http的方法,比如GET或POST URL参数:指定请求的地址 async参数指定是否使用异步请求,其值为true或false
send(content)	发送请求指定的参数
setRequestHeader	设置请求头信息

常用属性:

onreadystatechange:事件,指定回调函数

readyState:XMLHttpRequest的状态信息

status:Http的状态码

responseText:获得响应的文本内容

就绪状态码	说明
0	XMLHttpRequest对象没有完成初始化
1	XMLHttpRequest对象开始发送请求
2	XMLHttpRequest对象的请求发送完成
3	XMLHttpRequest对象开始读取响应,还没有结束
4	XMLHttpRequest对象读取响应结束

状态码	说明
200	服务器响应正常
400	无法找到请求资源
403	没有访问权限
404	访问的资源不存在
500	服务器内部错误

GET方式

 var httpObj  = new XMLHttpRequest();
            httpObj.open("get","${path}/Ajax1?account="+account,true);
            httpObj.send();
            httpObj.onreadystatechange=function (){
               // alert(httpObj.responseText);
                if (httpObj.readyState==4&&httpObj.status==200){
                    document.getElementById("idea").innerText=httpObj.responseText;
                }
            }

post方式

var httpObj = new XMLHttpRequest();
          httpObj.open("post","${path}/Ajax2",true);
          httpObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
          httpObj.send("account="+account);
          httpObj.onreadystatechange = function (){
              if (httpObj.readyState==4&&httpObj.status==200){
                  document.getElementById("idea").innerText=httpObj.responseText;
              }
          }

Jquery实现方式

官方API代码

$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
});

实现案列代码

 $.ajax({url:"${path}/student",
                type:"post",
                data:{num:num,mark:"checkNum"},
                async:true,
                success:function (res){
                    if (res==0){
                        $("#idea").html("√");
                    }else{
                        $("#idea").html("学号已存在");
                    }
                }
            })