[b]1,什么情况属于跨域?[/b]
url的一级域名或者二级域名不同都是跨域
[b]2,跨域的ajax请求有什么问题?[/b]
ajax请求默认是不能跨域,也就是说A项目想通过ajax请求访问B项目是不可行的,现在我们就是要解决ajax跨域不能调用的问题
[b]3,我们把A项目作客户端,B项目作服务端,这是我的服务端代码,以下所有都是使用此服务端代码,用java的servlet写的[/b]
以上服务端的地址是http://127.0.0.1:9999/fileserver/fileCheck
[b]4,第一种调用方式,最简单也能明白原理[/b]
[b]4.1,服务端debug截图[/b]
[img]http://dl2.iteye.com/upload/attachment/0092/3873/ccc7cb91-20c9-3f25-955f-23a9fac38400.jpg[/img]
[b]4.2,客户端的test函数执行截图[/b]
[img]http://dl2.iteye.com/upload/attachment/0092/3875/3c3b5988-ebbe-390b-86b3-5a726316521a.png[/img]
[b]4.3,看清楚为什么test方法会执行了吗?[/b]
服务端获取到回调函数的名称---String functionName = req.getParameter("callback");
服务端返回---------resp.getWriter().print(functionName+"('haha')"), 即返回的是test('haha')
这个test('haha')就会添加到下面那个script中, 即
这就是为什么test方法会执行了
[b]5,采用jquery请求[/b]
[b]5.1,用$.get()的方式[/b]
说明:
如果$.get的请求后拼参数callback=test, 并且$.get方法外部定义回调函数test,则只执行test方法,不执行$.get方法内部的匿名回调函数
如果请求后拼参数callback=?,即没有指定回调函数名称, 则jquery会动态创建一个值赋给这个?,服务端debug可以看到这个值,格式是这样的:
jQuery19002410420545318534_1387557790026,这种情况就会执行$.get内部的匿名函数
[b]5.2,用$.ajax的方式[/b]
jsonpCallback:"test"------------jsonpCallback这个参数可有可无.
如果有, 相当于指定了回调函数名称为test,那么$.ajax外部的test方法会先执行,然后执行$.ajax内部的success方法或error方法
如果没有,即没有指定回调函数名,那么jquery会创建一个值(格式也是jQuery19002410420545318534_1387557790026),这种情况只会执行$.ajax内部的success方法或error方法
[b]注意: jquery-1.3.js添加jsonpCallback参数不起作用,还是由jquery自动生成一个值,所以test方法不会执行, 后来换成jquery-1.9.js就可以了,其他jquery版本未测试[/b]
[b]5.3, 用$.getJSON的方式[/b]
这种方式url后拼callback参数值只能是?,写为callback=test后请求发送不出去,因此这种就只能执行$.getJSON方法内的匿名函数
url的一级域名或者二级域名不同都是跨域
[b]2,跨域的ajax请求有什么问题?[/b]
ajax请求默认是不能跨域,也就是说A项目想通过ajax请求访问B项目是不可行的,现在我们就是要解决ajax跨域不能调用的问题
[b]3,我们把A项目作客户端,B项目作服务端,这是我的服务端代码,以下所有都是使用此服务端代码,用java的servlet写的[/b]
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
[b]4,第一种调用方式,最简单也能明白原理[/b]
<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>
[b]4.1,服务端debug截图[/b]
[img]http://dl2.iteye.com/upload/attachment/0092/3873/ccc7cb91-20c9-3f25-955f-23a9fac38400.jpg[/img]
[b]4.2,客户端的test函数执行截图[/b]
[img]http://dl2.iteye.com/upload/attachment/0092/3875/3c3b5988-ebbe-390b-86b3-5a726316521a.png[/img]
[b]4.3,看清楚为什么test方法会执行了吗?[/b]
服务端获取到回调函数的名称---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方法会执行了
[b]5,采用jquery请求[/b]
[b]5.1,用$.get()的方式[/b]
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内部的匿名函数
[b]5.2,用$.ajax的方式[/b]
$.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方法
[b]注意: jquery-1.3.js添加jsonpCallback参数不起作用,还是由jquery自动生成一个值,所以test方法不会执行, 后来换成jquery-1.9.js就可以了,其他jquery版本未测试[/b]
[b]5.3, 用$.getJSON的方式[/b]
$.getJSON("http://127.0.0.1:9999/fileserver/fileCheck?callback=?",
function(json) {
alert(json);
});
这种方式url后拼callback参数值只能是?,写为callback=test后请求发送不出去,因此这种就只能执行$.getJSON方法内的匿名函数
扫一扫
8783
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
