JavaScript之Ajax Util-CSDN博客

　　
　　ajax（即：Asynchronous JavaScript and XML（异步的 JavaScript 和 XML））经常在用，却经常忽略了底层的实现机制，今日写个小工具，大家也可拿去使用，如果写博客时需要引用时，请显著地注明出处，以尊重劳动成果，谢谢~

　　声明：本文仅讲述关于：JavaScript的ajax工具类设计、ajax规范设计者开放了哪些接口、以及ajax使用Demo。

零、推荐文献

　　[1] 轻量级AJAX库-搜狗实验室ajax.js

　　[2] 跨域问题小结

一、Chrome控制台网络调试小工具[方便、快捷、易用]

var xml = new XMLHttpRequest();
xml.withCredentials = true; // 开启Cookie，启用会话机制
var url = "http://10.66.1.1/abc.jsp";      
xml.open('POST', url, true);
xml.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xml.send("score=5&abc=6");

　　But，注意一个问题：不同的ajax请求对象，如何保持会话Session/Cookie的问题　

　　如果ajax对象不主动设置xml.withCredentials=true(携带Cookie)，则Chrome控制台每new XMLHttpRequest()一次ajax请求对象，就是新建一次会话

二、Ajax Util工具类设计

　　文末处，附属个人的一些笔记的截图(确实值得一阅)。如有不妥之处，还请大家指正，共同进步~

/**
 * Ajax Util
 * 
 * @Author    JohnnyZen
 * @DateTime  2017-11-22
 * @copyright [johnny.weily]
 * @license   [license]
 * @version   [version]
 * @link      http://www.johnnyzen.cn/
 * @required  itemX
 * 
 * @param     option { url[,method][,data][,async][,dataType]}
 * 
 * @method    设置option，初始化ajax
 * @method    complete:请求完成时运行的函数(在请求成功或失败之后均调用,即在success和error函数之后)
 *                        complete:function(responseText,status,event){}    
 *                        complete:function(xhr,status){}    
 * @method    success:当请求成功时运行的函数
 *                        success:function(responseText,status,event){}
 *                        success:function(response,status,xhr){}
 * @method    error:请求出错时候的函数    
 *                        error:function(xhr,status,error){}
 *                        
 * @notice    xhr        用于创建 XMLHttpRequest 对象的函数
 * @notice    event.target.readyState的各值意义
 *             
                XMLHttpRequest.DONE                            4 响应完成或已失败 
                XMLHttpRequest.LOADING                         3 已收到服务器响应
                XMLHttpRequest.HEADERS_RECEIVED                2 已收到服务器响应的标头
                XMLHttpRequest.OPEND                           1 已调用open方法
                XMLHttpRequest.UNSENT                          0 已创建XMLHttpRequest对象   
 */

var Ajax = function(option){
    this.option = {
        url: null,
        type: option.type == undefined ? "GET" : option.type,
        async: option.async == undefined ? true : option.async,
        data: option.data == undefined ? null : option.data,
        contentType: option.contentType == undefined ? option.contentType : "application/x-www-form-urlencoded; charset=UTF-8",
        complete: typeof(option.complete) == 'function' ? option.complete : this.defaultCompleteHandle,
        success: typeof(option.success) == 'function' ? option.success : this.defaultSuccessHandle,
        error:typeof(option.error) == 'function' ? option.error : this.defaultErrorHandle
    },
    this.createAjaxRequest = function(){
        var AjaxRequest = null;// 缓存XHR对象便于 Ajax 使用
        try {
            // Opera 8.0+, Firefox, Safari
            AjaxRequest = new XMLHttpRequest();
        } catch (e) {
 
            // Internet Explorer Browsers
            try {
                AjaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    AjaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                    // 错误处理
                    throw new Error("Your browser broke!");
                    return false;
                }
            }
        }
        return AjaxRequest;
    },
    this.defaultCompleteHandle = function(responseText,status,event){
            console.log("[Ajax#defaultCompleteHandle] responseText:", event.target.responseText); //test
            console.log("[Ajax#defaultCompleteHandle] status:", event.target.status); //test
    },
    this.defaultSuccessHandle = function(responseText,status,event){
             console.log("[Ajax#defaultSuccessHandle] responseText:", event.target.responseText); //test
             console.log("[Ajax#defaultSuccessHandle] status:", event.target.status); //test
    },
    this.defaultErrorHandle = function(event){
        console.error("defaultErrorHandle:", "ajax request failed!");
    },
    (function(){
        var AjaxRoot = this;//保存当前调用的根对象
        var AjaxRequest = AjaxRoot.createAjaxRequest();
        try{
            AjaxRequest.onreadystatechange = function(event){
     // 　　　　    console.log("option.log:",AjaxRoot.option.log);//test

                if( event.target.readyState == XMLHttpRequest.DONE){// 4 响应完成或已失败 　
                    console.log('AjaxRoot.option.complete', AjaxRoot.option.complete);    
                    AjaxRoot.option.complete(event.target.responseText,event.target.status,event);
                } else if(event.target.readyState == XMLHttpRequest.LOADING){// 3 已收到服务器响应
                    AjaxRoot.option.success(event.target.responseText,event.target.status,event);
                }
            }
            AjaxRequest.open(AjaxRoot.option.type, AjaxRoot.option.url, AjaxRoot.option.async);
            //ajax.open(option.method,option.url，[是否异步请求，默认为true:true],[user],[password]);
            
            console.log('AjaxRoot.option.data',AjaxRoot.option.data);//test
            AjaxRequest.send(AjaxRoot.option.data); 
        }catch(e){
            console.error(e);
            AjaxRoot.option.error();
            return false;
        }
    })();
}







//Ajax Util demo 
var option = {
    type:"GET",
    url:"http://apis.baidu.com/beijingprismcubetechnology/qmpapi/qmpproduct",
    async:true,//是否异步
    dataType:"json",
    data:"hello",
    complete:function(responseText,status,event){
        console.log("complete:",responseText);
    }
}

Ajax(option);