ajax跨域请求

A牛哥哥

浏览: 150753 次

最近访客更多访客>>

jjjssh

zhang111jie

szhnet

fan0128

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

前端

ajax跨域请求

1,什么情况属于跨域?
url的一级域名或者二级域名不同都是跨域

2,跨域的ajax请求有什么问题?
ajax请求默认是不能跨域,也就是说A项目想通过ajax请求访问B项目是不可行的,现在我们就是要解决ajax跨域不能调用的问题

3,我们把A项目作客户端,B项目作服务端,这是我的服务端代码,以下所有都是使用此服务端代码,用java的servlet写的

public class FileCheckServlet extends HttpServlet{

	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
			doPost(req, resp);
	}
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		String functionName = req.getParameter("callback");//获取回调函数名
		System.out.println(functionName);
		//resp.getWriter().print(functionName+"([{ name:\"Tom\"}])");//返回json数据的写法
		resp.getWriter().print(functionName+"('haha')");//返回非json字符串的写法,必须加单引号
	}
}

以上服务端的地址是http://127.0.0.1:9999/fileserver/fileCheck

4,第一种调用方式,最简单也能明白原理

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>

<script type="text/javascript" >  
    function test(result) {  
    	alert(result);
    }  
</script> 

<!-- 用下面这个script标签的src向B项目发出请求, 这个src的请求是可以跨域的,在url后面拼接参数callback=test,这个test就是回调函数的名称,我已经在上面定义了test方法,注意:test方法一定要在下面这个script标签之前声明-->
<script type="text/javascript" src="http://127.0.0.1:9999/fileserver/fileCheck?callback=test"></script>


<body>
</body>
</html>

4.1,服务端debug截图

4.2,客户端的test函数执行截图

4.3,看清楚为什么test方法会执行了吗?
服务端获取到回调函数的名称---String functionName = req.getParameter("callback");
服务端返回---------resp.getWriter().print(functionName+"('haha')"), 即返回的是test('haha')

这个test('haha')就会添加到下面那个script中, 即

<script type="text/javascript" src="http://127.0.0.1:9999/fileserver/fileCheck?callback=test">
          test('haha')
</script>

这就是为什么test方法会执行了

5,采用jquery请求

5.1,用$.get()的方式

function test(result){
	  alert(result);
  }
  $.get('http://127.0.0.1:9999/fileserver/fileCheck?callback=test', {name:'lisi'}, 
		  function (result) {
	  		 alert(result);	 
	  	 }, 'jsonp');

说明:
如果$.get的请求后拼参数callback=test, 并且$.get方法外部定义回调函数test,则只执行test方法,不执行$.get方法内部的匿名回调函数
如果请求后拼参数callback=?,即没有指定回调函数名称, 则jquery会动态创建一个值赋给这个?,服务端debug可以看到这个值,格式是这样的:
jQuery19002410420545318534_1387557790026,这种情况就会执行$.get内部的匿名函数

5.2,用$.ajax的方式

 $.ajax({
		type : "get",
		async:false,
		url : "http://127.0.0.1:9999/fileserver/fileCheck",
		dataType : "jsonp",
		jsonp: "callback",
		jsonpCallback:"test",
		success : function(result){
			alert(result);
		},
		error:function(result){
			alert('fail');
		}
});

  
  function test(result){
	  alert(result);
  }

jsonpCallback:"test"------------jsonpCallback这个参数可有可无.
如果有, 相当于指定了回调函数名称为test,那么$.ajax外部的test方法会先执行,然后执行$.ajax内部的success方法或error方法
如果没有,即没有指定回调函数名,那么jquery会创建一个值(格式也是jQuery19002410420545318534_1387557790026),这种情况只会执行$.ajax内部的success方法或error方法

注意: jquery-1.3.js添加jsonpCallback参数不起作用,还是由jquery自动生成一个值,所以test方法不会执行, 后来换成jquery-1.9.js就可以了,其他jquery版本未测试

5.3, 用$.getJSON的方式

 $.getJSON("http://127.0.0.1:9999/fileserver/fileCheck?callback=?",  
    function(json) {
        alert(json);
    });

这种方式url后拼callback参数值只能是?,写为callback=test后请求发送不出去,因此这种就只能执行$.getJSON方法内的匿名函数

查看图片附件

分享到：

2013-12-23 10:21
浏览 2071
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论