AJAX跨域和JSONP(文章自动添加短地址的功能)

什么是AJAX跨域请求？出于安全原因，如果您想通过Ajax从www.a.com请求另一个网站www.b.com的内容，浏览器将不允许您这样做。想想没有这个限制黑客能做什么。什么情况下是跨域的？域名不同，当然是跨域的。例如，a.com向b.com发送请求，这当然是跨域的，也是不允许的。但是，不同的子域(例如，sub.a.com向www.a.com发送请求)甚至不同域名的端口(例如，a.com:80到a.com:8080)都被认为是跨域的。下面演示一个跨域示例：复制代码如下： script type=' text/JavaScript '/jquery code $(' # btncrossdomainrequest ')。单击(function () {$)。get ('//www.jb51.net '，函数(数据){alert '(成功)。});});/script(我在IE8下没有提示的权限，但是在FF3.5.5和Google浏览器下没有提示。可汗~我记得以前版本的FF都有提示。IE6下应该有弹出提示(如果没记错的话))跨域AJAX请求的解决方案在AJAX应用环境中，由于安全原因，浏览器不允许XMLHttpRequest组件请求跨域资源。在很多情况下，这种限制给我带来了很多不便。很多同事研究过各种解决方案：1。跨域请求通过修改document.domain和隐藏IFrame来实现。该方案可能是跨域请求的最简单方案，但也是最具限制性的方案。首先，它只能在同一个顶级域名下实现跨域请求。此外，当页面中包含其他IFrame时，可能会出现安全异常，访问可能会被拒绝。2.通过请求当前域的代理，服务器代理访问另一个域的资源。XMLHttpRequest请求自己域中的服务器资源，并提供要访问的目标资源给服务器，服务器将委托访问目标资源。该方案可以实现完全的跨域访问，但是开发和请求过程的消耗会比较大。3.您可以在HTML中请求跨域资源的标签引用，例如图像、脚本、链接链接标签。在这些标签中，Script无疑是最适合的。当请求每个脚本资源时，浏览器将解析并运行脚本文件或JavaScript代码中定义的需要立即执行的函数。我们可以通过服务器返回一个脚本或者JSON对象，并在浏览器中解析执行，从而达到跨域请求的目的。脚本标记用于实现跨域请求，只有get方法可以用于请求服务器资源。第一种解决方案要求根域名相同，例如a.domain.com和b.domain.com。整个解决方案大致如下图所示：。

第二种解决方案是通过服务器端的WebClient(或其他)类请求跨域内容。这里需要注意的是，如果您想在网络客户端的请求中包含cookie，您需要手动将cookie添加到网络客户端。第三个解决方案与我们下面需要讲的JSONP有关。JSONP JSONP的全称应该是“带填充的JSON”，它利用了脚本/跨域请求的特点。简单来说，JSONP就是要用来处理请求结果的函数名作为参数传递给服务器，但是服务器将请求结果数据包装成这个函数中的一个参数，返回给客户端执行。有点抽象？然后直接看图：

这里有一个例子来解释。这个例子是自动为我们的博客文章生成一个短地址url。为了方便墙内朋友，我们直接使用中国http://s8.hk提供的短地址服务(API地址)。尝试按如下方式复制代码： script type=' text/JavaScript ' $(' # short it ')。click(function(){ c _ URL=' http://s 8 . hk :8088/S8/s？format=TextLongURl='；c _ URL=document . location . href；$.get(c_url)，函数(数据){ alert(数据)；}) });/脚本测试，什么？不能吗？肯定不是，因为是跨域的，所以我们需要利用跨域可以请求脚本/标签的特性：复制代码如下：脚本类型=' text/JavaScript '函数alert短URL(URL){ alert(URL)；} $('#shortItByJSONP ')。click(function(){ c _ URL=' http://s 8 . hk :8088/S8/s？format=TextLongURl='；c _ URL=document . location . href；//请注意，函数名“alertshorturl”是在c_url='jsonp=alertShortUrl' /中传递的。生成一个脚本/标记并将其添加到head/script=$(' script type=' text/JavaScript '/')中。attr ('src '，c _ URL)；//为什么在这里使用appendChild？//因为jQuery的append方法已经处理了脚本//你也可以使用$('head ')。追加(脚本)；//这里不需要，只是为了让你看得更清楚。$(“head”)[0]。appendChild(脚本[0])；});/脚本哈哈，再次点击测试按钮看看？很好，成功了。其实不用麻烦，因为jQuery从1.2版本开始就增加了对JSONP的支持，你只需要给出一个问号作为占位符，那么上面的代码就可以写成这样：复制的代码如下： script type=' text/JavaScript ' $(' # shorttitbyjqueryjsonp ')。click (function () {c _ URL=' 33。format=TextLongURl='；c _ URL=document . location . href；//注意下面只需要一个问号，而不是具体的函数名c_url='jsonp=？//注意是getJSON。$.getjson (c _ URL)，函数(数据){alert(数据)；});});/剧本哈哈，是不是很简单？让我们用这个实现为我们的文章添加自动缩短网址的功能：复制代码如下： script type=' text/JavaScript ' $(function(){ c _ URL=' http://s 8 . hk :8088/S8/s？format=TextLongURl='；c _ URL=document . location . href；//注意下面只需要一个问号，而不是具体的函数名c_url='jsonp=？$.getjson (c _ URL)，function(data){//这要看你喜欢哪里了。除此之外，还和你的博客使用的模板有关。$('本文的div短地址：/div ')。CSS('字体粗细'，'普通')。CSS('字体大小'。12px ')。追加($('a' data '/a ')。attr('href '，数据))。appendTo('。帖子。post title ')；});});/脚本好了，收工了。好好享受吧！多说几句，很多推特用户还在使用bit.ly、j.mp等国外短地址服务，很难看到，每次看到都很压抑。尽量不要用那些有坚固墙壁的。