跨越請求
1.1什么是跨域（兩個不同系統之間的訪問、調用）
（1）域名不同，即兩個不同的應用。
（2）域名相同，但是端口不同，即同一個應用中的不同子系統。
1.2 Ajax跨域請求的缺陷
（1）創建testJsonp.jsp頁面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="/js/jquery-1.6.4.js"></script> <title>Insert title here</title> </head> <body> <textarea id="text" style="width: 1200px; height: 200px;"></textarea> <input type="button" value="測試異步跨越" onclick="testajax()" /> <script type="text/javascript"> function testajax(){ $.ajax({ url:"http://localhost:8081/category.json", type: "GET", success: function (data) { $("#text").val(JSON.stringify(data)); } }); } </script> </body> </html>
1.3測試Ajax跨越
測試發現，Ajax跨越請求失敗了。
解決方案：jsonp跨域
在前面的測試中，我們發現Ajax跨越請求時，json數據被瀏覽器禁用了。
原因：瀏覽器禁止遠程加載Json數據。（瀏覽器安全機制）
如何解決呢？
答：使用Jsonp方式。
2.1Jsonp原理
2.1.1Jsonp 實現的前提：
瀏覽器允許跨越加載同源數據。
即在JavaScript腳本中發送請求，就可以遠程加載js格式數據。
2.1.2請求原理：
（1）異步請求的時候，加上一個名為callback的回調函數
（2）在接口中，將返回的json格式數據，偽裝成js腳本格式。
（3）得到js格式數據后，提取里面的json數據。
2.2 修改testJsonp.jsp，指定異步請求為jsonp方式。
<script type="text/javascript"> function testajax(){ $.ajax({ url:"http://localhost:8081/category.json", type: "GET", dataType: "jsonp", //jsonp請求 jsonp:"callbackFunction", //請求參數名 jsonpCallback:"showData", //回調函數名稱 success: function (data) { $("#text").val(JSON.stringify(data)); } }); } </script>
2.3修改category.json文件，將返回數據包裝成js腳本。
2.4 再次發送ajax異步請求，使用jsonp方式
結論：
（1）jsonp是ajax技術中的一種異步請求方式。
（2）jsonp能實現跨越請求。
（3）jsonp跨越時，需要指定一個回調函數，並使用該函數將返回的數據偽裝成js腳本。
（4）獲取返回的js腳本后，jsonp自動提取其中的json數據。