您的位置: 首页  >  IT文章  >  ajax跨域通信-博客园老牛大讲堂

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

分类: IT文章 • 2023-11-06 15:26:43

一、首先ajax是什么？---博客园老牛大讲堂

　　ajax是一段代码，是用来解决前端（H5）与后端（Java，php）通信的。

二、不用ajax行不？

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

三、ajax能实现跨域吗？

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

四、怎样实现ajax与Java数据交互呢？--博客园老牛大讲堂

　　利用jsonp！jsonp通信如下：

　　这是JavaScript代码：

　传递callback的作用是jsonp的关键。网页首先要传递一个变量，服务端再把变量回传。
$.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("失败");
                }
            });
View Code

　　java后台代码：

　　web端编写跨域代码-博客园老牛大讲堂

五、ajax的json通信与jsonp通信

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

例子一：其中var value=eval("("+data+")");是为了把字符串转换成json数据。

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请求，难道我们要写N次的ajax吗？

　　不用了！北京的萧郎 http://www.cnblogs.com/albertwx/ 已经帮我们解决了这个问题。万能ajax

　　思路：首先写一个万能的ajax方法，把url，success的内容，和error的内容都通过参数的方式传递过来

　　代码：

<!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>
View Code

 八：如果有兴趣的可以研究一下jq的匿名函数：如果用匿名函数来做，那么一个工程写一个ajax通信就行了。

　　

　　

相关推荐