小皮球，下脚踢，马莲开花JSONP

简单直白的实现jsonp

昨天和小伙伴聊天，聊到ajax和jsonp，网上关于jsonp的原理文章很多，但是因为jquery的封装，好多人以为ajax和jsonp是一回事，那么他们有什么不同呢？时间宝贵，我们用简短的方式了解一下jsonp。

一个get请求的样子

正常的一个get请求是通过创建XHR对象，调用XHR对象的open、send、onreadystatechange方法来完成一次请求。

    var XHR=new XMLHttpRequest();//创建实例
    //启动
    XHR.open("GET","test1.txt",true);
    //发送
    XHR.send();
    //监听执行状态
    XHR.onreadystatechange=function()
    {
        //状态判断
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            // responseText：响应数据、readyState：响应状态、status：响应状态码
            document.getElementById("myDiv").innerHTML=XHR.responseText;
        }
    }复制代码

jsonp是怎么实现的?

• 不是XHR对象：jsonp并不调用XHR，而且和XHR没什么关系，是为了实现跨域，而衍生出来的一个野路子（相对于XHR），如今已经已被大家广泛使用，相信看完这个你也就知道为什么jquery封装的jsonp不能设置同步了。

• 实现原理

  1. 创建script标签，插入到页面，引入js文件。
  2. js文件加载完成后执行引入的js文件方法，并且return数据。

直白的展示

data.js为需要请求引入的js文件

//data.js
function data(){
    return 'hello'
};复制代码

index.html

<script src="data.js"></script>
<script>
    var value = data();
    alert(value);//弹出hello
</script>复制代码

自己来写一个jsonp

原理我们清楚以后，实现起来就简单了，无非就是封装一个方法，把文件地址、回调名称、回调函数封装一下。

data.js

//具体方法名可让后台接收入参并且给你拼接出方法名`
function data(){
    return 'hello'
};复制代码

index.html

<script>
function jsonp(src,callbackName,fn){//构造函数， src:js地址，callbackName:回调名称，fn:回调方法
    // 创建script标签
    var El = document.createElement('script');
    // 设置src属性为地址
    El.setAttribute('src',src);
    // 插入到body中
    document.body.appendChild(El);
    El.onload= function(){ // 加载完成回调
        var cbFneval = eval(callbackName); // 根据callbackName入参字符串转换成可执行函数
        var value = cbFneval(); // 执行callbackName()，获得返回的相应数据
        fn(value); // 执行回调方法并传入数据
        document.body.removeChild(El) //移除script标签
    }; 
};

// 执行jsonp方法
jsonp('data.js','data',function(data){
    alert(data);
});
</script>复制代码

---

本文对你有帮助？欢迎扫码加入前端学习小组微信群：