javascript 遵循同源策略，一般不支持跨域訪問數據，但有時候我們需要進行跨域獲取數據，這時候我們就可以通過script標簽的特性來進行跨域獲取數據。
/*
* 全局變量在局部可以調用，但是局部變量在全局無法調用
* */
/*
* 1.script標簽可以獲取非本服務器的內容
* 2.加載的內容，會直接執(zhí)行
* 百度：https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=h&cb=jQuery110206284093848166905_1470127107499
* */
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="txt1" />
</body>
<script type="text/javascript">
* 百度：https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=h&cb=jQuery110206284093848166905_1470127107499
* */
</script>
<script src="jsonp.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var txt1 = document.getElementById("txt1");
txt1.oninput = function (){
var txtValue = this.value;
var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su";
var data = {
wd:txtValue
}
jsonp(url,data,function (json){
console.log(json);
});
}
</script>
</html>
上面實現了輸入框輸入內容后返回百度api獲取的數據，其中jsonp()為我們包裝的函數，
var jsonpScriptObj = null;
function toData(obj){
if (obj == null){
return obj;
}
var arr = [];
for (var i in obj){
var str = i+"="+obj[i];
arr.push(str);
}
return arr.join("&");
}
function jsonp(url,data,succ){
//1.不重樣的函數名
var fnName = "jsonp"+String(Math.random()).replace("0.","")+"_"+new Date().getTime();
//將傳遞過來的成功回調函數命名為fnName并添加到全局里面
window[fnName] = succ;
data.cb = fnName;
var url = url+"?"+toData(data);
if (jsonpScriptObj){
document.getElementsByTagName("head")[0].removeChild(jsonpScriptObj);
}
jsonpScriptObj = document.createElement("script");
jsonpScriptObj.src = url;
document.getElementsByTagName("head")[0].appendChild(jsonpScriptObj);
}
在jsonp()中我們傳進來三個參數，第一個為百度api 第二個為前端輸入框輸入的值，第三個為返回數據的回調函數。
首先我們生成一個不重復的函數名，然后把該函數名給傳進來的函數參數賦值(這樣我們就可以在前端獲取到返回來的對象)，而且這個函數一定是全局的(因為函數實際上是在script標簽中調用的，如果該函數不是全局的則script訪問不到)。之后我們把該生成的函數名作為一個屬性賦值給data，這時候data對象里存儲著wd和cb，將該data對象通過toData()函數格式化為規(guī)定的格式，再將生成的url傳遞給新生成的script標簽的src屬性，這樣我們就可以在回調函數中訪問到返回的數據，實現跨域訪問數據。
注意：script標簽只能返回一次數據，我們要訪問多次就需要多次生成script標簽，生成的過程中要將不用的script標簽刪除掉。
參考文檔：
http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html
