jsonp与ajax是两种截然不同的请求方式，了解它们的原理，我们先了解什么是跨域。跨域请求顾名思义就是请求超过自身域名空间的资源。举个例子，假如a.com的首页index.html页面里有一段js:
<script>
// jquery写法
$.ajax({
Url: “http://b.com/getUserInfo”,
Method: “post”,
data: {
userId: “001”
},
success: function(res) {
console.info(res)
},
error: function(e) {
console.error(e)
}
})
</script>
当你进入a.com/index.html，这段js开始执行，结果是报错的，因为你当前的域名空间呢是a.com，而你去请求b.com的用户数据，跨域了，浏览器由于安全限制是不允许js去请求跨域的数据(要是运行，那银行卡的用户数据不就也可以请求了)。
但是其实很多时候，我们需要跨域请求，有两种方式，1种是代理（下次介绍node做获取音乐数据），另外一种是用jsonp。细心的程序员发现<script> <img><a>这一类的节点的src属性不受域名限制，还是那个例子:
<html>
<head>
<script src=”http://b.com/getUserInfo”><!--改成用script标签请求刚才的接口-->
</head>
<body><body>
</html>
script标签可以请求到的getUserInfo接口返回的文本数据，其实就是跟你引入jquery用了官网提供的cdn链接是一样的
利用这个方式，我们可以这么写:
a域名下的 index.html:
<script src =” b.com/getUserInfo?calk_back=’printer’ ”>
<script>
var printer= function(data) {
console.info(data)
}
</script>
b.com 域名下的getUserInfo接口返回文本：
printer("我是data")
上面一访问 a.com/index.html,结果控制台就会打印: 我是data
calk_back 参数名是前后端约定好的，后端根据这个参数的值printer，返回 printer（data），这样就把data传入到 printer函数中
// 所以
<script src =” b.com/getData?call_back=printer”>
// 等于下面
<script>
printer(‘哈哈哈’)； // data 是哈哈哈
</script>
而Ajax的底层是用XmlHttprequest类来实现异步请求(不刷新页面就可以获得响应数据)，所以不能跨域，其原理为：
var request = new XmlHttprequest()
request.open(‘GET’, url, false) //fasle 说明这个是个异步请求
//下面指定回调函数
request.onreadystatechange = function(success_cb, error_cb){
// cb只是jquery指定进来的
if ( request.readyState == 4 && request.status == 200 ) {
success_cb( xhr.responseText );
} else {
error_cb( xhr.statusText );
}
}
jＱuery就是帮我们封装成 $.ajax的工具来使用，各大浏览器为了安全，限制js跨域，所以ajax是不可以跨域的。Ajax由于太好用，已经成为业界的标准，由H5出来后，w3c也为此对Xmlhttprequest 提出出标准化,对xmlhttprequest增加新特性
- 可以设置HTTP请求的时限。
- 可以使用FormData对象管理表单数据(H5 formdata)。
- 可以上传文件。
- 可以请求不同域名下的数据（跨域请求，需要浏览器同意）。
- 可以获取服务器端的二进制数据。
- 可以获得数据传输的进度信息。
大家可以看一下阮一峰大神的介绍: http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html
现在，我们直接来封装一个工具myRequest，能够提供 jsonp与ajax两种请求方式的工具
大家直接看代码吧（图片比代码块直观哈）：
提供get、post两个方法
起一个node 服务：
访问http://localhost:3000/, 返回index.html
当他去请求百度的东西，就跨域了
再来看看jsonp方法
我们拿QQ的接口来对看jsonp方法的执行结果：
结果：jsonp获取到数据
下一篇：《Ajax 文件上传下载》
备注：等写好把代码链接贴出来
