ajax请求的四个步骤

最新推荐文章于 2021-12-06 18:58:32 发布

原创最新推荐文章于 2021-12-06 18:58:32 发布 · 330 阅读

4 ·

CC 4.0 BY-SA版权

本文深入讲解了AJAX（异步JavaScript和XML）技术，包括其工作原理、应用场景以及如何实现无刷新读取数据。详细介绍了AJAX请求的四个步骤：创建XMLHttpRequest对象、连接服务器、发送请求和接收返回数据。

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

什么是ajax：

异步javascript和XML。
无刷新读取数据。无需加载整个页面的情况下，刷新页面某一部分。
常用的地方：用户注册和聊天室。

同步（Sync）: 发出一个功能调用时，在没有得到结果之前，该调用就不返回或继续执行后续操作。
 异步（Async）:异步与同步相对，当一个异步过程调用发出后，调用者在没有得到结果之前，就可以继续执行后续操作。当这个调用完成后，一般通过状态、通知和回调来通知调用者。对于异步调用，调用的返回并不受调用者控制。

ajax请求的步骤

1.创建XMLHttpRequest(创建异步对象)

不同浏览器使用的异步调用对象也有所不同，在IE浏览器中异步调用使用的是XMLHTTP组件中的XMLHttpRequest对象，而在Firefox浏览器中则直接使用XMLHttpRequest组件。

   var xmlHttp = null;
    if(window.XMLHttpRequest){
        xmlHttp = new XMLHttpRequest();//ie6及以下不兼容，针对主流浏览器
    }else{                             // 针对ie5, ie6
        xmlHttp = new ActiveXObject("Microsoft,XMLHTTP");
    }

不同浏览器创建异步对象兼容处理

 function createXMLHttpRequest(){
 3         var request = false;
 4         //一般先判断非IE浏览器
 5         //window对象中有XMLHttpRequest存在就是非IE，包括（IE7，IE8）
 6         if(window.XMLHttpRequest){
 7             request=new XMLHttpRequest();//非IE以及IE7，IE8浏览器
 8             if(request.overrideMimeType){
 9                 request.overrideMimeType("text/xml");//重置mime类型
10             }
11         //window对象中有ActiveXObject属性存在就是IE浏览器的低版本
12     }else if(window.ActiveXObject){
13         var versions = ['Microsoft.XMLHTTP',
14                     'MSXML.XMLHTTP',
15                     'Msxml2.XMLHTTP.7.0',
16                     'Msxml2.XMLHTTP.6.0',
17                     'Msxml2.XMLHTTP.5.0', 
18                     'Msxml2.XMLHTTP.4.0', 
19                     'MSXML2.XMLHTTP.3.0', 
20                     'MSXML2.XMLHTTP'];//各种IE浏览器创建Ajax对象时传递的参数
21               for(var i=0; i<versions.length; i++){
22                     try{
23                         request=new ActiveXObject(versions[i]);//各个IE浏览器版本的参数不同
24                         if(request){
25                             return request;
26                         }
27                     }catch(e){
28                         request=false;
29                     }
30                }
31         }
32          return request;
33     }
34 // 注意：必须把创建ajax对象的代码放在show函数里，确保每次点击的时候都创建一个新的ajax对象。
35 var ajax = null;
36 function show(){
37    ajax = createXMLHttpRequest();
38    alert(ajax);
39 }

2.连接服务器

 xmlHttp.open('GET',url,true);  //xmlhttp.open(method,url,async)
 method 包含 get 和 post两种方法

url主要是文件或资源的路径，async参数为true(代表异步)或者false（代表同步）

3.向服务器端发送请求

 xmlHttp.send();

4.接受服务器的返回

 xmlHttp.onreadystatechange = function(){
        if(xmlHttp.readyState == 4){   //判断交互是否成功
            if(xmlHttp.status == 200){    //获取服务器返回的数据   获取纯文本数据
                //alert('成功：'+xmlHttp.responseText);
            }else{
                //alert('失败');
            }
        }
}