支持跨域Ajax调用的 JavaScript API

        因无法通过正常的 AJAX 请求来访问远程跨域服务器并接收响应，这是因为浏览器的安全限制。下面将告诉你如何解决这个问题。通过Jquery+XDomainRequest实现,支持:IE8以上,chrome,firefox等浏览器.

       注意:使用时在服务器响应端添加响应头:Response.AddHeader("Access-Control-Allow-Origin","*")

       以下是javascript api,IE8以上浏览器采用XDomainRequest对象的ajax请求;chrome,firefox等浏览器使用Jquery的Ajax,具体代码如下:crossDomain.js

/**
* 支持跨域Ajax调用的 JavaScript API,
* 使用时在服务器响应端添加响应头:Response.AddHeader("Access-Control-Allow-Origin","*")
* 版本支持:IE8以上,chrome,firefox
* @author ketqi
*/
var CrossDomain = {
    /**
    *

 
    
 
        * opts{ 
    
 
        *     url:null,//请求的地址 
    
 
        *     param:null,//需传入的参数 
    
 
        *     type:"get",//请求方法 
    
 
        *     dataType = "json",//返回的数据格式,json和text 
    
 
        *     success:callback(re),//成功后执行的回调函数 
    
 
        *     error:callback(),//失败后的回调函数 
    
 
        *     timeout:callback(),//超时后的回调函数 
    
 
        * } 
    
 
        * 

    */
   invoke :  function(opts) {
        // browser IE8 realse support XDomainRequest
        if (navigator.appName ==  "Microsoft Internet Explorer") {
            var version = navigator.appVersion.split( ";")[ 1].replace( /[ ]/g,  "");
            if (version ==  "MSIE6.0" || version ==  "MSIE7.0") {
               alert( "no support IE6,IE7");
                return;
           }  else {
                if (window.XDomainRequest) {
                    var xdr =  new XDomainRequest();
                    if (xdr) {
                        //handle error callback function
                        if (opts.error &&  typeof opts.error ==  "function") {
                           xdr.onerror =  function(){
                               opts.error();
                           };
                       }
                        //handle timeout callback function
                        if (opts.timeout &&  typeof opts.timeout ==  "function") {
                           xdr.ontimeout =  function(){
                               opts.timeout();
                           };
                       }
                        //handle success callback function
                        if (opts.success &&  typeof opts.success ==  "function") {
                           xdr.onload =  function(){
                                if(opts.dataType){ //handle json formart data
                                    if(opts.dataType.toLowerCase() ==  "json"){
                                       opts.success(JSON.parse(xdr.responseText));
                                   }
                               } else{
                                   opts.success(xdr.responseText);
                               }
                           };
                       }
                       
                        //wrap param to send
                        var data =  "";
                       $.each(opts.param, function(k,v){
                           data += k +  "=" + v +  "&";
                       });
                       data = data.substring( 0,data.length -  1);
                       
                       xdr.open(opts.type, opts.url);
                       xdr.send(data);
                   }  else {
                       alert( 'Failed to create XDomainRequest');
                   }
               }
           }
       }  else { // browser chrome,firefox
            //use jquery ajax handle other request
           $.ajax({
               url : opts.url,
               type : opts.type,
               dataType : opts.dataType,
               data : opts.param,
               success : opts.success,
               error : opts.error,
               timeout : opts.timeout
           });
       }
   }
};

 

 

 以下是html执行代码:

      charset= "utf-8"  />
    src= "http://code.jquery.com/jquery-1.7.1.min.js" >
    src= "./crossDomain.js" >



type= "text/javascript" >
   $( function() {
       $( "#crossDomain").click( function(){
           CrossDomain.invoke({
               url: "url",
               type: "get",
               param:{idx: 1},
               dataType: "text",
               success: function(re){
                   alert(re);
               }
           });
       });        
   });

  href= "javascript:void()"  id= "crossDomain" >跨域
  id= "results" >

参考资料:

XDomainRequest
HTTP_access_control