异步跨域访问的几种方式

废话不说,直接进入主题吧:
第一种:代理
具体做法是在本地服务器建立一个代理脚本(如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. }
  13. // Static script ID counter
  14. JSONscriptRequest.scriptCounter = 1;
  15. // buildScriptTag method
  16. //
  17. JSONscriptRequest.prototype.buildScriptTag = function () {
  18.     // Create the script tag
  19.     this.scriptObj = document.createElement("script");
  20.     
  21.     // Add script object attributes
  22.     this.scriptObj.setAttribute("type""text/javascript");
  23.     this.scriptObj.setAttribute("charset""utf-8");
  24.     this.scriptObj.setAttribute("src"this.fullUrl + this.noCacheIE);
  25.     this.scriptObj.setAttribute("id"this.scriptId);
  26. }
  27.  
  28. // removeScriptTag method
  29. // 
  30. JSONscriptRequest.prototype.removeScriptTag = function () {
  31.     // Destroy the script tag
  32.     this.headLoc.removeChild(this.scriptObj);  
  33. }
  34. // addScriptTag method
  35. //
  36. JSONscriptRequest.prototype.addScriptTag = function () {
  37.     // Create the script tag
  38.     this.headLoc.appendChild(this.scriptObj);
  39. }
一个使用的例子:
  1. function callbackfunc(jsonData) {
  2.      alert('Latitude = ' + jsonData.ResultSet.Result[0].Latitude + 
  3.            '  Longitude = ' + jsonData.ResultSet.Result[0].Longitude);
  4.      aObj.removeScriptTag();
  5. }
  6. request = 'http://api.local.yahoo.com/MapsService/V1/geocode?appid=YahooDemo
  7.            output=json&callback=callbackfunc&location=78704';
  8. aObj = new JSONscriptRequest(request);
  9. aObj.buildScriptTag();
  10. aObj.addScriptTag();
经过测试,上面的方法的确可以进行跨域访问,但是有几个问题:
1,请求的时候需要调用三个方法,而这三个方法显然是可以封装在一起的。
2,在callback函数中居然还要调用removeScriptTag方法,这是我最不希望看到的。
3,在遨游浏览器中callback无效。(在IE7上没有问题,但是一切换到遨游上测试就无效,至今还搞不清楚是怎么回事。后来延迟一下执行请求的函数居然就可以了,相当于延迟执行上面的第9~11行代码)
4,学习了jQuery的源码之后,显然对这种写法很不满。
自己尝试封装如下(注:还没有经过充分测试,呵呵):( 点击下载
 
使用方法如下:
  1. function callback(data){
  2.     //your code
  3. }
  4. url = 'your url';
  5. 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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 跨域问题的几种解决方法包括:1. JSONP;2. CORS;3. 反向代理;4. window.name;5. document.domain;6. postMessage;7. nginx代理;8. websocket。 ### 回答2: 解决跨域问题的几种方法包括以下几种: 1. JSONP跨域:通过在前端页面中动态创建一个script标签,src属性指向服务端提供的跨域接口,而服务器返回的数据需要被包裹在一个回调函数中。这种方法利用了script标签可以跨域访问的特性。 2. CORS跨域:服务端设置响应头部的Access-Control-Allow-Origin字段,表示允许的跨域访问源。通过设置这个字段,服务端可以指定允许哪些源和资源可以进行跨域访问。 3. 代理服务器:在客户端与服务端之间设置代理服务器,前端请求发给代理服务器,然后由代理服务器再向目标服务器发起请求,并将结果返回给客户端。通过这种方式,前端可以绕过浏览器的同源策略,实现跨域访问。 4. postMessage:利用HTML5的postMessage方法,在不同Window对象之间进行异步通信,从而实现不同域之间的信息传递。通过这种方式,前端可以在跨域的情况下进行数据传递和交互。 5. 服务器代理:前端通过向自己的服务器发送请求,将请求转发到需要访问的目标服务器,接收到目标服务器的返回数据后再返回给前端。这种方法通过服务器间的交互来实现跨域访问。 总之,解决跨域问题的方法有很多种,具体要选择哪种方法取决于具体场景和需求。 ### 回答3: 跨域问题是指在浏览器中,当一个请求发起时,如果请求的目标资源位于不同的域名、协议或端口,浏览器会认为是跨域请求,而出于安全考虑,默认会阻止该请求的发送。 解决跨域问题的几种方法如下: 1. JSONP(JSON with Padding):JSONP是通过动态添加<script>标签,向目标域名发送一个带有回调函数的请求,目标域名接收到请求后,将数据通过回调函数返回给页面,从而实现跨域通信,但只支持GET请求。 2. CORS(Cross-Origin Resource Sharing):CORS是W3C标准,支持现代浏览器,需要服务器设置响应头,在请求中添加`Origin`头,服务器端对该请求进行识别,如果资源允许跨域访问,则在响应头中添加`Access-Control-Allow-Origin`头,浏览器根据该头判断是否允许访问。 3. 代理服务器:使用自己的服务器作为中转,前端请求自己的服务器,再由服务器去请求目标资源,并将结果返回给前端,避免了浏览器的跨域限制,但增加了服务器的负载和网络请求的开销。 4. WebSocket:WebSocket是HTML5提供的一种支持双向通信的技术,可以在同一域名下建立持久连接,因此不存在跨域问题。 5. iframe跨域:通过在页面中嵌套一个隐藏的iframe,将目标资源的页面放入iframe中,利用浏览器的同源策略,可以通过操作iframe来实现跨域数据的传递。 总之,根据实际需求和场景,可以选择合适的方法来解决跨域问题,其中CORS是最常用且推荐的一种方式,能够更好地控制跨域访问的权限。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值