最近在开发过程中，使用ajax去异步调取图片。在开发中这个功能没什么问题，可以后来提测，重新部署之后就有问题了，这就是ajax的跨域问题。
ajax本身是不支持跨域的，这是由于javascript的同源策略所导致。但是我们可以通过其他方法来解决ajax的跨域问题。
1 由于我们是利用了jquery来写的ajax，我们一开始是准备 利用jsonp来解决的，客户端类似下面写法
| 代码如下 | 复制代码 |
|
$.ajax({ type : "get", async:false, url : "http://www.xxx.com/ajax.do", dataType : "jsonp", jsonp: "callbackparam",//服务端用于接收callback调用的function名的参数 jsonpCallback:"success_jsonpCallback",//callback的function名称 success : function(json){ alert(json); alert(json[0].name); }, error:function(){ alert('fail'); } }); 服务器端写法 public void ProcessRequest (HttpContext context) { |
|
这个方法其实蛮简单的，跟我们之前写的改动不大。
2 由于我们这次项目开发的页面比较多，改动起来涉及的地方就比较多了。最后是采取的 直接修改nginx配置实现的。平时对反向代理的理解也就是 缓存、安全、负载均衡，所以查了下方向代理
反向代理（Reverse Proxy），顾名思义，就是代理的反向功能。我们使用代理，可以访问一些我们所不能直接访问到的网络，或者可以隐藏自己的真实身份。而反向代理，可以在不暴露内部服务器的情况下，让外部用户访问我们内部、防火墙后的服务。
使用反向代理主要有以下好处：
1 请求的统一控制，包括设置权限、过滤规则等；
2 隐藏内部服务真实地址，暴露在外的只是反向代理服务器地址；
3 实现负载均衡，内部可以采用多台服务器来组成服务器集群，外部还是可以采用一个地址访问；
4 解决Ajax跨域问题。
5 作为真实服务器的缓冲，解决瞬间负载量大的问题。
项目完成之后，对ajax跨域问题在网上查了查，还知道了通过HTML中可以请求跨域资源的标签引用来达到跨域的目的，其实jsonp本质上就是采用了这种办法。
HTML中可以请求跨域资源的标签是很多的，
Script无疑是最合适的。在请求每一个脚本资源时，浏览器都会去解析并运行脚本文件内定义的函数，或需要马上执行的JavaScript代码，我们可以通过服务器返回一段脚本或JSON对象，在浏览器解析执行，从而达到跨域请求的目的。使用script标签来实现跨域请求，只能使用get方法请求服务器资源。并且传参的长度也受到地址栏长度的限制。
补充:有了jQuery之后，如何来解决ajax的跨域问题：
| 代码如下 | 复制代码 |
|
<html> <head> <title>JQuery学习</title> <script src="jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ var oBtnTest = $("#btnTest"); oBtnTest.click(function(){ oBtnTest.disabled = true; var oResult = $("#result"); oResult.html("loading").css("color","red"); jQuery.getScript("http://www.111cn.net /test/js.txt", function(){ oResult.html("name:" + Dylan.name + "<br/>email:" + Dylan.email).css("color","black"); oBtnTest.disabled = false; }); }); }); </script> </head> <body> <button id="btnTest">BtnTest</button> <div id="result"></div> </body> </html> |
|
远程服务器端js.txt中的内容为:
var Dylan= {name:"Dylan",email:Dylan@163.com}
笔者感觉这种方式更加简洁。呵呵。当然，读者可以根据实际情况，任意选择实现方式。
怎么样，其实很简单吧，我看到过很多人不愿意去正视ajax所存在的技术瓶颈，其实AJAX更应该是Ajax而不是AJAX，突出第一个A是想强调其实AJAX发扬的是一种异步传输的方法，而不是具体到底使用了哪种技术。
其实，在json数据格式之后，有一种更牛X的“jsonp”，也可以实现ajax的跨域通信。其实jsonp不是一种数据格式，只是对我介绍的第二种方式做了改进。从jQuery1.2 版本开始，jQuery 拥有对 JSONP 回调的本地支持。