jsonp原理

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>