细说JSONP与Ajax的区别

jsonp与ajax是两种截然不同的请求方式，了解它们的原理，我们先了解什么是跨域。跨域请求顾名思义就是请求超过自身域名空间的资源。举个例子，假如a.com的首页index.html页面里有一段js:

当你进入a.com/index.html，这段js开始执行，结果是报错的，因为你当前的域名空间呢是a.com，而你去请求b.com的用户数据，跨域了，浏览器由于安全限制是不允许js去请求跨域的数据(要是运行，那银行卡的用户数据不就也可以请求了)。
但是其实很多时候，我们需要跨域请求，有两种方式，1种是代理（下次介绍node做获取音乐数据），另外一种是用jsonp。细心的程序员发现

b.com 域名下的getUserInfo接口返回文本：
printer("我是data")

上面一访问 a.com/index.html,结果控制台就会打印: 我是data

calk_back 参数名是前后端约定好的，后端根据这个参数的值printer，返回 printer（data），这样就把data传入到 printer函数中

// 所以

而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两种请求方式的工具
大家直接看代码吧（图片比代码块直观哈）：