使用jsonp进行跨域访问

简介: 一、使用场景   当我们请求非本服务器的资源的时候,浏览器会禁止访问,并提示不允许跨域访问。此时我们可以使用jsonp这种请求方式,从其他服务器获取资源。在客户端调用提供jsonp支持的接口,获取jsonp格式的数据。

一、使用场景

  当我们请求非本服务器的资源的时候,浏览器会禁止访问,并提示不允许跨域访问。此时我们可以使用jsonp这种请求方式,从其他服务器获取资源。在客户端调用提供jsonp支持的接口,获取jsonp格式的数据。

二、客户端的实现

  客户端使用jsp,用js发送ajax请求,代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <base href="<%=basePath%>">
        <title>jsonp</title>
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">
        <script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script>
</head>
<body>
        <script type="text/javascript">
jQuery(document).ready(function() {

    $.ajax( {
        type : "get",
        async : false,
        url : "http://127.0.0.1:8089/test2/TestServlet?id=1",
        dataType : "jsonp",
        jsonp : "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
        jsonpCallback : "Tcallback",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
        success : function(json) {
            alert('name: ' + json.name + ',age: ' + json.age);
        },
        error : function() {
            alert('fail');
        }
    });

});
</script>
</body>
</html>

 

  此段代码相当于get请求http://127.0.0.1:8089/test2/TestServlet?id=1&callback=Tcallback .

三、服务器实现

  服务器端使用servlet实现,代码如下:

public class TestServlet extends HttpServlet
{

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException
    {
        String id = request.getParameter("id");
        String callback = request.getParameter("callback");//值为Tcallback 
        String name = "zhangsan";
        int age = 20;
        String json = String.format("%s({\"name\":\"%s\", \"age\":%s})",
                callback, name, age);//返回的数据
        PrintWriter out = response.getWriter();
        out.print(json);
        out.flush();
        out.close();
    }
}
目录
相关文章
|
缓存 JSON 前端开发
Ajax:跨域与JSONP
Ajax:跨域与JSONP
87 1
|
JSON JavaScript 前端开发
如何处理跨域请求:JSONP、CORS 和代理服务器
处理跨域请求是前端开发中的常见挑战,因为浏览器的同源策略限制了在不同域名、协议或端口之间进行直接通信。为了解决跨域请求的问题,可以使用以下三种常见的方法:JSONP、CORS和代理服务器。
497 0
|
JSON 安全 JavaScript
跨域访问(JSONP)
跨域访问(JSONP)
157 0
跨域访问(JSONP)
|
前端开发
利用jsonp解决跨域问题
这篇文章给大家分享的是利用jsonp解决跨域问题。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
102 0
|
JSON 缓存 JavaScript
同源策略与跨域访问(jsonp和cors等)
同源策略与跨域访问(jsonp和cors等)
334 0
同源策略与跨域访问(jsonp和cors等)
|
JSON 缓存 JavaScript
JSONP - 跨域篇
JSONP - 跨域篇
253 0
JSONP - 跨域篇
|
JSON JavaScript 前端开发
学习AJAX必知必会(5)~同源策略、解决跨域问题(JSONP、CORS)
学习AJAX必知必会(5)~同源策略、解决跨域问题(JSONP、CORS)
267 0
学习AJAX必知必会(5)~同源策略、解决跨域问题(JSONP、CORS)
Ajax-21:设置CORS响应头实现跨域
Ajax-21:设置CORS响应头实现跨域
243 0
|
JSON JavaScript 前端开发
ajax实现JSONP跨域
简单的说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果
3525 0

热门文章

最新文章