[JavaScript]封装自己的Ajax

未封装的Ajax

$.ajax({
     type: "POST",
          url: 'http://192.168.1.144:8089/hello/test',
          dataType: "json",
          data: {
              name: 'hh'
          },
          success: function (data) {
              $.hideLoading();
              console.log(data);
          }
      });

一、MyAjax.js

 /*
    *封装一个自己的ajax函数
    *有5个参数，最后一个参数可选
    *
    * @param method(必选)    请求类型  get 和 post
    * @param url(必选)       请求的url地址   相同域名下的页面（此函数不支持跨域请求）
    * @param data(必选)      请求协带的数据  以js对象的形式定义，如：{name:'张三'}
    * @param callback(必选)  回调函数,可接收一个参数，这个参数就是服务器响应的数据
    * @param type(可选)      指定服务器响应的数据类型（可选值：json,xml,text），如果是json模式，则使用json解析数据，默认为text普通字符串 
    *调用方法：MyAjax('post','../controller/send',{name:'张三',age:16},function(res){
    *    console.log(res);
    *},'json');
    *
    */
    function MyAjax(method, url, data, callback, type) {
       //创建兼容XMLHttpRequest 对象:用于在后台与服务器交换数据。
       var xmlhttprequest;
       if (window.XMLHttpRequest) {//IE7+, Firefox, Chrome, Opera, Safari
          xmlhttprequest = new XMLHttpRequest();
       } else {// code for IE6, IE5
          xmlhttprequest = new ActiveXObject("Microsoft.XMLHTTP");
       }
    
       //给请求添加状态变化事件处理函数
       xmlhttprequest.onreadystatechange = function () {
          //判断状态码
    
          //xmlhttprequest.status响应的 HTTP 状态，200表示响应成功
    
          //xmlhttprequest.readyState该属性表示请求/响应过程的当前活动阶段
          // 0 ：未初始化。尚未调用 open() 方法。
          // 1 ：启动。已经调用 open() 方法，但尚未调用 send() 方法。
          // 2 ：发送。已经调用 send() 方法，但尚未接收到响应。
          // 3 ：接收。已经接收到部分响应数据。
          // 4 ：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。
    
          if (xmlhttprequest.status == 200 && xmlhttprequest.readyState == 4) {
             //根据type参数，判断返回的内容需要进行怎么样的处理
    
             if (type == 'json') {
    
                //获得json形式的响应数据，并使用parse方法解析
                var res = JSON.parse(xmlhttprequest.responseText);
    
             } else if (type == 'xml') {
    
                //获得XML形式的响应数据
                var res = responseXML;
    
             } else {
    
                //获得字符串形式的响应数据
                var res = xmlhttprequest.responseText;
    
             }
             //调用回调函数，并将响应数据传入回调函数
    
             callback(res);
    
          }
       };
     
       //判断data是否有数据
    
       var param = '';
    
       //这里使用stringify方法将js对象格式化为json字符串
    
       if (JSON.stringify(data) != '{}') {
          url += '?';
          for (var i in data) {
             param += i + '=' + data[i] + '&'; //将js对象重组，拼接成URL参数存入param变量中
          }
    
          //使用slice函数提取一部分字符串，这里主要是为了去除拼接的最后一个&字符
          //slice函数：返回一个新的字符串。包括字符串从 start 开始（包括 start）到 end 结束（不包括 end）为止的所有字符。
    
          param = param.slice(0, param.length - 1); 
       } 
       //判断method是否为get
       if (method == 'get') { 
          //是则将数据拼接到url后面
          url = url + param; 
       } 
       //初始化请求 async=true为异步(默认)，即Ajax与后面的函数可以同时进行，
       //async=false为同步，当执行当前AJAX的时候会停止执行后面的JS代码，直到AJAX执行完毕后时，才能继续执行后面的JS代码。
       xmlhttprequest.open(method, url, true);
    
       //如果method为post
       if (method == "post") {
          xmlhttprequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
          //发送请求
          xmlhttprequest.send(param); 
       } else {
          //发送请求
          xmlhttprequest.send(null);
    
       } 
    }

二、调用方法：

<script> 

	/*所传参数固定位置，第一个传method,第二个传url,第三个传data,第四个为callback回调函数，第五个为dataType*/

		MyAjax('post', 'http://192.168.1.144:8089/hello/test', {  name: 'hh' }, function (res) {
		    $.hideLoading();
		     console.log(res);
		 }, 'json');


</script>