JavaScript封装Ajax工具函数及jQuery中的ajax，xhr在IE的兼容

 封装ajax工具函数

首先要思考：
一、为何要封装它？提升开发效率
二、把一些不肯定的状况考虑在其中
　　a. 请求方式
　　b. 请求地址
　　c. 是否异步
　　d. 发送参数
　　e. 成功处理
　　f. 失败处理
三、肯定参数
　　a. Type--请求方式 get （get/post)
　　b. Url--请求地址 默认当前地址 字符串
　　c. Async--是否异步 true （true/false)
　　d. Data--发送的数据 {} 对象{name：xx}
　　e. Success--成功回调 function 函数 函数里面就是处理的成功业务
　　f. Error--失败回调 function 函数 函数里面就是处理失败的业务

/*===============ajax 封装 ===========*/
/*1.肯定一个全局对象*/
window.$ = {};
/*2.给全局对象定义一个属性*/
$.ajax = function(options){
    /*3.options对象传参 */
    /*若是用户不传或者传的不是对象中止执行*/
    if(!options || typeof options != 'object') return false;
    /*4.默认参数的处理*/
    var type = options.type == 'post' ? 'post' : 'get';
    var url = options.url || location.pathname;
    var async = options.async === false ? false : true;
    var data = options.data || {};
    /* 对象形式的数据 须要转换成键值对的数据字符串  XHR对象须要 */
    var data2str = '';
    for(var key in data){
        data2str += key+'='+data[key]+'&';
    }
    /*须要去掉最后一个&*/
    data2str = data2str && data2str.slice(0,-1);
    /*if(data2str){
        data2str = data2str.slice(0,-1);
    }*/
    /*请求发送以前*/
    if(options.beforeSend){
        var flag = options.beforeSend();
        if(flag === false){
            return false;
        }
    }
    /*5.ajax 编程*/
    /*5.1 初始化对象*/
    var xhr = new XMLHttpRequest();
    /*5.2 设置请求行*/
    xhr.open(type,type == 'get' ? (url+'?'+data2str) : url,async);
    /*5.3 设置请求头*/
    if(type == 'post'){
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    }
    /*5.4 设置请求主体 发送*/
    xhr.send(type == 'get'?null:data2str);
    xhr.onreadystatechange = function(){
        /*5.5 通信完成*/
        if(xhr.readyState == 4){
            /*5.6 成功的*/
            if(xhr.status == 200){
                /*须要考虑问题 数据格式问题*/
                /*1.怎么肯定后台返回的数据格式？*/
                /*2.后台有写接口的时候 规范  xml application/xml json application/json*/
                var result = null;
                var contentType = xhr.getResponseHeader('Content-Type');
                /*3.若是有xml 就是xml格式数据*/
                if(contentType.indexOf('xml') > -1){
                    result = xhr.responseXML;
                }
                /*4.若是有json 就是json格式数据*/
                else if(contentType.indexOf('json') > -1){
                    result = JSON.parse(xhr.responseText);
                }
                /*5.若是有标识  普通文本*/
                else{
                    result = xhr.responseText;
                }
                /*调用成功回调函数  把数据传递过去*/
                options.success && options.success(result);
            }
            /*5.7 失败的*/
            else{
                /*调用失败回调函数*/
                options.error && options.error({status:xhr.status,statusText:xhr.statusText});
            }
        }
    };
    /*
    $.ajax({error:function(msg){}});
    $.ajax({success:function(data){}});
    * */
};
/*get*/
$.get = function(options){
    options.type = 'get';
    $.ajax(options);
};
/*post*/
$.post = function(options){
    options.type = 'post';
    $.ajax(options);
};

 

jQuery Ajax 操做函数

jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法容许咱们在不刷新浏览器的状况下从服务器加载数据。

函数	描述
jQuery.ajax()	执行异步 HTTP (Ajax) 请求。
.ajaxComplete()	当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxError()	当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSend()	在 Ajax 请求发送以前显示一条消息。
jQuery.ajaxSetup()	设置未来的 Ajax 请求的默认值。
.ajaxStart()	当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxStop()	当全部 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSuccess()	当 Ajax 请求成功完成时显示一条消息。
jQuery.get()	使用 HTTP GET 请求从服务器加载数据。
jQuery.getJSON()	使用 HTTP GET 请求从服务器加载 JSON 编码数据。
jQuery.getScript()	使用 HTTP GET 请求从服务器加载 JavaScript 文件，而后执行该文件。
.load()	从服务器加载数据，而后把返回到 HTML 放入匹配元素。
jQuery.param()	建立数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。
jQuery.post()	使用 HTTP POST 请求从服务器加载数据。
.serialize()	将表单内容序列化为字符串。
.serializeArray()	序列化表单元素，返回 JSON 数据结构数据。

• jQuery为咱们提供了更强大的Ajax封装
• $.ajax({}) 可配置方式发起Ajax请求
• $.get() 以GET方式发起Ajax请求
• $.post() 以POST方式发起Ajax请求
• $('form').serialize() 序列化表单（即格式化key=val&key=val）
• url 接口地址
• type 请求方式
• timeout 请求超时
• dataType 服务器返回格式
• data 发送请求数据
• beforeSend: function () {} 请求发起前调用
• success 成功响应后调用
• error 错误响应时调用
• complete 响应完成时调用（包括成功和失败）

   $(function(){
          $.ajax({
              /*1.请求方式*/
              type:'get',
              /*2.接口地址*/
              url:'01 jquer1yAjax.php',
              /*3.传递数据*/
              data:{
                  username:'xqq'
              },
              /*4.限制返回数据类型 强制转换数据类型 若是转换不成功 会执行错误的回调函数*/
              dataType:'json',
              /*5.请求以前的回调函数*/
              beforeSend:function(){
                  console.log('beforeSend');
                  /*若是请求回调函数  返回的是  false 中止ajax发送*/
                  //return false;
              },
              /*6.成功回调函数*/
              success:function(data){
                  console.log(data);
              },
              /*7.失败回调函数*/
              error:function(){
                  console.log('error');
              },
              /*8.通信完成回调函数*/
              complete:function(){
                  console.log('complete');
              }
          });
      });

   

• XHR的IE兼容性

  function XHR() {
      /*XMLHttpRequest 存在兼容问题*/
      /*1.申明一个xhr*/
      var xhr;
      /*2.运行出现错误  异常 */
      /*3.捕获异常*/
      try {
          /*在不支持这个对象的时候 出现异常*/
          xhr = new XMLHttpRequest();
      }
      /*4.处理异常*/
      catch(e) {
          /*低版本IE浏览器 初始化xhr对象须要的不一样参数*/
          var IEXHRVers =["Msxml3.XMLHTTP","Msxml2.XMLHTTP","Microsoft.XMLHTTP"];
          /*变量数组*/
          for (var i=0;i<IEXHRVers.length;i++) {
              /*5.捕获异常*/
              try {
                  /*低版本IE初始化xhr对象的方式*/
                  xhr = new ActiveXObject(IEXHRVers[i]);
              }
              catch(e) {
                  continue;
              }
          }
      }
      return xhr;
  }