异步跨域访问的几种方式

废话不说，直接进入主题吧：

第一种：代理

具体做法是在本地服务器建立一个代理脚本（如PHP），这个脚本可以将接收到的数据（GET或者POST）通过CURL（或者还有其他的方式）发送到目的服务器。

第二种：隐藏框架

现在通常使用的是iframe。

第三种：动态IMG标签

这种方法简单，适合那种只是需要往服务器端发送信息的场合（如PV统计，点击统计等）

1. var tmp = new Image();
2. tmp.src = "{your url}";   //把要传递的信息加到url中

第四种：动态SCRIPT标签

具体做法看下面的代码：

1. // Constructor -- pass a REST request URL to the constructor
2. //
3. function JSONscriptRequest(fullUrl) {
4.     // REST request path
5.     this.fullUrl = fullUrl; 
6.     // Keep IE from caching requests
7.     this.noCacheIE = '&noCacheIE=' + (new Date()).getTime();
8.     // Get the DOM location to put the script tag
9.     this.headLoc = document.getElementsByTagName("head").item(0);
10.     // Generate a unique script tag id
11.     this.scriptId = 'JscriptId' + JSONscriptRequest.scriptCounter++;
12. }
14. // Static script ID counter
15. JSONscriptRequest.scriptCounter = 1;
17. // buildScriptTag method
18. //
19. JSONscriptRequest.prototype.buildScriptTag = function () {
21.     // Create the script tag
22.     this.scriptObj = document.createElement("script");
23.     
24.     // Add script object attributes
25.     this.scriptObj.setAttribute("type", "text/javascript");
26.     this.scriptObj.setAttribute("charset", "utf-8");
27.     this.scriptObj.setAttribute("src", this.fullUrl + this.noCacheIE);
28.     this.scriptObj.setAttribute("id", this.scriptId);
29. }
30.  
31. // removeScriptTag method
32. // 
33. JSONscriptRequest.prototype.removeScriptTag = function () {
34.     // Destroy the script tag
35.     this.headLoc.removeChild(this.scriptObj);  
36. }
38. // addScriptTag method
39. //
40. JSONscriptRequest.prototype.addScriptTag = function () {
41.     // Create the script tag
42.     this.headLoc.appendChild(this.scriptObj);
43. }

一个使用的例子：

1. function callbackfunc(jsonData) {
2.      alert('Latitude = ' + jsonData.ResultSet.Result[0].Latitude + 
3.            '  Longitude = ' + jsonData.ResultSet.Result[0].Longitude);
4.      aObj.removeScriptTag();
5. }
7. request = 'http://api.local.yahoo.com/MapsService/V1/geocode?appid=YahooDemo
8.            output=json&callback=callbackfunc&location=78704';
9. aObj = new JSONscriptRequest(request);
10. aObj.buildScriptTag();
11. aObj.addScriptTag();

经过测试，上面的方法的确可以进行跨域访问，但是有几个问题：

1，请求的时候需要调用三个方法，而这三个方法显然是可以封装在一起的。

2，在callback函数中居然还要调用removeScriptTag方法，这是我最不希望看到的。

3，在遨游浏览器中callback无效。（在IE7上没有问题，但是一切换到遨游上测试就无效，至今还搞不清楚是怎么回事。后来延迟一下执行请求的函数居然就可以了，相当于延迟执行上面的第9~11行代码）

4，学习了jQuery的源码之后，显然对这种写法很不满。

自己尝试封装如下（注：还没有经过充分测试，呵呵）：（点击下载）

/**主要是对原来的jsr_class.js(http://www.xml.com/2005/12/21/examples/jsr_class.zip)进行适当的封装, 以简化使用. 封装过程参照了jQuery说明: 还有待进一步的优化, 呵呵小蔡 [e-mail] http://blog.csdn.net/yycai一个例子:function callback(data){ //your code}url = 'your url';JSRQuery(url,callback); //如果没有回调函数可以这样: JSRQuery(url);*/(function(){var window = this, undefined, _JSRQuery = window.JSRQuery, _JSRCallback = window.JSRCallback, JSRQuery = window.JSRQuery = function( fullUrl, callback ) { return new JSRQuery.fn.init( fullUrl, callback ); }, JSRCallback = window.JSRCallback = function( json ) { if(JSRQuery.callback){ //如果有回调函数, 则执行 JSRQuery.callback(json); } JSRQuery.query.removeScriptTag(); JSRQuery.clear; }; JSRQuery.fn = JSRQuery.prototype = { init: function( fullUrl, callback ){ var reg = //?/; fullUrl = reg.test(fullUrl) ? fullUrl + "&callback=JSRCallback" : fullUrl + "?callback=JSRCallback" ; JSRQuery.callback = callback; setTimeout( //延迟执行 function(){ JSRQuery.query = new JSONscriptRequest(fullUrl);//(JSRQuery.request);// console.log(fullUrl); JSRQuery.query.buildScriptTag(); JSRQuery.query.addScriptTag(); }, 1000 ); }, callback: null, query: null, request: "", clear: function(){ JSRQuery.callback = null; JSRQuery.query = null; //JSRQuery.request = ""; }, noConflict: function() { window.JSRQuery = _JSRQuery; window.JSRCallback = _JSRCallback; return JSRQuery; } } //JSRQuery.fn.init.prototype = JSRQuery.fn; // Constructor -- pass a REST request URL to the constructor // function JSONscriptRequest(fullUrl) { // REST request path this.fullUrl = fullUrl; // Keep IE from caching requests this.noCacheIE = '&noCacheIE=' + (new Date()).getTime(); // Get the DOM location to put the script tag this.headLoc = document.getElementsByTagName("head").item(0); // Generate a unique script tag id this.scriptId = 'JscriptId' + JSONscriptRequest.scriptCounter++; } // Static script ID counter JSONscriptRequest.scriptCounter = 1; // buildScriptTag method // JSONscriptRequest.prototype.buildScriptTag = function () { // Create the script tag this.scriptObj = document.createElement("script"); // Add script object attributes this.scriptObj.setAttribute("type", "text/javascript"); this.scriptObj.setAttribute("charset", "utf-8"); this.scriptObj.setAttribute("src", this.fullUrl + this.noCacheIE); this.scriptObj.setAttribute("id", this.scriptId); } // removeScriptTag method // JSONscriptRequest.prototype.removeScriptTag = function () { // Destroy the script tag this.headLoc.removeChild(this.scriptObj); } // addScriptTag method // JSONscriptRequest.prototype.addScriptTag = function () { // Create the script tag this.headLoc.appendChild(this.scriptObj); }})(); 

使用方法如下：

1. function callback(data){
2.     //your code
3. }
5. url = 'your url';
6. JSRQuery(url,callback); //如果没有回调函数可以这样: JSRQuery(url);

这样使用起来就简单多了。

PS：在jquery源码里有出现过很多jsonp，上网一查据说是JSON with Padding的简称（见：http://www.cn-cuckoo.com/2008/09/13/the-origin-of-jsonp-262.html）