jsonp的原理一共就是三步
1.现在文档准备好一个处理数据函数的声明
2.创建一个script脚本,并把数据资源的url为它的src属性赋值
3.发送请求
4.(这一步是后端的事情)
<script type="text/javascript">
//我先声明一个处理数据的函数
function iWantDo(data){
// data是我从服务器拿到的数据 这个data是字符串,先将他转化成对象
// 需要注意的是 1.data的某个value内部含有英文引号需要自己处理,我这里没处理
var result = null
try{
result = JSON.parse(data)
}catch(e){
throw e
}
// 现在result变成了对象然后拿着它进行操作
// 这里我们拿到json数据就可以做任何事情 ...
}
// url:资源的地址 callback:处理数据的函数名,你想用哪个函数处理数据就带哪个函数名
// (这里我没有对callback参数为匿名函数的情况做处理,如果是匿名函数,你可以给它去一个名字(最好是哈希)
// 比如:var name = callback+(new Date().getTime());this[name] = callback)
function getJSON(url,callback){
// 为函数准备一个取函数名的正则表达式
var reg = /(?:function\s+)([a-z|A-Z|_][a-z|A-Z|0-9|_]*)(?:\s*\()/
var callbackString = typeof callback ==="String"?callback:callback.toString().match(reg)[1]
//现在我已经准备好了完整的uri地址
var uri = url.indexOf('?')===-1?url+'?'+"callback="+callbackString:url+'&'+"callback="+callbackString
// 创建一个script标签,并为它的src属性赋值,此时的获取过程为异步
var script = document.createElement('script')
script.src = uri
var headEl = document.getElementsByTagName("head")
// headEl.appendChild(script)的返回值为:我刚才创建的script标签
headEl.appendChild(script).parentElement.removeChild(script)
// 虽然我立刻将script标签删除了,但是该脚本依然会获得并执行一次
// 服务器 应该返回的是一个字符串:"callbackString(Json数据)"
// callbackString(Json数据) 中的callbackString是我传给服务器的函数名,服务器可以通过url参数获得
// 并用callbackString将json数据包裹,然后返回
}
//现在我可以调用getJSON获得我想要的数据了
getJSON("http://xxxxxx/api",iWantDo)
</script>