一、首先ajax是什么?---博客园老牛大讲堂
ajax是一段代码,是用来解决前端(H5)与后端(Java,php)通信的。
二、不用ajax行不?
可以啊!只要你自己写的H5页面是静态的,或者不与后台进行通信,进行数据的交流,不用ajax也行。
三、ajax能实现跨域吗?
什么是跨域:例如:你写了一个好看的页面,但是页面的某些数据需要和后台进行交互,怎么做呢,用ajax啊!但是!对与Java程序就不行了,代码全对,但就是老报错。这就是跨域了。就好像你连接不上网一样。ajax对于Java程序来说能实现跨域的!
四、怎样实现ajax与Java数据交互呢?--博客园老牛大讲堂
利用jsonp!jsonp通信如下:
这是JavaScript代码:
传递callback的作用是jsonp的关键。网页首先要传递一个变量,服务端再把变量回传。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
$.ajax({
type: "get",
url: "http://localhost:8080/B/B",
async:true,
timeout:2000,
dataType: "jsonp",
jsonp:"callback",
success: function(data) {
console.log(data.code);
},
error: function(json) {
alert("失败");
}
});
java后台代码:
五、ajax的json通信与jsonp通信
下面是json数据实现与php进行通信的几种方法:(对于Java远程通信无效,一般针对php后台有效。)
例子一:其中var value=eval("("+data+")");是为了把字符串转换成json数据。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 $.ajax({ 2 url:"http://192.168.4.109:90/html/books.js", 3 type:"POST", 4 5 success:function(data){ 6 var value=eval("("+data+")"); 7 $('#list2').html(data); 8 } 9 });
例子二:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 $.getJSON("menu.js",function(data){ 2 $.each(data,function(i,field){ 3 $("#list2").append("<li>"+field.type+"</li>"); 4 }); 5 });
例子三:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
$.get("a.html",function(data){
$('#list2').html(data);
});
例子四:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 $.post("a.html",function(data){ 2 $('#list2').html(data); 3 });
六、上面 的五下的第一个例子是不是跟四下面 的例子有点一样呢。肯定不一样了。不一样的地方自己找吧。
七、补充:--博客园老牛大讲堂
大家试想一下,如果一个超大的工程,会用到许许多多的ajax请求,难道我们要写N次的ajax吗?
不用了!北京的萧郎 http://www.cnblogs.com/albertwx/ 已经帮我们解决了这个问题。万能ajax
思路:首先写一个万能的ajax方法,把url,success的内容,和error的内容都通过参数的方式传递过来
代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../../js/jquery-3.0.0.min.js" ></script> <script type="text/javascript" src="../../js/other.js" ></script> </head> <body> </body> <script> getscheduleList("http://localhost:8080/SYSX07/ScheduleList","alert('成功');console.log('成功哈哈')","alert('失败');console.log('失败哈哈')"); function getscheduleList(url,succes,err){ $.ajax({ type: "post", url: url, dataType: "jsonp", jsonp:"callback", data:{type:1,room:405}, success: function(data) { eval(succes); }, error: function(json) { eval(err); } }); } </script> </html>
八:如果有兴趣的可以研究一下jq的匿名函数:如果用匿名函数来做,那么一个工程写一个ajax通信就行了。