Jsonpの実現

6235 ワード

JavaScript

ブラウザの「同ソースポリシー」のため、jsスクリプトは同ソース(同じプロトコル、ドメイン名、ポート)のリソースのみを呼び出すことができます.しかし、さまざまなドメインでjsスクリプトファイルをページに導入することは可能です.jsopはこの特性を利用して実現されます.例は以下の通りです.WebプロジェクトのDemo-1

package com.zzs.jsonp;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSONObject;

public class JsonpServlet extends HttpServlet{

    /**
     * 
     */
    private static final long serialVersionUID = 1L;

    @Override
    public void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    public void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
         try {  
                resp.setContentType("text/plain");  
                resp.setHeader("Pragma", "No-cache");  
                resp.setHeader("Cache-Control", "no-cache");  
                resp.setDateHeader("Expires", 0);  
                PrintWriter out = resp.getWriter();       
                JSONObject resultJSON = new JSONObject();
                resultJSON.put("result", "Hello");
                String jsonpCallback = req.getParameter("jsonpCallback");//         
                out.println(jsonpCallback+"("+resultJSON.toJSONString()+")");//  jsonp      
                out.flush();  
                out.close();  
              } catch (IOException e) {  
               e.printStackTrace();  
              }  
    }
}

WebプロジェクトのDemo-2

"java" import="java.util.*" pageEncoding="utf-8"%>

<html>
  <head>
    <title>jsonptitle>
    <script type="text/javascript" src="js/jquery-1.10.2.min.js">script>
  head>

  <body>
    <button id="btn1">  1button>
  body>
  <script type="text/javascript">
    $(document).ready(function(){
        //jsonp
        $("#btn1").click(function(){
            $.ajax({
                url:"http://10.168.3.36:8080/Demo-1/jsonp",
                dataType:"jsonp",   
                type:"get",
                async:false,
                jsonp:"jsonpCallback",
                success:function(data){
                    alert(data.result);
                }
            });
        });
    });
  script>
html>

JSONPの活動原理