奔跑的犀牛edu

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Ajax简介:

  Ajax是Asynchronou Javascript +XML 的缩写。Ajax通信与数据无关。Ajax能向服务器请求额外的数据而无需卸载页面,其核心是 XMLHttpRequest 对象(简称XHR),XHR为向服务器发送请求和解析服务器相应提供了流畅的接口,能以异步的方式获得能多信息。默认情况下,XHR只能访问与包含它的页面同一域中的资源。

 

CORS简介:

  CORS(Corss-Origin Resource Sharing,跨源资源共享)定义了访问跨源资源时,浏览器与服务器应该如何沟通。基本思想:使用自定义的HTTP头部让浏览器与服务器沟通,决定请求或响应成功还是失败。例如一个简单的GET或POST发送的请求是没有自定义头部的,在发送该请求的时候给它附加额外的Origin头部:Origin:http://nczonline.net,服务器处理请求并查询Access-Control-Allow-Origin的值,若有匹配则给予响应,否则驳回请求。

 

以下是三种常见的跨域解决方案

一、CORS(跨源资源共享)

1.IE对CORS支持——XDR(XDomainRequest)

IE中使用XDR对象实现CORS,它的使用与XHR对象类似,也是实例化后调用open()和send()方法。不同的是,XDR的open()方法只有两个参数:请求类型和URL。

xhr=new XDomainRequest();
xhr.open(method,url);
xhr.send();

2.其他浏览器支持CORS——原生XHR

大多数浏览器的XHR对象原生支持CORS,只需要在open()方法中传入响应的url即可。

3.跨浏览器支持CORS

综合以上两种情况,可以实现跨浏览器的CORS。检查XHR是否支持CORS的最简单方式是检查 withCredentials属性,然后结合检查XDomainRequest对象是否存在即可。

function createCORSRequest(method,url){
        //创建XHR对象   
        var xhr = new XMLHttpRequest();
        //启动请求   
        if("withCredentials" in xhr){
             xhr.open(method,url,true);
             }else if(typeof XDomainRequest!='undefined'){
                  xhr=new XDomainRequest();
                  xhr.open(method,url);
                  }else{
                       xhr=null;
                       }                 
        return xhr;
              }

4.实例

下面看个简单的例子,http://www.jsdemo.com/demoajax/demo3.htm 跨域请求 http://www.othersite.com/weather.ashx 中的数据。这是本地搭建的两个测试站点。

weather.ashx首先检测来源页面,然后决定是否返回Access-Control-Allow-Origin头。

public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        string referrer = context.Request.ServerVariables["HTTP_REFERER"];
        if (!string .IsNullOrEmpty(referrer) && referrer.IndexOf( "http://www.jsdemo.com") > -1)
        {
            context.Response.AddHeader( "Access-Control-Allow-Origin" , "http://www.jsdemo.com");
        }
        context.Response.Write( "{\"weather\": \"晴\",\"wind\": \"微风\"}" );
    }

demo3.htm通过CORS方式进行跨域请求,并将结果解析后显示在页面中。

var xhr=createCORSRequest("get","http://www.othersite.com/weather.ashx");
         xhr.onload=function(){
              if(xhr.status==200||xhr.status==304){
                   var result=xhr.responseText;
                   var json=JSON.parse(result);
                   var obj= document.getElementById("result");
                   obj.innerHTML="天气:"+json.weather+";风力:"+json.wind;
                   }
              }
      xhr.send();

 

二、图像Ping

<img>标签是没有跨域限制的,我们可以利用图像标签实现一种简单的、单向的跨域通信。图像ping通常用于跟踪用户点击数和广告曝光次数等。

特点:图像跨域请求只能用于浏览器和服务器之间的单向通信,它只能发送Get请求,而且不能访问服务器的响应内容。

来看个小例子demo4.htm,客户端点击链接时触发跨域请求。

<a href="javascript:void(0);" onclick="Click()">点击我</a>
    <script>
         function Click(){
              var img=new Image();
              img.onload=function(){
                   alert('DONE');
                   }
                   img.src="http://www.othersite.com/demo4.ashx?r="+Math.random();
              }
    </script>

服务端进行简单的计数,并且发送回一像素大小的图像。客户端接收到该结果后会弹窗提示“DONE”。

public static int Count=0;

public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain" ;
        Count++;
        context.Response.ContentType = "image/gif" ;
        System.Drawing. Bitmap image = new System.Drawing. Bitmap(1, 1);
        image.Save(context.Response.OutputStream, System.Drawing.Imaging. ImageFormat .Gif);
        context.Response.Write(Count);
    }

 

三、JSONP跨域请求

1.JSONP结构

JSONP是很常用的一种跨域请求方案,常见的JSONP请求格式如下:

http://www.othersite.com/demo5.ashx?callback=showResult

响应结果看上去就像是包在函数调用中的JSON结构:

showResult({"weather": "晴","wind": "微风"})

JSONP结果由两部分组成:回调函数和数据。回调函数一般是在发起请求时指定的,当响应完成时会在页面中调用的函数;数据当然就是请求返回的JSON数据结果。

2.发起请求:

JSONP原理上是利用了动态<script>标签实现的,这里的<script>元素和<img>标签一样,不受其他域加载的限制。通过创建script对象,并且将其src属性设置为跨域请求的url地址。当请求完成后,JSONP响应加载到页面中便立即执行。

<script>
     function showResult(json){                
         var obj= document.getElementById("result");
         obj.innerHTML="天气:"+json.weather+";风力:"+json.wind;
     }
     var script=document.createElement("script");
     script.src="http://www.othersite.com/demo5.ashx?callback=showResult";
     document.body.insertBefore(script,document.body.firstChild);
</script>

 

参考地址:http://www.cnblogs.com/janes/p/3968781.html

posted on 2015-09-21 15:04  奔跑的犀牛edu  阅读(201)  评论(0编辑  收藏  举报