我的前端故事----Ajax方式和jsonp的实现区别

很久没有更新博客了，毕业2个月了，这段时间一直在忙于工作，一直没有时间更新，最近做的活动突然发现之前的经验居然忘记了。。。索性想想还是重新开始用博客记录平日里的工作经验吧，吐槽就到这里了，这篇记录的是我在平日里经常用到的请求后端的方式。

大多数情况下，无论是框架还是自己实现都是通过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();
    };
}

太久没有记录了。。。已经忘记了太多了，这篇就先简单的记录一点点吧，逐渐再恢复常写博客的习惯了~~

最后祝大家中秋节快乐~<(￣▽￣)> ~~