jquery 跨域

最新推荐文章于 2024-04-23 19:56:07 发布

lidengw08

最新推荐文章于 2024-04-23 19:56:07 发布

阅读量547

点赞数

分类专栏： javascript/jquery 文章标签： jquery callback json function ajax xmlhttprequest

本文链接：https://blog.csdn.net/lidengw08/article/details/7514030

版权

javascript/jquery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

关于什么是跨域，这里不再说明！

首先，　创建模拟环境，　开启两个tomcat，　一个端口为8080，　另外一个是8081.至于如何在一个机器上开启两个tomcat，这里略去。

在myeclipse中分别创建两个项目jqueryTest1和jqueryTest2.分别部署到8080端口的tomcat下和8081端口的tomcat下。

首先测试同域情况：

在jqueryTest1下创建index.jsp和index6.jsp,

index.jsp:

<%@ 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%>">

	<script type="text/javascript" src="jquery-1.7.2.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){	
			$.get("http://localhost:8080/jqueryTest1/index6.jsp",
				function(json){ 
			alert(json);
			alert(json[0].name);
			alert(json[1].name);
			});  
		});
    </script>
	</head>

	<body>
		This is my JSP page.
		<br>
	</body>
</html>

index6.jsp:

<%
response.setContentType("text/json");
out.println("[{\"name\":\"湖南省\",\"regionId\":134},{\"name\":\"北京市\",\"regionId\":143}]");
 %>

访问http://localhost:8080/jqueryTest1/

3个alert分别为：
[object Object],[object Object]
湖南省
北京市

说明访问成功。

现在，在jqueryTest1和jqueryTest2下分别创建文件index2.jsp和index5.jsp。

index2.jsp：

<%@ 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%>">

	<script type="text/javascript" src="jquery-1.7.2.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){	
			$.get("http://localhost:8081/jqueryTest2/index5.jsp",
				function(json){ 
			alert(json);
			alert(json[0].name);
			alert(json[1].name);
			});  
		});
    </script>
	</head>

	<body>
		This is my JSP page.
		<br>
	</body>
</html>

index5.jsp:

<%
response.setContentType("text/json");
out.println("[{\"name\":\"湖南省6\",\"regionId\":134},{\"name\":\"北京市6\",\"regionId\":143}]");
 %>

访问：http://localhost:8080/jqueryTest1/index2.jsp，这时，取不到响应值。

这是因为存在跨域的问题。

因为$.get()方法不能跨域。

然后我总结一下jquery中的一些ajax方法.

load( url, [data], [callback] ) 载入远程 HTML 文件代码并插入至 DOM 中
这个方法默认使用 GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方

式的。是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是

需要用到jQuery.ajax()

jQuery.get( url, [data], [callback] )：使用GET方式来进行异步请求
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出

错时执行函数，还是需要用到jQuery.ajax()

jQuery.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求。如果需要

在出错时执行函数，还是需要用到jQuery.ajax()

jQuery.getScript( url, [callback] ) : 通过 GET 方式请求载入并执行一个 JavaScript 文件
您可以跨域调用 JavaScript 文件

jQuery Ajax 事件

在jQuery这里有两种Ajax事件：局部事件和全局事件。
局部事件就是在每次的Ajax请求时在方法内定义的

全局事件是每次的Ajax请求都会触发的，它会向DOM中的所有元素广播

jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据
这个是jQuery 的底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。
$.ajax() 返回其创建的 XMLHttpRequest 对象。

那么，在jquery中如果要实现跨域操作，可以使用getJSON和getScript方法。

使用Jquery中getJSON和getScript方法实现跨域：

还是使用上面的环境，在jqueryTest1和jqueryTest2下分别创建文件index3.jsp和j2.js.

index3.jsp:

	<script type="text/javascript" src="jquery-1.7.2.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){	
			$.getScript("http://localhost:8081/jqueryTest2/j2.js",
				function(){ 
			
			alert("yes");
			});  
		});
    </script>

j2.js:

alert("hello, this is jqueryTest2 js file");

访问：http://localhost:8080/jqueryTest1/index3.jsp

结果为：

弹出“hello, this is jqueryTest2 js file”，弹出“yes”

其实，

jQuery.getScript( url, [ success(data, textStatus) ] )
是一个快速的AJax处理函数，相当于:
```
$.ajax({
  url: url,
  dataType: 'script',
  success: success
});
```

案例2：

在jqueryTest1和jqueryTest2下分别创建文件index4.jsp和index3.jsp.

index4.jsp:

	<script type="text/javascript" src="jquery-1.7.2.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){	
			
			/*
要求远程请求页面的数据格式为： ?(json_data) 
例如： 
?([{"name":"湖南省","regionId":134},
{"name":"北京市","regionId":143}]) 		

*/


$.getJSON("http://localhost:8081/jqueryTest2/index3.jsp?jsonCallback=?",
	function(json){   

alert(json[0].name);
alert(json[1].name);

  
});  
		});
    </script>

index3.jsp:

<%
response.setContentType("text/json");
String callback=request.getParameter("jsonCallback");
out.println(callback+"("+"[{\"name\":\"湖南省6\",\"regionId\":134},{\"name\":\"北京市6\",\"regionId\":143}]"+")");
 %>

访问：http://localhost:8080/jqueryTest1/index4.jsp

结果：

弹出"湖南省6", 弹出"北京市6"

说明跨域访问成功！

lidengw08

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery 跨域

关于什么是跨域，这里不再说明！首先，　创建模拟环境，　开启两个tomcat，　一个端口为8080，　另外一个是8081.至于如何在一个机器上开启两个tomcat，这里略去。在myeclipse中分别创建两个项目jqueryTest1和jqueryTest2.分别部署到8080端口的tomcat下和8081端口的tomcat下。首先测试同域情况：在jqueryTest1下
复制链接

扫一扫