Ajax实战总结——用原生JavaScript代码封装自己的Ajax核心对象

前端之家收集整理的这篇文章主要介绍了Ajax实战总结——用原生JavaScript代码封装自己的Ajax核心对象前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言:

目前已有了很好的Ajax封装,例如:JQuery框架中的Ajax,那么为什么还要自己封装一下下呢?原因很简单,一是了解人家的封装过程,二是自己熟悉代码,三是更加深刻对Ajax核心对象的理解,以及使用Ajax异步更新的基本原理。体会和传统Web开发的异同

基础知识:

核心对象:

XMLHttpRequest对象:它是XML里DOM技术中的一个重要对象。它提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。可以同步或异步地返回 Web 服务器的响应,并且能够以文本或者一个 DOM 文档的形式返回内容。尽管名为 XMLHttpRequest,它并不限于和 XML 文档一起使用:它可以接收任何形式的文本文档。

常用属性

1、readyState:HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时,这个属性的值从 0 开始,直到接收到完整的 HTTP 响应,这个值增加到 4。readyState 的值不会递减,除非当一个请求在处理过程中的时候调用了 abort() 或 open() 方法。每次这个属性的值增加的时候,都会触发 onreadystatechange 事件句柄。

2、responseText:目前为止为服务器接收到的响应体(不包括头部),或者如果还没有接收到数据的话,就是空字符串。

3、responseXML:对请求的响应,解析为 XML 并作为DOM对象返回。

4、status:由服务器返回的http状态码,如 200 表示成功,而 404 表示 "Not Found" 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。

事件句柄:

onreadystatechange,每次 readyState 属性改变的时候调用的事件句柄函数。当 readyState 为 3 时,它也可能调用多次。

常用的方法

abort():取消当前响应,关闭连接并且结束任何未决的网络活动。这个方法把 XMLHttpRequest 对象重置为 readyState 为 0 的状态,并且取消所有未决的网络活动。例如,如果请求用了太长时间,而且响应不再必要的时候,可以调用这个方法

open():初始化 HTTP 请求参数,例如 URL 和 HTTP 方法,但是并不发送请求。

send():发送 HTTP 请求,使用传递给 open() 方法的参数,以及传递给该方法的可选请求体。

一些常见值的含义

readystate的五个状态:

状态 名称 描述
0 Uninitialized 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
1 Open open() 方法调用,但是 send() 方法调用。请求还没有被发送。
2 Sent Send() 方法调用,HTTP 请求已发送到 Web 服务器。未接收到响应。
3 Receiving 所有响应头部都已经接收到。响应体开始接收但未完成。
4 Loaded HTTP 响应已经完全接收。

status中:如 200 表示成功,而 404 表示 "Not Found" 错误

原理剖析:

简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。我们还是用两张对比图的形式来辅助咱们来理解吧。

传统的Web方式请求服务器数据图示:


Ajax方式的Web请求图示:


两者应用模式的对比图示:



自己用原生JS代码封装的简单Ajax:

<span style="font-family:KaiTi_GB2312;font-size:18px;">/* 
 * To change this license header,choose License Headers in Project Properties.
 * To change this template file,choose Tools | Templates
 * and open the template in the editor.
 */
 //创建xmlhttprequest对象
var MyXMLHttpRequest = function(){
    var xmlHttpRequest;
    
    if(window.XMLHttpRequest){//非IE,w3c标准下
        xmlHttpRequest = new XMLHttpRequest();
        if(xmlHttpRequest.overrideMimeType){
           xmlHttpRequest.overrideMimeType("text/xml"); 
        }
    }else if(window.ActiveXObject){//IE情况下
        var activeXName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]
        for(var i = 0; activeXName.length > i ; i++){
            try{
                xmlHttpRequest = new ActiveXObject(activeXName[i]);
                break;
            }catch(e){
                
            }      
        }
    }
    if(xmlHttpRequest == null || xmlHttpRequest ==undefined){
        alert("xmlHttpRequest对象创建失败!");
   }else{
       this.xmlhttp = xmlHttpRequest;
   }
    
}
/**
 * 用户发送请求的方法
 * @param {type} method : must be "POST" || "GET"
 * @param {type} url : "null"and "undefined" is not allow
 * @param {type} data : 
 * @param {type} callback :
 * @param {type} failback :
 * @returns {undefined} 
 * 
 */
MyXMLHttpRequest.prototype.send = function(method,url,data,callback,failback){
  
    if(this.xmlhttp != null && this.xmlhttp != undefined){
       //处理请求的方法 
       method = method.toUpperCase();
       if(method != "POST" && method != "GET"){
           alert("请求的方法,只能是POST或者GET");
       }
       //处理请求的URL地址
       if(url == null || url == undefined){
           alert("必须要有URL地址,否则找不到资源");
       }
       //定义临时变量替代 this.xmlhttp
       var tempXMLHttp = this.xmlhttp;
       //注册回调方法
       this.xmlhttp.onreadystatechange = function(){
          
           if(tempXMLHttp.readyState == 4){  
               if(tempXMLHttp.status == 200){
                   var responseText = tempXMLHttp.responseText;
                   var responseXML = tempXMLHttp.responseXML;
                   //服务器数据正确返回时,其回调函数是否存在,若存在则用该回调方法处理服务器返回的数据
                   if(callback == null || callback == undefined){
                       alert("没有设置处理数据正确返回的方法");
                       alert("返回的数据:" + responseText);
                   }else{
                       callback(responseText,responseXML);
                   }
                   
               }else{
                   //服务器数据返回失败时,其回调函数是否存在,若存在则用该回调方法处理服务器返回的错误数据
                   if(failback == null || failback == undefined){
                       alert("没有设置处理数据返回失败的方法");
                       alert("http的响应码:" + tempXMLHttp.status + "相应码的文本信息:" + tempXMLHttp.statusText);
                   }else{
                       failback(tempXMLHttp.status,tempXMLHttp.statusText);
                   }
               }
           }
       }

       this.xmlhttp.open(method,true)
       
       //当请求方法为POST的时候,设置请求头
       if(method == "POST"){
           this.xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
       }
       
       this.xmlhttp.send(data);
    }else{
        alert("XMLHttpRequest对象创建失败!");
    }
        
}
//在原型上注册一个abort函数来停止和服务器的交互
MyXMLHttpRequest.prototype.abort= function(){
    this.xmlhttp.abort();
}</span>

小结:

一切高大上的看似很难的技术,如果一层层分治的话,那也就都变得很简单了。正所谓大道至简!

原文链接:https://www.f2er.com/ajax/162455.html

猜你在找的Ajax相关文章