javascript 跨域请求详细分析
- - CSDN博客Web前端推荐文章比如用户使用浏览器打开一个网站 （www.AAA.com）的首页，这个时候浏览器会执行来自网站www.AAA.com的一个javascript的函数，这个函数是向网站（www.BBB.com）请求数据： $.getJSON('www.BBB.com/index.php', funciton(data) {.
javascript 跨域请求详细分析
标签：
javascript
分析
| 发表时间：2014-01-14 05:56 | 作者：a23456789zxcvbnm
出处：http://blog.csdn.net
什么是跨域请求
比如用户使用浏览器打开一个网站 （www.AAA.com）的首页，这个时候浏览器会执行来自网站www.AAA.com的一个javascript的函数，这个函数是向网站（www.BBB.com）请求数据：
$.getJSON('www.BBB.com/index.php', funciton(data) {
// 后续操作
});网站A的脚本去请求网站B的数据，就是跨域请求。在没有处理的情况下，浏览器会限制这样的请求。
同源策略
同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。这个策略可以追溯到 Netscape Navigator
2.0。如果两个页面的协议、端口（如果指明了的话）和主机名都相同，Mozilla
认为这两个页面拥有相同的源。浏览器为什么要做这样的限制呢？
我们知道，JAVASCRIPT是很强大的，比如你打开了一个支付宝的网页，又一不小心打开了一个“病毒”网页，这个网页有一段Javascript，执行这段JS后，会修改了你的支付宝页面，后果可想而知。所以，浏览器阻止javascript请求非同源的脚本数据。
什么情况下，我们要绕过浏览器这个限制
情况1：CDN缓存导致的跨域请求。CDN服务器可以缓存网站服务器的javascript 文件，当浏览器向服务器请求数据的时候，如果需要请求javascript文件，浏览器首先会去CDN服务器中要，然后再由CDN服务器去网站服务器拿。加入一个CDN缓存后，就可以避免每次都向服务器某些文件。但是这样做，会有一个严重的问题，因为javascript文件是从CDN服务器中拿的，如果这个javascript需要向网站服务器请求数据，就会涉及到跨域的问题。
情况2：使用HTML构建APP应用，如果APP应用会有很多图片和文件，每次请求都向服务器请求这些图片和文件，实现的效果肯定不理想，而且特别耗流量.为了解决这个问题，我们可以把javascript保存在本地，然后通过访问文件的协议访问js文件，由这些js文件请求服务器的数据，更加数据的要求动态的构建html页面。访问形式类似与：
file:///E:/BaiduYunPan/www/test.js
情况3：网站A和网站B都是我的，我需要网站A中的Javascript能请求网站B的数据。
如何绕过浏览器这个限制
javascript 中src属性是不受同源策略限制的，因为这样，我们可以引用谷歌提供的Jquery文件。而且还记住一点，由src请求回来的数据，浏览器默认它是一段可执行的JS文件。在网站A中一个test.js:
<html>
<script>
function test(data)
{
alert(data);
}
</script>
<script type="text/javascript" src="http://www.BBB.com/test.php"></script>
</html>注意：test()函数必须声明在前。在网站B中有这个test.php文件：
<?php
echo "test('this data is from Server B')"; 当浏览器执行到tes.js文件的时候，会触发test(data)这个函数，也就是说，可以请求到网站B的内容。这样，我们就已经实现了跨域请求数据。这个原理就是 src不受同源策略限制，会获取网站B响应的数据，而且会把这个数据当做JS文件来执行，所以，对于网站A来说，就是执行了test（data）函数。这个实现方式的重点就是网站B响应的数据是网站A中一段可执行的JS文件，这样网站A就可以处理来自网站B的数据了。
ajax自带jsonp属性实现跨域请求
jquery自带的ajax可以实现跨域请求，需求还是网站A中javascript向网站B请求数据。网站A中test.js的代码可以这样写：
$.ajax({
url:"www.BBB.com/index.php",
dataType:"jsonp",
jsonpCallback:"person",
success:function(data){
alert(data.name + " is a a" + data.sex);
}
});在网站B中有一个index.php文件：echo 'person(' . json_encode(array('name' => 'sunli', 'age' => '24')) . ')';这样就可以。需要注意的是：
（1）jsonpCallback属性如果不指定，那么会有个随机的函数名， index.php输出数据的时候应该是这样：
echo $_GET['callback'] . '(' . json_encode(array('name' => 'sunli', 'age' => '24')) . ')'; （2）我在实现jsonp的时候，没有填写jsonpCallback, 在index.php中也没有加入$_GET['calllback']这样的函数名，于是就遇到一个很大的错误，网站A依然可以请求到网站B的数据，但是，test.js文件中，success 响应函数没有执行到，我想了半天都没有想到，为什么浏览器成功响应了数据，但是success却没有执行，最后由老大指出了问题，就是我第一点说的，没有指定回调函数，就算数据返回过来了，也不会执行success.
作者：a23456789zxcvbnm 发表于2014-1-13 21:56:09 原文链接
阅读：100 评论：0 查看评论
相关 [javascript 分析] 推荐：
如何捕获和分析 JavaScript Error
- - IT技术博客大学习标签： Error. 前端工程师都知道 JavaScript 有基本的异常处理能力. 我们可以 throw new Error()，浏览器也会在我们调用 API 出错时抛出异常. 但估计绝大多数前端工程师都没考虑过收集这些异常信息. 反正只要 JavaScript 出错后刷新不复现，那用户就可以通过刷新解决问题，浏览器不会崩溃，当没有发生过好了.
Chrome开发者工具之JavaScript内存分析
- - 极客521 | 极客521内存泄漏是指计算机可用内存的逐渐减少. 当程序持续无法释放其使用的临时内存时就会发生. JavaScript的web应用也会经常遇到在原生应用程序中出现的内存相关的问题，如 泄漏和溢出，web应用也需要应对 垃圾回收停顿. 尽管JavaScript使用垃圾回收进行自动内存管理，但有效的(effective)内存管理依然很重要.
JavaScript 启动性能瓶颈分析与解决方案
- - SegmentFault 最新的文章JavaScript 启动性能瓶颈分析与解决方案 翻译自 Addy Osmani 的. JavaScript Start-up Performance，从属于笔者的 Web 前端入门与工程实践. 本文已获得原作者授权，为InfoQ中文站特供稿件，首发地址为 这里；如需转载，请与InfoQ中文站联系.
Javascript诞生记
- Milido - 阮一峰的网络日志二周前，我谈了一点Javascript的历史. 今天把这部分补全，从历史的角度，说明Javascript到底是如何设计出来的. 只有了解这段历史，才能明白Javascript为什么是现在的样子. 我依据的资料，主要是Brendan Eich的自述. "1994年，网景公司（Netscape）发布了Navigator浏览器0.9版.
JavaScript，你懂的
- dylan - keakon的涂鸦馆经常有人问我，JavaScript应该怎么学. 先学基本语法，如果曾学过C等语言，应该1小时内就能掌握了. 再去使用内置的函数、方法和DOM API，熟悉它能干什么；而在学习DOM API的过程中，你还不得不与HTML和CSS打交道. 然后弄懂匿名函数和闭包，学会至少一个常用的JavaScript库（例如jQuery）.
Javascript 里跑Linux
- rockmaple - Shellex's Blog牛逼到暴的大拿 Fabrice Bellard，用Javascript实现了一个x86 PC 模拟器，然后成功在这个模拟器里面跑Linux（请用Firefox 4 / Google Chrome 11打开，Chome 12有BUG）. 关于这个东西… 伊说 “I did it for fun“，大大啊大大啊….
高效 JavaScript
- xtps - ITeye论坛最新讨论传统上，网页中不会有大量的脚本，至少脚本很少会影响网页的性能. 但随着网页越来越像 Web 应用程序，脚本的效率对网页性能影响越来越大. 而且使用 Web 技术开发的应用程序现在越来越多，因此提高脚本的性能变得很重要. 对于桌面应用程序，通常使用编译器将源代码转换为二进制程序. 编译器可以花费大量时间优化最终二进制程序的效率.
你得学JavaScript
- 蒋冰 - 伯乐在线 -博客 注：本文由 敏捷翻译 - 蒋少雄 翻译自 Kenny Meyers 的博文. 如果三年前你问我应该学什么语言，我会告诉你是Ruby. 如果你现在想学一门语言的话，你应该学习JavaScript.. 我认为，每一位Web开发人员都应该学习JavaScript. 目前推出的许多新技术都支持这个观点.
javascript 贪食蛇
- Xin - 博客园-首页原创精华区我的程序用javascript与Html中的table结合，实现的简单的贪食蛇游戏，游戏的主要特点，可调整蛇移动速度，可调整蛇移动范围，碰壁、咬到身体则“Game Over. 游戏并不完善，只是实现了主要的功用，有设计不合理的地方，欢迎您感大家提意见. 实现方法：由javascript语言中的setInterval方法驱动整个游戏程序，设置“nowDirection”即蛇的当前移动方向为全局变量，由setInterval方法定时获取蛇的移动方向，由document.onkeydown()捕捉当前按键（上、下、左、右）以修改nowDirection，这样就可以用方向按键控制蛇周期时间的定向移动.