封装一个JSONP方法

来源：互联网发布：矩阵理论张绍飞编辑：程序博客网时间：2024/05/22 12:26

jsonp实现跨域的原理：
+ 浏览器请求外部的javascript是不受同源策略限制的
+ 我们伪造一个script标签，并把请求后太数据的url复制到script标签的src属性上
+ 将script节点添加到html文档中，浏览器会自动发出请求

jsonp应该注意这一点：自己伪造的javascript请求,浏览器拿到后会把它当做js代码执行，所以使用jsonp后台返回的应该是一段js代码，在实际应用中往往是一个函数调用】

例子：
例如我们可能伪造这么一个链接去请求/getUserList接口，这时我们跟后台约定了一个参数callback

<script src="http:localhost:7000/getUserList?callback=print"></script>

后台在接收到jsonp请求时，返回的应该是一段js代码，所以与常规接口调用不同，后台在组织好数据之后，还应该将其封装到回调函数里面，所以后台可能会有下面的代码：

var callback = req.query.callbackvar user = {name:'wang',mail:'2252009032@qq.com'}var result = callback + '(' + JSON.stringify(user) + ')' res.send(result)

所以最后浏览器收到的数据为：

print({name:'wang',mail:'2252009032@qq.com'})

这是一段js代码，这里使用的print函数是已经定义好了的······

解释完jsonp，这里自己封装了一下：

  function myCallback(data) {    console.log(data)  }  function jsonp(url, data, callback) {    if (typeof data == 'string') {      callback = data      data = {}    }    var hasParams = url.indexOf('?')    url += hasParams ? '&' : '?' + 'callback=' + callback    var params    for (var i in data) {      params += '&' + i + '=' + data[i]    }    url += params    var script = document.createElement('script')    script.setAttribute('src', url)    document.querySelector('head').appendChild(script)  }  jsonp('http://baidu.com',{id:34},'myCallback')

0 0