跨域的异步请求一

一直想搞一个强悍的异步系统，无奈各浏览器在这方面的实现林林总总，再加上跨域需求，就更复杂。现在我把我暂时能想到的东西都一点点写出来吧。

首先确定其参数，它大概和Greasemonkey的GM_xmlhttpRequest一个样子。

      dom.ajax({
        method:"GET",//HTTP 请求类型，get post delete put
        url:location.href,//必须是绝对路径
        headers:{"Content-Type": "application/x-www-form-urlencoded"},//首部，对象字面量
        overrideMimeType:"text/html; charset=ISO-8859-1",
        data:null,//传到后面的数据
        onerror:function(){},//请求错误时的回调函数
        onload:function(){}//请求成功时的回调函数
      });

然后就是内部实现了，暂时不考虑跨域，是这个样子：

      dom.ajax = function(opts){
        var s = dom.mixin(true,{},dom.ajaxSettings,opts),
        method = s.method.toUpperCase(),
        xhr = dom.xhr();
        if ( s.username ) {
          xhr.open(method, s.url, s.async, s.username, s.password);
        } else {
          xhr.open(method, s.url, s.async);
        }
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4){
              //   alert(xhr.responseText)
          }
        };
        xhr.send(opts.data || null);
      }

接着是对各个细节进行强化，如对传输数据的处理，为url添加参数，缓存的设置，首部的设置等等……

一般地，我们提交表单时，会将表单元素的name与value，转换为“name1=value1?name2=value2”这种形式，如果是post请求，则放到send方法中，如果是get方法，则置于url之后。另，如果method不为get或post，我们需要用post来模拟它。有时，我们还会自行添加一些特别标识的数据进行请求，如一些大公司的查询服务（IP查询，RSS订阅，天气预报）。为了放便处理对象，我们必要时将它转换为一个对象，到发送请求时再变回字符串：

            query = dom.isString(obj.data) ? dom.ajax.toQueryObject(obj.data) : obj.data || {}
            if(/get|post/i.test(method)){
                query._method = method;
                method = obj.method = "POST"
            }
            query = dom.ajax.toQueryString(query)

缓存的处理，这个有好有坏，如果是测试阶段，我们可以设置一个首部If-Modified-Since为0。对于get请求，我们还可以加个时间截或随机数什么的。

首部的设置，它一定要在调用了open方法才能用：

            setRequestHeaders:function(xhr,obj){//AJAX对象与参数对象
                var headers = {
                    "Accept" : obj.accepts[ obj.dataType ] ? obj.accepts[ obj.dataType ] + ", */*" : obj.accepts._default ,
                    "X-Requested-With": "XMLHttpRequest"
                }
                if(!obj.cache){
                    headers["If-Modified-Since"] = "0"
                }
                dom.mixin(headers,obj.headers)
                if (obj.method === 'POST') {
                    headers['Content-type'] = obj.contentType +  '; charset=' + obj.encoding ;
                    if (xhr.overrideMimeType &&
                        (navigator.userAgent.match(/Gecko\/(\d{4})/) || [0,2005])[1] < 2005)
                        headers['Connection'] = 'close';
                }
                for(var i in headers){
                    xhr.setRequestHeader(i,headers[i]);
                }
            }

timeout与abort处理，由于这两个方法在各浏览器的支持程度都不一样，做得最好的是IE8的XDomainRequest与XMLHttpRequest。

      var xhr = dom.xhr();
      xhr.open("POST",location.href,true);
      xhr.onreadystatechange=function(){
        if (xhr.readyState == 4 && xhr.status == 200) {
          clearTimeout(xhrTimeout);
          alert(xhr.responseText);
        }
      }
      xhr.send("ruby louvre");
      var xhrTimeout=setTimeout("ajaxTimeout();",5000);
      function ajaxTimeout(){
        xhr.abort();
        alert("强制关闭链接！");
      }

不过为了兼容所有浏览器，最廉价的方法还是JSONP，具体可参看这一篇文章：《クロスドメイン通信方法のまとめ》

function jsonp(url,callback,name, query){                
    if (url.indexOf("?") !== -1)
        url += "&jsonp=" 
    else
        url += "?jsonp=" 
    url += name + "&";
    if (query)
        url += encodeURIComponent(query) + "&";   
    url += (new Date-0); // prevent caching        
    
    var script = document.createElement("script");        
    script.setAttribute("src",url);
    script.setAttribute("type","text/javascript");                
    document.body.appendChild(script);
}