Ajax和jsonp区别

       大多数状况下，不管是框架仍是本身实现都是经过Ajax的方式来向后端请求数据的，而Ajax之间是经过传输json格式的文件来进行数据的传输的，你们对Ajax也很熟悉了，那么为何我又要使用jsonp呢？这就要从什么是jsonp，什么是json来讲一说了。

       json是一种格式，而jsonp是一种调用方式，那么在你们都使用Ajax的状况下为何我不用呢？由于Ajax做为脚本出于安全的考虑，是不容许访问非同源的内容的。那么若是个人前端活动页面和后端的服务器不在一个域名下该如何请求数据呢？这个时候就须要jsonp的方式来解决跨域的问题了。

       那么为何jsonp能够跨域呢？其中的原理又是什么呢？咱们下面就来介绍一下jsonp跨域的原理。

       由于同源策略的的缘由，对于一个浏览器的页面只有来自一个源的脚本才能够被执行，这样的目的是为了安全性，但是却阻止了数据的请求，因此咱们就要从绕开同源策略来入手，什么状况下容许跨域请求呢？那就是静态资源！静态资源是不受域策略限制的，能够加载任意域的脚本、样式、图片等静态资源，JSOP就是利用这种原理来实现跨域获取数据的。

咱们将须要的json数据放在js文件中进行传输，这样就能够将须要的数据经过静态文件的形式传过来了，那么咱们就来说讲具体是如何实现的呢？

       因为是静态文件，因此咱们在请求的时候首先须要创建一个静态资源的DOM元素，例如这样的标签：

<script src="http://cdn.bootcss.com/zepto/1.1.6/zepto.min.js"></script>

       那么咱们就来一步步的构建这个DOM标签吧，首先经过document.createElement(‘script’);来创建一个script标签，而后设置它的src属性指向须要请求的URL地址，而后将这个元素添加在body中，最后出于安全咱们要将刚刚新建的标签在完成请求后删除掉。

       在这里我把我写的一个封装好的函数贴出来，很简单的一个函数就说明了一切~

/*
 * Created by jonnyf on 15-9-15.
 * 这个函数是经过JSONP的方式请求后端接口
 * 须要传入三个参数，
 * url为请求的接口地址，类型为字符串
 * parameter为请求的参数对象，类型为对象
 * callback为完成请求后的回调函数名称， 类型为字符串
 */

function getJSONP(url, parameter, callback) {
    var Script = document.createElement('script'),
        _parameter = parameter,
        _url = url,
        _callback = callback,
        code = '';
    for (var i in _parameter) {
        code += i + '=' + _parameter[i] + '&'
    }
    Script.src = _url + '?' + code + 'callback=' + _callback;
    document.body.appendChild(Script);
    Script.onload = function(){   //  请求成功后移除标签
            Script.remove();
        }
    Script.onerror = function() {   //  失败的时候也要移除标签
         alert('请求错误, 请重试');
        Script.remove();
    };
}

     总结：ajax的核心是经过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。