首页 > 代码库 > 使用jsonp进行跨域访问

使用jsonp进行跨域访问

2024-07-13 08:06:03   224人阅读

一、使用场景

　　当我们请求非本服务器的资源的时候，浏览器会禁止访问，并提示不允许跨域访问。此时我们可以使用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="http://www.mamicode.com/">		<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="http://www.mamicode.com/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();	}}


联系
我们