一、介紹
最近跨域問題比較多，而且自己剛好也看到這一塊，就總結了一下，關于JSONP的東西百度的話東西確實很多，很多人都是復制別人的，如此下去，其實找的資料就那么幾份，關鍵是我還看不懂，可能是能力問題吧，自己經過很多嘗試，所以總結了一下，終究還是弄懂了皮毛。注意一點是，這里是用Jsonp解決ajax的跨域問題，具體的實現其實不是ajax。
1、同源策略
瀏覽器有一個很重要的概念——同源策略(Same-Origin Policy)。所謂同源是指，域名，協議，端口相同。不同源的客戶端腳本(JavaScript、ActionScript)在沒明確授權的情況下，不能讀寫對方的資源。
2、JSONP
JSONP（JSON with Padding）是JSON的一種”使用模式”，可用于解決主流瀏覽器的跨域數據訪問的問題。由于同源策略，一般來說位于 server1.example.com 的網頁無法與不是 server1.example.com的服務器溝通，而 HTML 的script 元素是一個例外。利用 <script> 元素的這個開放策略，網頁可以得到從其他來源動態產生的 JSON 資料，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料并不是 JSON，而是任意的JavaScript，用 JavaScript 直譯器執行而不是用 JSON 解析器解析。
二、實踐
1、模擬跨域請求
在本機弄兩個tomcat，端口分別為8080,8888，也就滿足了非同源的條件，那么要是從一個端口發送ajax去獲取另外一個端口的數據，那么肯定會報跨域請求問題。
這里有兩個項目，分別是jsonp（8080），other（8888），在jsonp項目中index.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><title>Insert title here</title><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript">function jsonp_fun(){$.ajax({url:'http://localhost:8888/other/index.jsp',type:'post',dataType:'text',success:function(data){console.log(data);}});}</script></head><body><input type="button" value="jsonp" onclick="jsonp_fun()"/></body></html>other（8888）項目中index.jsp如下：// 因為jsp實際就是servlet，這里就用jsp代替servlet演示。
<%@ 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><title>Insert title here</title><script type="text/javascript" src="js/jquery.min.js"></script></head><body>other domain</body></html>
新聞熱點
疑難解答
圖片精選
