JavaScript跨域访问.doc

简介符合Web2.0特征的众多网站一个明显的特点就是采用Ajax。Ajax提供了在后台提交请求访问数据的功能。其实现主要使用的是 XMLHttpRequest函数，这个函数允许客户端的Javascript 发送到服务器端的HTTP请求并获得返回数据。Ajax同时也是目前众多的Mashup背后简介符合Web2.0特征的众多网站一个明显的特点就是采用Ajax。Ajax提供了在后台提交请求访问数据的功能。其实现主要使用的是XMLHttpRequest函数，这个函数允许客户端的Javascript发送到服务器端的HTTP请求并获得返回数据。Ajax同时也是目前众多的Mashup背后的驱动力量，他们都利用Ajax来聚合不同来源的信息。理解同源策略的限制同源策略是指阻止代码获得或者更改从另一个域名下获得的文件或者信息。也就是说我们的请求地址必须和当前网站的地指相同。同源策略通过隔离来实现对资源的保护。这个策略的历史非常悠久从Netscape Navigator 2.0时代就开始了。解决这个限制的一个相对简单的办法就是在服务器端发送请求，服务器充当一个到达第三方资源的代理中继。虽然是用广泛但是这个方法却不够灵活。另一个办法就是使用框架(frames)，将第三方站点的资源包含进来，但是包含进来的资源同样要受到同源策略的限制。有一个很巧妙的办法就是在页面中使用动态代码元素，代码的源指向服务地址并在自己的代码中加载数据。当这些代码加载执行的时候，同源策略就不会起到限制。但是如果代码试图下载文件的时候执行还是会失败，幸运的是，我们可以使用JSON(JavaScript Object Notation)来改进这个应用。JSON和JSONP与XML相比，JSON是一个轻量级的数据交换格式。JSON对于JavaScript开发人员充满魅力的原因在于JSON本身就是Javascript中的对象。例如一个ticker对象 var ticker = symbol:IBM,price:100而JSON串就是 symbol:IBM,price:100这样我们就可以在函数的参数中传递JSON数据。我们很容易掌握在函数中使用动态的JSON参数数据，但是我们的目的并不是这个。通过使我们的函数能够加载动态的JSON数据，我们就能够处理动态的数据，这项技术叫做 Dynamic Javascript Insertion。我们看下面的例子index.html中 function showPrice(data) alert(Symbol: + data.symbol + , Price: + data.price); var url = ticker.js; /Outer JS URL var script = document.createElement(script); script.setAttribute(src, url); /load javascript document.getElementsByTagName(head)0.appendChild(script); ticker.js中 var data = symbol:IBM, price:100; showPrice(data);上面的代码通过动态加入Javascript代码，来执行函数加载数据。正如之前提到过的，同源策略对于动态插入的代码不适用。也就是你可以从不同的域中加载代码，来执行在他们代码中的JSON数据。这就是JSONP(JSON with Padding)。注意，使用这种方法时，你必须在页面中定义回调函数，就像上例中的showPrice一样。我们通常所说的JSONP服务(远程JSON服务)，实际上就是一种扩展的支持在用户定义函数中包含返回数据的能力。这种方法依赖于必须接受一个回调函数的名字作为参数。然后执行这个函数，处理JSON数据，并显示在客户页面上。Jsonp原理：首先在客户端注册一个callback, 然后把callback的名字传给服务器。此时，服务器先生成 json 数据。然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）JQuery的JSONP支持从JQery 1.2以后，就开始支持JSONP的调用。在另外的一个域名中指定好回调函数名称，你就可以用下面的形式来就加载JSON数据。 url?callback=?示例： jQuery.getJSON(url + &callbak=?, function(data) alert(Symbol: + data.symbol + , Price: + data.price); );jquery会在window对象中加载一个全局的函数，当代码插入时函数执行，执行完毕后就会被移除。同时jquery还对非跨域的请求进行了优化，如果这个请求是在同一个域名下那么他就会像正常的Ajax请求一样工作。上例中我们在动态插入到页面的代码中使用了静态的json数据，虽然完成了依次JSONP返回，但仍不是JSONP服务，因为不支持在URL中定义回调函数名称。下面是一个将其变成JSONP服务的一个方法服务器端使用PHP。首先我们来定义接口的规范，就像这样：/jsonp/ticker?symbol=IBM&callback=showPricesymbol是请求条件，callback是回调函数名称。在页面文件中，我们使用JQuery的支持： /JQuery JSONP Support var url = /api/suggest.php?symbol=IBM&callback=?; jQuery.getJSON(url, function(data) alert(Symbol: + data.symbol + , Price: + data.price); );在suggest.php中 $jsondata = symbol:IBM, price:120; echo $_GETcallback.(.$jsondata.);再举个.NET webservice的例子 客户端 $.getJSON( 6/services/WebService1.asmx/ws?callback =?, name: ff, time: 2pm , function(data) alert(decodeURI(data.msg) ); 服务器端 WebMethod public void ws(string name,string time) HttpRequest Request = HttpContext.Current.Request; string callback = Requestcallback; HttpResponse Response = HttpContext.Current.Response; Response.Write(callback + (msg:this is+name+jsonp); Response.End(); 现在，如果我们想制作一些mashup，或者将第三方