支持跨域Ajax调用的 JavaScript API

http://ketqi.blog.51cto.com/1130608/976637       因无法通过正常的 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以上,firefox
* @author ketqi
*/
var CrossDomain = {
   /**
    * <pre>
    * opts{
    *     url:null,//请求的地址
    *     param:null,//需传入的参数
    *     type:"get",//请求方法
    *     dataType = "json",//返回的数据格式,json和text
    *     success:callback(re),//成功后执行的回调函数
    *     error:callback(),//失败后的回调函数
    *     timeout:callback(),//超时后的回调函数
    * }
    * </pre>
    */
   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执行代码:
<!DOCTYPE html>
<html>
<head>
   <Meta charset="utf-8" />
   <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
   <script src="./crossDomain.js"></script>
</head>
<body>
<!-- Response.AddHeader("Access-Control-Allow-Origin","*") -->
<script type="text/javascript">
   $(function() {
       $("#crossDomain").click(function(){
           CrossDomain.invoke({
               url:"url",type:"get",param:{idx:1},dataType:"text",success:function(re){
                   alert(re);
               }
           });
       });        
   });
</script>
<a href="javascript:void()" id="crossDomain">跨域</a>
<div id="results"></div>
</body>
</html>

支持跨域Ajax调用的 JavaScript API

猜你在找的Ajax相关文章