关于Ajax跨域问题研究

(叶某不才,一下内容若有错误之处,恳请阁下斧正!)
            各位想
远程 读取 网页源代码都会找到如: http://blog.csdn.net/kubaoer/article/details/6901310  类似的文章或程序。
图片
      其主要利用Ajax的 XMLHttpRequest,将所需网站的html代码搬过来。当把程序拷到自己服务器上就出现问题了, XMLHttpRequest返回的是“”,不是null,也不是unidentified,ie,chrome,firefox都是这样的效果 。我就纳闷了,网上多篇文章都是用这个程序,于是我又上网再查,发现网上有成功的,也有和我一样的人,他们返回的都是“”,说是ajax不能跨域,因为考虑安全问题,多个主流浏览器都不允许跨域,于是我把浏览器的安全性降低,果然就噢啦~


 

以下为治标不治本的降低浏览器安全性方法,只供观察现象:
IE:
到控制面板->网络和Internet->
Internet选项->安全,单击“自定义级别”,找到“通过域访问数据源”,默认是禁用的,将它勾为启用。 远程 读取 网页源代码的程序就可以用了。

图片

图片


 Chrome:
到开始点运行,输入:"
chrome.exe -disable-web-security "  ,自动回弹出一个chrome窗口。
图片

图片


Firefox:
暂时没测试过 



为什么ajax不能跨域? 
 

       大家可以参考一下: http://www.blogjava.net/itspy/archive/2007/02/11/99262.html
       因为浏览器你这个JS程序是来自容器,它就限制你只能正常访问同一容器里的的资源,比如你通过 http://www.openj.cn 访问到一个页面,那么这个页面的JS就只能访问openj.cn的资源,而不能访问 www.baidu.com .  

是不是ajax就不能跨域呢?

      非也。JSONP的到来就是为了解决这个问题!

      说到AJAX就会不可避免的面临两个问题,
第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服务器端代理来解决。

     但到目前为止最被推崇或者说首选的方案还是 用JSON来传数据,靠JSONP来跨域  

      JSONP 
一种非正式传输协议,他 的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

具体可以参考:http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html
                         http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html ;

例子:
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
 
  < html  xmlns ="http://www.w3.org/1999/xhtml"   >  
< head >
 
  < title > Untitled Page </ title >  
</script>
< script  type ="text/javascript" >
 
 jQuery(document).ready( function (){ 
$.ajax({ type: 
" get " ,
async: 
false
url: 
" http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998 " ,
dataType: 
" jsonp " , jsonp:  " callback " , // 传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
 jsonpCallback: "flightHandler " , // 自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据  
success: 
function (json){ 
alert('您查询到航班信息:票价: ' + json.price + ' 元,余票: ' + json.tickets + ' 张。');
 },
error: 
function (){ alert( ' fail ' ); } });
 
 });  </ script >  
</ head >  
< body >  
</ body
 
  </ html >  

      如过你把上述代码拷到你页面上跑的话,就会没反应,因为“
http://flightQuery.com/jsonp/flightResult.aspx ”过期了,网上有很多ajax跨域的例子,那些跨域的网站多数都过期了(我承认我在这里折腾了好长一段时间 )。
      一下是我测试过,成功的网站:

Geonames API:邮编的位置信息:

  http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US&callback=?

Flickr JSONP API:载入最新猫的图片:

  http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?

Yahoo Local Search API:在邮编为 10504 的地区搜索比萨:

            http://local.yahooapis.com/LocalSearchService/V3/localSearch?appid=YahooDemo&query=pizza&zip=10504&results=2&output=json&callback=?  
 
           Google某API:
                http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=apple&callback=?     


       调用这些网址时,如 
Geonames API:邮编的位置信息 ,先输入 http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US ,看返回的是不是json格式的数据(json不json没关系啦,只要不是返回的是网站,或者404就行了),有数据才可以回调你那个回调行数。


      孟良总结:
      要想用ajax跨域,首先要用JSONP格式,其次,你要有他那个网站的 接口文档,其实最开始那个
远程 读取 网页源代码的程序也是用到JSONP,但你输入的是他的网站地址,不是他的接口地址,返回的是html代码,不是json,所以 XMLHttpRequest读取不了。
      所以要想不通过服务器进行跨域,要么拿到目标的接口地址 ,要么让用户降低浏览器的安全性 。
      暂时先写到这吧。还是那句, 
叶某不才,若有可取之处,还望一起交流;若有错误之处,恳请阁下斧正!
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值