瀏覽器同源政策--阮一峰
瀏覽器跨域訪問解決方案
JSONP（JSON with Padding）净当，用來解決跨域問題的另一種解決方案，需要服務(wù)器端的支持。
模擬JSONP原理
jsp
把jsp函數(shù)執(zhí)行
使用?號代替方法名
代碼具體實(shí)現(xiàn)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="btn">JSONP</button>
<script src="/static/js/jquery-1.11.3.min.js"></script>
<script>
$(function(){
$("#btn").click(function(){
$.getJSON("/jsonp?method=?").done(function(data){
alert(data.username + " -> " + data.address);
}).error(function(){
alert("服務(wù)器異常");
});
});
});
</script>
<%--<script>
function callback(user) {
alert("hello," + user.username);
}
</script>
<script src="/jsonp?method=callback"></script>--%>
</body>
</html>
package com.kaishengit.web;
import com.google.gson.Gson;
import com.kaishengit.entity.User;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/jsonp")
public class JSONPServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String method = req.getParameter("method");
User user = new User(1001,"Jack","北京");
String json = new Gson().toJson(user);
resp.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=UTF-8");
PrintWriter out = resp.getWriter();
out.print(method + "("+json+")"); // callback({id:xx,username:xxx})
out.flush();
out.close();
}
}
有道
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" id="word"> <button id="btn">翻譯</button>
<div id="result"></div>
<script src="/static/js/jquery-1.11.3.min.js"></script>
<script>
$(function(){
$("#btn").click(function () {
$("#result").html("");
var word = $("#word").val();
var url = "http://fanyi.youdao.com/openapi.do?keyfrom=*****************&key=1587754017&type=data&doctype=jsonp&callback=?&version=1.1&q="+word;
$.getJSON(url).done(function(data){
var array = data.basic.explains;
for(var i =0;i< array.length;i++) {
$("<p></p>").text(array[i]).appendTo($("#result"));
}
}).error(function(){
alert("服務(wù)器異常");
});
});
});
</script>
</body>
</html>
