前端基础进阶Ajax技术应用

Posted 2021-04-15 认知高地技术团队

1. Ajax是什么？

Ajax (Asynchronous javascript and XML) 是一种Web应用技术,可以借助客户端脚本(javascript)与服务端应用进行异步通讯，获取服务端数据以后,可以进行局部刷新。进而提高数据的响应和渲染速度。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页面。有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图等等。

2.AJAX是基于现有的Internet标准

AJAX是基于现有的Internet标准，并且联合使用它们：

• XMLHttpRequest 对象 (异步的与服务器交换数据)
• JavaScript/DOM (信息显示/交互)
• CSS (给数据定义样式)
• XML (作为转换数据的格式)

  AJAX应用程序与浏览器和平台无关的！

3.Ajax创建对象的步骤

（1）. 创建XMLHttpRequest异步对象

  
    
    
  

   
     
     
   var xhr;
   
     
     
   if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
   
     
     
    xhr = new XMLHttpRequest();
   
     
     
    }
   
     
     
   else { // code for IE6, IE5
   
     
     
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
   
     
     
           }
  
    
    
  

（2）. 设置请求方式和请求地址

open函数需要3个参数，分别是请求方式，请求地址，是否异步，不建议将第三个参数设为false（毕竟用ajax是为了就为了异步）

  
    
    
  

   
     
     
   xhr.open("get", "test.php", true);
  
    
    
  

（3）发送请求

简单的get请求只需要执行send函数即可，不需要参数（get的参数写在请求地址中）

  
    
    
  

   
     
     
   xhr.send();
  
    
    
  

如果使用post请求，我们需要事先设置请求头，再发送数据

  
    
    
  

   
     
     
   xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   
     
     
   xhr.send(str);
  
    
    
  

这里的str是要发送的数据，必须为字符串，而且格式符合 key=value ，多组数据用 & 隔开，例如

  
    
    
  

   
     
     
   str = "name=cheney&gender=secret";
  
    
    
  

（4）.监听状态变化

给xhr添加 onreadystatechange 事件监听状态变化，然后通过xhr.readyState判断响应状态。

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

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

只有响应码为4 才说明请求完成。 

（5）.处理返回结果

这里需要通过 xhr.status 判断响应类型，xhr.status 是此次http请求的响应码，当响应码为200到300之间或304（读取缓存）时，说明请求成功。

  
    
    
  

   
     
     
    xhr.onreadystatechange = function () {
   
     
     
   if (xhr.readyState === 4) {
   
     
     
   if (xhr.status >= 200 && xhr.status < 300 || xhr === 304) {
   
     
     
   console.log('请求成功');
   
     
     
    }
   
     
     
   else {
   
     
     
   console.log('请求失败');
   
     
     
    }
   
     
     
    }
   
     
     
           };
  
    
    
  

属性	补充
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
-	0: 请求未初始化
-	1: 服务器连接已建立

-	2: 请求已接收
-	3: 请求处理中
-	4: 请求已完成，且响应已就绪
status	200: “OK”      404: 未找到页面

（6）接收返回的数据

ajax是用来异步请求数据的，所以一般会有数据返回。

返回的数据一般有两种类型，即 xml 和 json 。

（1）如果服务端数据返回的是 xml， 例如如下的数据

  
    
    
  

   
     
     
   <person>
   
     
     
   <name>张三</name>
   
     
     
   <age>18</age>
   
     
     
   <sex>male</sex>
   
     
     
   </person>
  
    
    
  

那么我们在前端用 xhr.responseXML 接收，然后按照html的dom结构解析即可，例如 getElementsByTagName() 等函数都可以解析，这里就不赘述。

2）如果服务端数据返回的是 json， 例如如下的数据

  
    
    
  

   
     
     
   {"name":"张三","age":"18","sex":"male"}
  
    
    
  

实际json只是一个特殊格式的字符串，所以我们通过  xhr.responseText 接收，然后利用 JSON.parse() 解析。

obj = JSON.parse(xhr.responseText);

然后将获取到的数据渲染到页面上。

（3).设置超时中断

有时候由于服务端或网络问题导致请求时间过长，那么客户端不能一直等待，需要设置超时中断请求。

只需要在请求开始设置定时器，定时时间到就执行 xhr.abort(); 中断请求。

（4).设置时间戳

由于低版本浏览器在进行get请求时会认为同一url的返回结果相同，就不能实时返回服务端的结果，而是从缓存中取。所以一般在url中添加时间戳保证每次请求的URL都不同。

 以上7,8两步非必需，只是为了完善这个过程而添加的，可以根据自己需要选择。

4.原生Ajax请求的5个步骤

将Ajax请求的流程封装成方法

  
    
    
  

   
     
     
   //第一步，创建XMLHttpRequest对象
   
     
     
   var xmlHttp = new XMLHttpRequest();
   
     
     
   function CommentAll() {
   
     
     
    //第二步，注册回调函数
   
     
     
    xmlHttp.onreadystatechange =callback1;
   
     
     
    //{
   
     
     
    // if (xmlHttp.readyState == 4)
   
     
     
    // if (xmlHttp.status == 200) {
   
     
     
    // var responseText = xmlHttp.responseText;
   
     
     
   

   
     
     
    // }
   
     
     
    //}
   
     
     
    //第三步，配置请求信息，open(),get
   
     
     
    //get请求下参数加在url后，.ashx?methodName = GetAllComment&str1=str1&str2=str2
   
     
     
    xmlHttp.open("post", "/ashx/myzhuye/Detail.ashx?methodName=GetAllComment", true);
   
     
     
   

   
     
     
    //post请求下需要配置请求头信息
   
     
     
    //xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   
     
     
   

   
     
     
    //第四步，发送请求,post请求下，要传递的参数放这
   
     
     
    xmlHttp.send("methodName = GetAllComment&str1=str1&str2=str2");//"
   
     
     
   

   
     
     
   }
   
     
     
   //第五步，创建回调函数
   
     
     
   function callback1() {
   
     
     
    if (xmlHttp.readyState == 4)
   
     
     
    if (xmlHttp.status == 200) {
   
     
     
    //取得返回的数据
   
     
     
    var data = xmlHttp.responseText;
   
     
     
    //json字符串转为json格式
   
     
     
    data = eval(data);
   
     
     
    $.each(data,
   
     
     
    function(i, v) {
   
     
     
    alert(v);
   
     
     
    }); 
   
     
     
    }
   
     
     
   }
   
     
     
   

   
     
     
   

   
     
     
   

   
     
     
   //后台方法
   
     
     
    private void GetAllComment(HttpContext context)
   
     
     
    {
   
     
     
   

   
     
     
    //Params可以取得get与post方式传递过来的值。
   
     
     
    string methodName = context.Request.Params["methodName"];
   
     
     
   

   
     
     
    //QueryString只能取得get方式传递过来的值。
   
     
     
    string str1 = context.Request.Form["str1"];
   
     
     
   

   
     
     
    //取得httpRequest传来的值，包括get与post方式
   
     
     
    string str2 = context.Request["str2"];
   
     
     
   

   
     
     
    List<string> comments = new List<string>();
   
     
     
   

   
     
     
    comments.Add(methodName);
   
     
     
   

   
     
     
    comments.Add(str1);
   
     
     
   

   
     
     
    comments.Add(str2);
   
     
     
   

   
     
     
   

   
     
     
    //ajax接受的是json类型，需要把返回的数据转给json格式
   
     
     
    string commentsJson = new JavaScriptSerializer().Serialize(comments);
   
     
     
    context.Response.Write(commentsJson);
   
     
     
    }
  
    
    
  

技术编辑：徐斌