码迷,mamicode.com
首页 > Web开发 > 详细

关于ajax跨域通信-博客园老牛大讲堂

时间:2016-09-07 09:11:14      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:

一、首先ajax是什么?

  ajax是一段代码,是用来解决前端(H5)与后端(Java,php)通信的。

二、不用ajax行不?

    可以啊!只要你自己写的H5页面是静态的,或者不与后台进行通信,进行数据的交流,不用ajax也行。

三、ajax能实现跨域吗?

  什么是跨域:例如:你写了一个好看的页面,但是页面的某些数据需要和后台进行交互,怎么做呢,用ajax啊!但是!对与Java程序就不行了,代码全对,但就是老报错。这就是跨域了。就好像你连接不上网一样。ajax对于Java程序来说能实现跨域的

四、怎样实现ajax与Java数据交互呢?

  利用jsonp!jsonp通信如下:

  这是JavaScript代码:

技术分享
 1 $.ajax({
 2             type:"get",
 3             url:"http://192.168.1.101:8080/B/B?callback=?",
 4             async:true,
 5             timeout:2000,
 6             dataType:"jsonp",
 7             success: function(json){
 8                 console.log(json)
 9             },
10             error:function(json){
11                 console.log(json);
12             }                                         
13         });
View Code

  java后台代码:

技术分享
1 String  callback = request.getParameter("callback");  
2         
3         String jsonstring=jsonToos.returnResult("110");//这个是json数据的包装。不懂json数据包装的看我老牛大讲堂关于json数据包装介绍。
4         
5         String jsoncallback = callback + "("+jsonstring+")";  
6         PrintWriter out =  response.getWriter();  
7         out.print(jsoncallback);  
8         out.flush();  
9         out.close(); 
View Code

五、ajax的json通信与jsonp通信

  下面是json数据实现与php进行通信的几种方法:(对于Java远程通信无效,一般针对php后台有效。)

例子一:

技术分享
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         });
View Code

例子二:

技术分享
1 $.getJSON("menu.js",function(data){
2             $.each(data,function(i,field){
3                 $("#list2").append("<li>"+field.type+"</li>");
4             });
5         });
View Code

例子三:

技术分享
$.get("a.html",function(data){
            $(‘#list2‘).html(data);
        });
View Code

例子四:

技术分享
1 $.post("a.html",function(data){
2             $(‘#list2‘).html(data);
3         });
View Code

 六、上面 的五下的第一个例子是不是跟四下面 的例子有点一样呢。肯定不一样了。不一样的地方自己找吧。

关于ajax跨域通信-博客园老牛大讲堂

标签:

原文地址:http://www.cnblogs.com/laonniudajiangtang/p/5842743.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!