使用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();}
}

转载于:https://www.cnblogs.com/always-online/p/3859340.html

使用jsonp进行跨域访问相关推荐

JQuery实现Ajax跨域访问--Jsonp原理
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源策略). ...
angularJS1笔记-(18)-$http及用angular实现JSONP跨域访问过程
官网上的解释为: The $http service is a core AngularJS service that facilitates communication with the remot ...
jsonp跨域访问服务
前段时间在做产品开发的时候,需要与公司网站那边进行交互,我们所开发的产品上线后是放在一个域名下,公司网站那块是在另一个域名下,这样在页面中调用网站那边的接口时就存在跨域的问题,当时为了不修改网站那边 ...
介绍一个JSONP 跨域访问代理API-yahooapis
你是否遇到了想利用AJAX访问一些公网API,但是你又不想建立自己的代理服务,因为有时我根本就没打算涉及服务端任何代码,但是讨厌的浏览器的同源策略,阻止了我们的ajax调用. 比如我想访问一个天气的r ...
jsonp的原理·jsonp是不是ajax中实现跨域访问的技术
ajax请求受同源策略影响,不允许进行跨域请求,而script标签src属性中的链接却可以访问跨域的js脚本,利用这个特性,服务端不再返回JSON格式的数据, 而是返回一段调用某个函数的js代码,在s ...
Ajax之跨域访问与JSONP
前言同源策略的限制,使得ajax无法发出跨域请求.在许多情况下,我们需要让ajax支持跨域.以下是其中一种解决方案(JSONP).JSONP解决了跨域数据访问的问题. 在html中,具有src属性的 ...
普元EOS中，子系统和portal不在同一个域中，使用jquery的jsonp来解决portal跨域访问
转至元数据起始 [背景] 子系统和portal不在同一个域中且项目中要求不能使用nginx.apache等反向代理软件,故使用jsonp从代码角度解决ajax跨域问题 [实现思路] 通过jquery的 ...
jsonp跨域的缺点ajax缺点,浅析JSONP解决Ajax跨域访问问题的思路详解
前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现方法有多种,本例采用jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问 ...
使用 JSONP 实现跨域通信，第 2 部分: 使用 JSONP、jQuery 和 Yahoo! 查询语言构建 mashup...
使用 JSONP 实现跨域通信,第 2 部分: 使用 JSONP.jQuery 和 Yahoo! 查询语言构建 mashup 使用 JSONP 实现跨域通信,第 2 部分: 使用 JSONP.jQue ...

使用jsonp进行跨域访问

使用jsonp进行跨域访问相关推荐

最新文章

热门文章