zoukankan      html  css  js  c++  java
  • JavaScript之Ajax Util

      
      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);

    三、Ajax规范设计者们所提供的接口和一些常见问题的解决方案

  • 相关阅读:
    [经验交流] kubernetes v1.11 更新了高可用方案
    Java泛型和编译优化的一个例子
    Java泛型和编译优化的一个例子
    Java泛型和编译优化的一个例子
    浅析JSONP-解决Ajax跨域访问问题
    java设计原则---开闭原则
    for,foreach,iterator的用法和区别
    List,Set,Map三种接口的区别
    为什么接口中定义的变量必须为常量?
    重写,string创建内存问题
  • 原文地址:https://www.cnblogs.com/johnnyzen/p/7880657.html
Copyright © 2011-2022 走看看