首先我们应该知道ajax和jsonp可以与后台通信，获取数据和信息，但是又不用刷新整个页面，实现页面的局部刷新。
接下来我们就来看一下ajax和jsonp的区别。
ajax和jsonp的区别：
ajax是一种发送http请求与后台进行异步通讯的技术。其原理是实例化xmlhttp对象，使用此对象与后台通信。
一个完整的AJAX请求一般包括以下步骤：
（1）实例化XMLHttpRequest对象
（2）连接服务器
（3）发送请求
（4）接收响应数据
jsonp是一种可以实现跨域发送http请求的数据通信格式，可以嵌在ajax中使用。其原理是利用script标签可以跨域链接资源的特性。
JSONP由两部分组成：回调函数和数据，回调函数一般是在浏览器控制，作为参数发往服务器端（当然，你也可以固定回调函数的名字，但客户端和服务器端的名称一定要一致）。当服务器响应时，服务器端就会把该函数和数据拼成字符串返回。
JSONP的请求过程如下：
请求阶段：浏览器创建一个 script 标签，并给其src 赋值。
发送请求：当给script的src赋值时，浏览器就会发起一个请求。
数据响应：服务端将要返回的数据作为参数和函数名称拼接在一起(格式类似”jsonpCallback({name: 'abc'})”)返回。当浏览器接收到了响应数据，由于发起请求的是 script，所以相当于直接调用 jsonpCallback 方法，并且传入了一个参数。
最后：jsonp只支持get请求，ajax支持get和post请求。
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增加新特性
现在，我们直接来封装一个工具myRequest，能够提供 jsonp与ajax两种请求方式的工具
大家直接看代码吧（图片比代码块直观哈）：
