封装原生jsonp请求

如有错误，欢迎指正

看这篇文章的小伙伴应该已经了解了最基本的jsonp请求了，如果不了解，请查看我另一篇文章。或者百度一下。

这里直接上封装代码：

html代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="dv"></div>
    <script>
        function jsonp(obj) {
            //写入url地址中的函数名称，动态创建
            var callbackName = 'jsonp_callback_' + Date.now() + Math.random().toString().substr(2, 5);
            
            //创建一个script标签
            var scriptObj = document.createElement("script");
            
            obj.parames = obj.parames || '';
            if (typeof obj.parames == 'object') {
                var arr = new Array();
                for (var key in obj.parames) {
                    arr.push(key + '=' + obj.parames[key])
                }
                obj.parames = arr.join('&');
            }
            //设置标签的请求路径
            //像这样：http://localhost:3000/api?callback=jsonp_callback_153498520409635392&id=1
            scriptObj.src = obj.url + '?' + 'callback=' + callbackName + '&' + obj.parames;

            //将创建好的带请求的script标签添加到html的body中
            document.body.appendChild(scriptObj);

            //这里必须这样写window[callbackName];
            //如果写window.callbackName会报错没有定义
            window[callbackName] = function (res) {
                obj.success(res);
                //删除的时候可以这样写
                //由于请求一次会创建一个script标签和一个函数，所以每次获取到结果后就删除
                delete window.callbackName;
                document.body.removeChild(scriptObj);
            }
        }
    </script>
    <script>
        jsonp({
            //请求地址
            url:'http://localhost:3000/api',
            //请求参数，对象
            parames:{
                id: 1
            },
            //成功回调
            success:function (res) {
                console.log(res)
            }
        })
    </script>
</body>

</html>

后端express代码：

var express = require("express")
var app = express()

// app.all('*', function (req, res, next) {
//     //设置跨域
//     res.header("Access-Control-Allow-Origin", "*");
//     next();//不能省略
// })
app.get('/api', function (req, res) {
    var data={
        name: "王八",
        age: 100
    }
    //返回的类型必须设置为javascript
    res.type('text/javascript')
    //前端路由中的参数获取，req.query。
    console.log("query",req.query);
    res.send(req.query.callback+'(' +JSON.stringify(data)+')')
    //这里的数据必须转化为字符串，否则传入一个对象浏览器无法解析
    // res.send(req.query.callback+'(' +data+')')
})
app.listen(3000)
console.log("listen the port 3000");

如果感觉原生太复杂的，可以查看jquery官方封装的ajax中封装的jsonp请求。

封装原生jsonp请求

猜你喜欢