JSONP jQuery Ajax 跨域请求

最新推荐文章于 2024-04-14 22:43:02 发布

原创最新推荐文章于 2024-04-14 22:43:02 发布 · 429 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用JSONP实现跨域请求的例子，通过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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<base href="http://b.club:8081/JSPproject/">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $(but).click(function(){
        $.ajax({
            url : "AjaxServlet" ,
            method : "post" ,
            data : {
                msg : $(msg).val() ,
                info : "hello"
            } ,
            dataType : "jsonp" ,
            jsonp : "jsonpcallback" ,
            success : function(data){
                alert(data.msg) ;
            } ,
            error : function(){
                alert("error") ;
            }
        }) ;
    }) ;
}) ;
</script>
</head>
<body>
    <input type="text" id="msg">
    <input type="button" id="but" value="按钮">
</body>
</html>

java代码

package me1.servlet;

import java.io.IOException;

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

/**
 * Servlet implementation class AjaxServlet
 */
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public AjaxServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        String code = "UTF-8" ;
        request.setCharacterEncoding(code);
        response.setCharacterEncoding(code);
        
        String msg = request.getParameter("msg") ;
        String info = request.getParameter("info") ;
        String jsonStr = "{\"msg\":\"" + msg + "\",\"info\":\"" + info +"\"}" ;
        String jsonpcallback = request.getParameter("jsonpcallback") ;
        
        System.out.println(jsonpcallback+"("+jsonStr+")");
        
        response.getWriter().println(jsonpcallback+"("+jsonStr+")") ;
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        this.doGet(request, response);
    }

}

其实与正常的ajax是类似的，jsp代码ajax需要修改dataType，并增加jsonp。java代码需要在传递的json数据外面加上一个名（jsonpcallback）。

String jsonpcallback = request.getParameter("jsonpcallback") ;参数jsonpcallback就是一个标记，跟页面对应上就行。

比如，在页面输入 nihao，点击按钮，控制台输出结果为：jQuery31105591042713976494_1492651807928({"msg":"nihao","info":"hello"})，可以看到jsonpcallback的值并不是自己定义的。

在一台电脑上配置跨域访问

就是配置两个本地域名，上面程序ajax的url是b.club。。。，tomcat启动的时候使用a.club。。。就行了呗，其实都是localhost。

如何配置本地域名

修改 C:\Windows\System32\drivers\etc 路径下的hosts文件，可能需要管理员打开，可以先用管理员打开一个记事本软件，然后把hosts拖进去进行修改。

添加两条

127.0.0.1 a.club
127.0.0.1 b.club

原有的前面应该都有#，那是注释，这两个前面没有#，也可以为其他ip配置域名。