Ajax和封装它的小伙伴们

本文原创，转载说明，谢谢~!

一. 原生的ajax

1. 创建核心对象
   兼容IE的核心对象创建函数

   **javascript 代码**

function createXHR() {<br /> if (typeof XMLHttpRequest != "undefined") {<br /> return new XMLHttpRequest();<br /> } else if (typeof ActiveXObject != "undefined") {<br /> if (typeof arguments.callee.activeXString != "string") {<br /> var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],<br /> i,<br /> len;<br /> for (i = 0, len = versions.length; i < len; i++) {<br /> try {<br /> new ActiveXObject(versions[i]);<br /> arguments.callee.activeXString = versions[i];<br /> break;<br /> } catch (ex) {<br /> //跳过<br /> }<br /> }<br /> }</p> <p> return new ActiveXObject(arguments.call.activeXString);<br /> }else {<br /> throw new Error(‘No XHR object available’);<br /> }<br /> }

    调用
        var xhr = createXHR()
2. 请求头
    ①. 默认的情况下,在发送XHR请求的同时,还会发送下列头部信息
        Accept: 浏览器能够处理的内容类型
        Accept-Charset: 浏览器能够显示的字符集
        Accept-Encoding: 浏览器能够处理的压缩编码
        Accept-Language: 浏览器当前设置的语言
        Connection: 浏览器与服务器之间的连接类型
        Cookie: 当前页面的设置的任何Cookie
        Host: 发送请求的页面所在域
        Referer: 发送请求的页面URL
        User-Agent: 浏览器的用户代理字符串
    ②. 设置自定义请求头信息
        用法:必须在调用open()方法之后且调用send()方法之前调用setRequestHeader()

       **html 代码**

var xhr = createXHR(); //书接上回</p> <p> xhr.onreadystatechange = function(){<br /> if(xhr.readyState == 4){<br /> if((xhr.status >= 200 && xhr.status < 300) || xhr.string == 304){<br /> alert(xhr.responseText);<br /> }else{<br /> alert("Requert was unsuccessful: " +xhr.status);<br /> }<br /> }<br /> };</p> <p> xhr.open("get","example.php",true);<br /> xhr.方法之前调用setRequestHeader("MyHeader","MyValue");<br /> xhr.send(null);

         注: 可以发送默认的请求头信息 xhr.getAllResponseHeader(),然而不建议如此,否则会影响服务器的响应

3. POST请求
    XHR.open("POST","服务器响应/页面",true);

    ①. 比GET方法多一步设置请求头
    ②. 数据是通过send方法发送的。
        xhr.send("qs=true&userName=abc&pwd=123456");

    例子:
     **html 代码**

var xhr = createXHR();<br /> xhr.open("post","test.php",true);<br /> xhr.onreadystatechange = function(){</p> <p> xhr.onreadystatechange = function(){<br /> if(xhr.readyState == 4){<br /> if((xhr.status >= 200 && xhr.status < 300) || xhr.string == 304){<br /> alert(xhr.responseText);<br /> }else{<br /> alert("Requert was unsuccessful: " +xhr.status);<br /> }<br /> }<br /> };<br /> //比GET请求多了一步<br /> xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");<br /> //另外,数据是通过send方法发送的<br /> xhr.send("qs=true&userName=abc&pwd=123456");

二. jquery封装的Ajax
① $.ajax(url,[settings]) setting可选,$.ajax() 可以不带任何参数直接使用,所有的选项都可以通过 $.ajaxSetup() 函数来全局设置
② $.ajax() 返回其创建的 XMLHttpRequest 对象。

理解jquery的ajax
    1. 封装了兼容不同浏览器的创建XMLHttpRequest核心对象的方法
    2. 底层设置了默认参数【默认type = post ,dataType = text等】
    3. 底层调用核心对象并根据type类型发送服务器请求
    4. 根据dataType将不同类型的响应数据统一返回到函数中【success,error】

模拟封装jQuery的ajax
   感谢一个小伙伴 出处：https://github.com/mumuy/tools-library/blob/gh-pages/code/ajax.js

javascript 代码

function ajax(params){<br /> params = params||{};<br /> if (!params.url) {<br /> throw new Error(‘Necessary parameters are missing.’); //必要参数未填<br /> }<br /> var options = {<br /> url: params.url||”, //接口地址<br /> type: (params.type||’GET’).toUpperCase(), //请求方式<br /> timeout: params.timeout||5000, //超时等待时间<br /> async : true, //是否异步<br /> xhrFields:{}, //设置XHR对象属性键值对。如果需要，可设置withCredentials为true的跨域请求。<br /> dataType: params.dataType||’json’, //请求的数据类型<br /> data: params.data||{}, //参数<br /> jsonp:’callback’,<br /> jsonpCallback:(‘jsonp_’ + Math.random()).replace(‘.’,”),<br /> error: params.error||function() {},<br /> success: params.success||function(){},<br /> complete: params.complete||function(){}<br /> };<br /> var formatParams = function(json) {<br /> var arr = [];<br /> for(var i in json) {<br /> arr.push(encodeURIComponent(i) + ‘=’ + encodeURIComponent(json[i]));<br /> }<br /> return arr.join("&");<br /> };<br /> if(options.dataType==’jsonp’){<br /> //插入动态脚本及回调函数<br /> var $head = document.getElementsByTagName(‘head’)[0];<br /> var $script = document.createElement(‘script’);<br /> $head.appendChild($script);<br /> window[options.jsonpCallback] = function (json) {<br /> $head.removeChild($script);<br /> window[options.jsonpCallback] = null;<br /> hander && clearTimeout(hander);<br /> options.success(json);<br /> options.complete();<br /> };<br /> //发送请求<br /> options.data[options.jsonp] = options.jsonpCallback;<br /> $script.src = options.url + ‘?’ + formatParams(options.data);<br /> //超时处理<br /> var hander = setTimeout(function(){<br /> $head.removeChild($script);<br /> window[options.jsonpCallback] = null;<br /> options.error();<br /> options.complete();<br /> }, options.timeout);<br /> }else{<br /> //创建xhr对象<br /> var xhr = new (self.XMLHttpRequest||ActiveXObject)("Microsoft.XMLHTTP");<br /> if(!xhr){<br /> return false;<br /> }<br /> //发送请求<br /> options.data = formatParams(options.data);<br /> if (options.type == ‘POST’) {<br /> xhr.open(options.type, options.url, options.async);<br /> xhr.setRequestHeader(‘content-type’,’application/x-www-form-urlencoded’);<br /> }else{<br /> options.url += options.url.indexOf(‘?’)>-1?’&’+options.data:’?’+options.data;<br /> options.data = null;<br /> xhr.open(options.type, options.url + ‘?’+ options.data, options.async);<br /> }<br /> if(options.xhrFields){<br /> for(var field in options.xhrFields){<br /> xhr[field]= options.xhrFields[field];<br /> }<br /> }<br /> xhr.send(options.data);<br /> //超时处理<br /> var requestDone = false;<br /> setTimeout(function() {<br /> requestDone = true;<br /> if(xhr.readyState != 4){<br /> xhr.abort();<br /> }<br /> }, options.timeout);<br /> //状态处理<br /> xhr.onreadystatechange = function(){<br /> if(xhr.readyState == 4&&!requestDone) {<br /> if(xhr.status>=200 && xhr.status<300) {<br /> var data = options.dataType == "xml" ? xhr.responseXML : xhr.responseText;<br /> if (options.dataType == "json") {<br /> try{<br /> data = JSON.parse(data);<br /> }catch(e){<br /> data = eval(‘(‘ + data + ‘)’);<br /> }<br /> }<br /> options.success(data);<br /> } else {<br /> options.error();<br /> }<br /> options.complete();<br /> }<br /> };<br /> }<br /> }

三. angularJS的$http

1. $http
   ① AngularJS 中的一个核心服务，用于读取远程服务器的数据
   ② 返回一个promise对象
   ③ 语法:
   var promise = $http({
   method:’请求方法’,
   url:’请求地址’
   }).success(data,header,config,status){
   //当响应准备就绪时调用
   }}.error(fdata,header,config,status){
   //当响应以错误状态返回时调用
   }}

       由于$http方法返回一个promise对象,我们可以在响应返回时用then方法来处理回调,也可以分别用success和error
       promise.then(function(resp){
           //resp是一个响应对象
       }).function(resp){
           //带有错误信息的resp
       }
   
       或者我们的熟悉写法
       promise.success(function(data,header,config,status){  }});
       promise.error(function(data,header,config,status){  }});
   
   ④. $http.get()
       语法:
            $http.get('url',{cache: true}).success(data,header,config,status){}
   ⑤. $http.post()
       语法:
             $http.post('url', postData, config)
             .success(function(data, status, headers, config) {
                 //成功之后做一些事情
             }).error(function(data, status, headers, config) {
                 //处理错误
             });
       默认请求头
       Content-Type: application/json
       可以在.config()函数中对post请求的头进行修改或扩充
       angular.module('myApp',[]).config(function($httpProvider){
           $httpProvider.defaults.headers
               .put['X-Posted-By'] = 'MyAngularApp';
       })