JavaScript中利用<script>获取非同源服务器的数据(规避同源策略)
来源:互联网 发布:quiver windows 编辑:程序博客网 时间:2024/05/04 04:02
在获取数据时,用XMLHttpRequest时,会有同源策略的限制。所谓同源是指,域名,协议,端口相同。形象些来说就是,A服务器中有个网页中含有JavaScript代码,这段代码如果用XMLHttpRequest来获取数据的话,就只能在A服务器中获取,不能获取B服务器中的数据。
因此,可以用<script>来获取非同源的数据,这种方式也叫JSONP,全称为JSON with Padding,因为使用这种方式时通常要指定一个回调函数,所请求的JSON数据也被包裹在这个回调函数中。
<!doctype html><html lang="en"><head><title>Mighty Gumball (JSON)</title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="mightygumball.css"><script>function <strong>updateSales</strong>(sales) {var salesDiv = document.getElementById('sales');for (var i = 0; i < sales.length; i++) {var sale = sales[i];var div = document.createElement('div');div.setAttribute('class','saleItem');div.innerHTML = sale.name + ' sold ' + sale.sales + ' gumballs';salesDiv.appendChild(div);}}</script></head><body><h1>Mighty Gumball Sales</h1><div id="sales"></div><strong><script src="http://gumball.wickedlysmart.com/?callback=updateSales"></script></strong></body></html>
上段代码中,定义了updateSales函数来处理获取到的数据,并显示在网页中的div中。
地址http://gumball.wickedlysmart.com实际上是提供了一个JSON,使用的<script>来获取这个JSON时,已经自动将JSON解析为JS对象了,而后面的?callback=updateSales则是指定了一个回调函数,意思是当JSON对象传输到浏览器之后,要调用updateSales函数来处理这个对象。
特别注意:<script>获取的数据已经自动把JSON解析为JS对象,而XMLHttpRequest获取的数据是JSON字串,在处理时要注意数据格式。
0 0
- JavaScript中利用<script>获取非同源服务器的数据(规避同源策略)
- JavaScript的同源策略
- JavaScript 的同源策略
- JavaScript 的同源策略
- javascript的同源策略
- javascript的同源策略
- 同源策略及规避方法
- 浏览器同源策略的行为限制以及规避方法
- javascript同源策略
- JavaScript同源策略
- javascript同源策略
- JavaScript:同源策略
- javascript同源策略
- javascript同源策略
- JavaScript中的同源策略
- 浏览器同源策略及其规避方法
- 浏览器同源策略及其规避方法
- JavaScript(Ajax)和Cookie的同源策略
- 整理
- char[] ,char*,string 三者的区别及转换
- Web优化 --利用css sprites减少图片请求
- protel99 学习笔记
- TestLink测试用例管理工具一般使用流程
- JavaScript中利用<script>获取非同源服务器的数据(规避同源策略)
- SSH-struts2的异常处理
- 名称党-逆规范化
- [php] Thinkphp 加载更多
- iOS的AssetsLibrary框架访问所有相片
- zoj 3429 映射
- 单例的double-check
- 学习老外用webstorm开发nodejs的技巧--代码提示DefinitelyTyped
- [JavaScript]基本包装类型