天天看點

ajax跨域請求jsonp

先來說明以下jsonp的請求原理:jsonp的原理其實就是在用戶端動态添加一條<script>标簽,而<script>标簽的src屬性是沒有域限制的,是以與ajax 的xmlhttprequest協定無關。

而jsonp請求隻有get,沒有post

下面我們來看執行個體:

用戶端:

$.ajax({
            type:"GET",
            url:'...',
            data:{ ...},
            dataType:'jsonp',
            jsonp:'jsoncallback',  // 回調函數,回調函數名有浏覽器動态生成
            success:function(data){
            	console.log(data);
            }
        });
           

伺服器端:

response.setHeader("Access-Control-Allow-Origin","*");  // *表示所有域都可以請求
String callbackname = request.getAttribute("jsoncallback"); // 擷取回調函數
String data = "Hello World";  // 模拟資料
String result = callbackname + "(" + data + ")";  // 固定格式,封裝成一個js函數,函數名就是回調函數名
response.getWriter().print(result);
           

上述就是一個完整的jsonp響應過程,不過隻接受type="GET"的請求,即使你在伺服器端加了 response.setHeader("Access-Control-Allow-Methods","GET,POST");實際請求方式還是get。

接下去我們再說一下jsonp的具體請求過程:

首先在用戶端注冊一個callback (如:'jsoncallback'), 然後把callback的函數名(有浏覽器動态生成,如jsonp123456)傳給伺服器。注意:服務端得到callback的數值後,要用jsonp123456(......)把将要輸出的json内容包括起來,此時,伺服器生成 json 資料才能被用戶端正确接收。

然後以 javascript 文法的方式,生成一個function, function 名字就是callback函數名,如jsonp123456,然後将資料已參數的方式傳入success函數中,最後輸出。