封装一个JSONP方法

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.callback
var user = {name:'wang',mail:'[email protected]'}
var result = callback + '(' + JSON.stringify(user) + ')' 
res.send(result)

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

print({name:'wang',mail:'[email protected]'})

这是一段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')