jQuery 調用jsonp實現與原理

時間 2019-11-06

原文原文鏈接

經過jQuery實現JSONP

通常的ajax是不能跨域請求的，所以須要使用一種特別的方式來實現跨域，其中的原理是利用 <script> 元素的這個開放策略，具體後面談。
javascript

1.客戶端代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" >
 <head>
     <title>JSIONP TEST</title>
      <script type="text/javascript" src="jquery.min.js"></script>
      <script type="text/javascript">
     jQuery(document).ready(function(){ 
        $.ajax({
             type: "get",
             url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
             dataType: "jsonp",
             jsonp: "callback",
             jsonpCallback:"jsonpCallback",
             success: function(json){
                 alert('json:' + json);
             },
             error: function(){
                 alert('fail');
             }
         });
     });
     </script>
     </head>
  <body>
  </body>
 </html>

jsonpcss
類型: Stringhtml
在一個jsonp請求中重寫回調函數的名字。這個值用來替代在"callback=?"這種GET或POST請求中URL參數裏的"callback"部分，好比{jsonp:'onJsonPLoad'}會致使將"onJsonPLoad=?"傳給服務器。在jQuery 1.5，，設置jsonp選項爲false，阻止了jQuery從加入"?callback"字符串的URL或試圖使用"=?"轉換。在這種狀況下，你也應該明確設置jsonpCallback設置。例如, { jsonp: false, jsonpCallback: "callbackName" }前端

jsonpCallbackjava
類型: String, Functionjquery
爲jsonp請求指定一個回調函數名。這個值將用來取代jQuery自動生成的隨機函數名。這主要用來讓jQuery生成一個獨特的函數名，這樣管理請求更容易，也能方便地提供回調函數和錯誤處理。你也能夠在想讓瀏覽器緩存GET請求的時候，指定這個回調函數名。從jQuery 1.5開始，你也可使用一個函數做爲該參數設置，在這種狀況下，該函數的返回值就是jsonpCallback的結果。ajax

2.服務器端

public void doGet(HttpServletRequest req, HttpServletResponse res)
throws ServletException, RemoteException, IOException{
doPost(req, res);
}
public void doPost(HttpServletRequest req, HttpServletResponse res)
throws ServletException, IOException {
    res.setContentType("text/javascript; charset=UTF-8");//jsonp其實回寫的就是一段JavaScript代碼
    String functionName= req.getParameter("callback");//得到回調函數名字
    PrintWriter out = res.getWriter();            
    out.print(String.formate("%s({'value': '001', 'text': 'show 001'})", functionName));
    //jsonpCallback({'value': '001', 'text': 'show 001'}) 寫到前端的結果,相似一個函數被調用的形式
    out.flush();
            out.close();
   }

JSONP原理

咱們不能從不一樣的服務器ajax數據，可是<script>就能夠作到，咱們在本地寫一個函數，而後在遠端引入的這個js文件對這個函數進行了調用，在調用過程當中能夠傳遞參數，這樣子的一個過程就是jsonp
本地服務器 localhost
json

<script type="text/javascript">    var localFunction = function(data){
        alert('我是本地函數，能夠被跨域的remote.js文件調用，遠程js帶來的數據是：'+ data.result);
};
</script> 
<script type="text/javascript" src="http://remoteserver.com/remote.js">
//remote.js 其實就一句話  localFunction({"result":"我是遠程js帶來的數據"});，在瀏覽器加載完成以後，遠端loading過來的這個文件能夠執行本地的JavaScript代碼，裏面能夠攜帶數據，不過須要有一個函數名做爲媒介
</script>

最後看到的結果就是
api

參考：
http://zh.wikipedia.org/wiki/JSONP
http://www.css88.com/jqapi-1.9/jQuery.ajax/
跨域