web前端跨域访问

最新推荐文章于 2024-05-17 02:37:18 发布

为伊憔悴-yzw

最新推荐文章于 2024-05-17 02:37:18 发布

阅读量581

点赞数

分类专栏：浏览器跨域总结文章标签： jsonp js callback

本文链接：https://blog.csdn.net/u011270470/article/details/35995493

版权

浏览器跨域总结专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一种写法

<%@ 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>    
    <title>跨域测试</title>
	<META content="text/html; charset=UTF-8" http-equiv=content-type>
	<script type="text/javascript" src="js/jquery-1.6.2.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#button").click(function(){
				$.getJSON("http://localhost:8080/crossDomainServer/test/toindex.do?name=zhangsan&jsoncallback=?");	
			});

		});
		function crossDomain(data){
			$("#kuayu").html(data.password);
		};
	</script>
  </head>
  
  <body>
   <center>张三的密码是<span id="kuayu"></span><hr>
   		<input id="button" type="button" value="点击进行跨域">
   </center>
  </body>
</html>

第二种写法

<%@ 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>    
    <title>跨域测试</title>
	<META content="text/html; charset=UTF-8" http-equiv=content-type>
	<script type="text/javascript" src="js/jquery-1.6.2.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#button").click(function(){
				var scriptObj = document.createElement("script");
				scriptObj.src="http://localhost:8080/crossDomainServer/test/toindex2.do?name=zhangsan";
				document.body.appendChild(scriptObj);
			});
			
		});
		function crossDomain(data){
			$("#kuayu").html(data.age);
		};
	</script>
  </head>
  
  <body>
   <center>李四的年龄多大了？<span id="kuayu"></span><hr>
   		<input id="button" type="button" value="点击进行跨域">
   </center>
  </body>
</html></span><span style="font-size:14px;">
</span>

第三种写法

<span style="font-size:14px;"><%@ 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>    
    <title>跨域测试</title>
	<META content="text/html; charset=UTF-8" http-equiv=content-type>
	<script type="text/javascript" src="js/jquery-1.6.2.js"></script>
	<script type="text/javascript">
	$(function(){
		$("#button").click(function(){
			$.ajax({
				   async:false,
				   type: "get",
				   dataType: "jsonp", 
				   jsonp: "callbackparam",//服务端用于接收callback调用的function名的参数
				   jsonpCallback:"success_jsonpCallback",//callback的function名称
				   url: "http://localhost:8080/crossDomainServer/test/toindex3.do",
				   data: "name=John",
				   success: function (json) {//客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数
						$("#kuayu").html(json.hoppy);
				   },
		    	   error:function(){
		        		alert('fail');
		    	   }
			});
		});
	});
	</script>
  </head>
  
  <body>
   <center>John最喜欢吃什么？<span id="kuayu"></span><hr>
   		<input id="button" type="button" value="点击进行跨域">
   </center>
  </body>
</html></span><span style="font-size:14px;">
</span>

三种不同的写法后台访问的controller如下，此controller存在于另一个项目中

<span style="font-size:14px;">package com.liantuo;
import java.io.IOException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping({"/test"})
public class CrossDomain
{
  @RequestMapping({"/toindex.do"})
  public void toindex(HttpServletRequest request, HttpServletResponse response)
    throws IOException
  {
    String name = request.getParameter("name");
    String callback = request.getParameter("jsoncallback");
    System.out.println(name + "===============" + callback);
    String s = "{\"password\":\"123456\"}";
    String ss = "crossDomain(" + s + ")";
    System.out.println(ss);
    response.getWriter().write(ss);
  }

  @RequestMapping({"/toindex2.do"})
  public void toindex2(HttpServletRequest request, HttpServletResponse response) throws IOException {
    response.setCharacterEncoding("utf-8");
    response.setContentType("text/html;charset=UTF-8");
    String name = request.getParameter("name");
    String callback = request.getParameter("jsoncallback");
    System.out.println(name + "===============" + callback);
    String s = "{\"age\":\"年龄18\"}";
    String ss = "crossDomain(" + s + ")";
    System.out.println(ss);
    response.getWriter().write(ss);
  }
  @RequestMapping({"/toindex3.do"})
  public void toindex3(HttpServletRequest request, HttpServletResponse response) throws IOException {
    response.setCharacterEncoding("utf-8");
    response.setContentType("text/html;charset=UTF-8");
    String name = request.getParameter("name");
    String callbackparam = request.getParameter("callbackparam");
    System.out.println(name + "===============" + callbackparam);
    String s = "{\"hoppy\":\"苹果\"}";
    String ss = callbackparam + "(" + s + ")";
    System.out.println(ss);
    response.getWriter().write(ss);
  }
}</span>

为伊憔悴-yzw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端跨域访问

String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%> 跨域测试 $(funct
复制链接

扫一扫