jquery jsonp的請求數據:
$.Ajax({ dataType : "JSONP", jsonp : "callback",//請求自動帶上callback參數,callback值為jsonpCallback的值 jsonpCallback : "test1",//接口服務器應該返回字符串數據格式:test1(JSON數據) type : "POST", url : "http://www.xiuye.com/josnp.do",//接口服務器地址 data : { /* user : "xiuye" */ },//請求數據 success : function(response) { //成功執行 console.log(response); //alert("jsonp OK"); }, error : function(e) { //失敗執行 alert(e.status + ',' + e.statusText); } });服務器端傳回的數據實際上是字符串:test1(json數據)瀏覽器得到 : json數據這個過程中callback的test1是什么?
test1可能是個函數,函數定義是用eval定義的:
eval("function " + callback + "{...}");注:callback = "test1"然后test1的函數就定義成功了
==================跨域請求==================
標簽script的src屬性可以請求任何地址.
jsonp:
先動態的定義新的callback函數test1
eval("function test1{...}");請求數據
<script src="http://www.xiuye.com/josnp.do?callback=test1"></script>server得到callback的參數,返回字符串:"test1(json數據)"瀏覽器的script得到數據后就執行js代碼:test1(json數據)這樣json數據就可以通過全局變量或者其他方式拿到手了.動手實踐:
前端js代碼:
<script type="text/javascript" src="js/jquery-2.1.4.js"></script><script type="text/Javascript"> var a = null; function test(callback) { console.log("execute test ..."); window.eval("function " + callback + "(data){a = data;alert('jsonp callback 函數已經執行了!')}"); var s = document.createElement("script"); s.src = "http://www.xiuye.com/josnp.do?callback=" + callback + "&_=" + Math.random(); document.body.appendChild(s); console.log(s); } $(function(){ test("test1"); console.log("global a = " + a); });</script>服務器java代碼返回json數據(用了jsonp框架才出現下面的樣子,直接返回數據):public String test1(){ return "{msg : 'json no parameter'}"; }結果:
新聞熱點
疑難解答