JSONP超簡單例子，一看就能上手

時間 2020-01-14

標籤 jsonp 簡單例子一看上手欄目 JSON 简体版

原文原文鏈接

JSON(JavaScript Object Notation)和JSONP(JSON with Padding)雖然只有一個字母的差異，但其實他們根本不是一回事兒：JSON是一種數據交換格式，而JSONP是一種依靠開發人員的聰明才智創造出的一種非官方跨域數據交互協議。JSONP解決了ajax跨域請求的問題，JSONP只是解決跨域請求方案中的一種。javascript

下面基於Servlet簡單介紹一下JSONP接口的開發流程：html

1，建立一個Servlet接口JsonpServletjava

package y.u.s.jsonp.servlet;

import com.alibaba.fastjson.JSONObject;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * Created by wangwenjin on 2017/3/1.
 */
public class JsonpServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String callback = req.getParameter("callback");
        resp.setCharacterEncoding("UTF-8");
        JSONObject jo = new JSONObject();
        jo.put("Result","remote return value");
        System.out.println(jo.toJSONString());
        System.out.println(jo.toString());
        resp.getWriter().print(callback + "(" + jo.toJSONString() + ");");
    }

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

2，建立一個html文件,並調用JSONP接口ajax

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var localHandler = function(data){
            alert('i am local fun，can be called by remote server，remote server return data ：' + data.result);
        };
        var url = "http://localhost/jsonpServlet?callback=localHandler";
        var script = document.createElement('script');
        script.setAttribute('src', url);
        document.getElementsByTagName('head')[0].appendChild(script);
    </script>

</head>
<body>

</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。