Ajax

Posted LWJ_jay

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax相关的知识,希望对你有一定的参考价值。

Ajax

1.特点:更新部分网页, 可使因特网应用程序更小、更快,更友好。

2.很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。

3.所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。

4.XMLHttpRequest 用于在后台与服务器交换数据。

5.同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求。

6.原生js(没有jQuery和ajax支持)的情况下,弹出一个同源限制的错误,意思就是你无法跨域请求url的数据。

7.jsonp

   ajax请求,dataType为jsonp。这种形式需要请求在服务端调整为返回callback([json-object])的形式如果服务端返回的是普通json对象。那么调试的时候,在chrome浏览器的控制台会报"Uncaught SyntaxError: Unexpected token"错误;在firefox浏览器的控制台会报"SyntaxError: missing ; before statement"错误。

<script type="text/javascript">
            /*为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject :*/
            /*当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。*/
            /*0: 请求未初始化
            1: 服务器连接已建立
            2: 请求已接收
            3: 请求处理中
            4: 请求已完成,且响应已就绪*/
            //ajax异步请求本地json数据
            var htp;
            if(window.XMLHttpRequest) {
                htp = new XMLHttpRequest();
            } else {
                htp = new ActiveXObject();
            }
            //弹出一个同源限制的错误
            htp.open("GET", "http://www.toutiao.com/stream/widget/local_weather/data/?city=英德", true);
            htp.send();
            htp.onreadystatechange = function() {
                if(htp.readyState == 4 && htp.status == 200) {
                    console.log(htp.responseType);
                }
            }
        </script>
<body>
        <!--script跨域-->
        <!--<script type="text/javascript">
//            var data=[];
            function callbackfunction(data){
                console.log(data.responseText);
            }
        </script>
        <script src="http://www.toutiao.com/stream/widget/local_weather/data/?city=英德?callback=callbackfunction"></script> -->
        <!--jq跨域,要浏览器支持跨域,你的地址也要支持跨域-->
        <script src="js/jquery-2.1.0.js"></script>
        <script>
            $(function() {
                $.get(http://www.toutiao.com/stream/widget/local_weather/data/?city=英德, function(data) {
                    console.log(data);
                    
                })
            })
            
        </script>
    </body>
<script src="js/jquery-2.1.0.js" type="text/javascript"></script>
        <script type="text/javascript">
            //js方法:ajax获取本地数据
            var xmlhttp = new XMLHttpRequest();//
            xmlhttp.open("GET", "data.json", true);//传入绝对地址
            xmlhttp.send();//发送请求
            xmlhttp.addEventlist = function() {
                //如果到了第四部,状态为200表示成功拿到数据
                if(this.readyState == 4 && this.status == 200) {
                    var myObj=[];
                    myObj = JSON.parse(this.responseText);
//                    consol.log(myObj);

                }
            };        
            //jq方法:ajax获取本地数据
/*            $.ajax({
                type:"GET",//获取方式
                url:"data.json",//获取地址
                dataType:"json",//返回数据格式
                success:function(data){//回调函数
                    for(var i=0;i<data.length;i++){
                        console.log(data[i].area);
                    }
                }
            });        */
            //ajax获取后台数据,你的地址支持跨域,dataType:"jsonp"解决浏览器跨域问题
            $.ajax({
                type:"GET",//获取方式
                url:"http://www.toutiao.com/stream/widget/local_weather/data/?city=英德",//获取地址
                dataType:"jsonp",//返回数据格式
                success:function(data){//回调函数
                    console.log(data)
                }
            });    
    </script>    

 

以上是关于Ajax的主要内容,如果未能解决你的问题,请参考以下文章

Javascript代码片段在drupal中不起作用

前端面试题之手写promise

Ajax 片段元标记 - Googlebot 未读取页面内容

执行AJAX返回HTML片段中的JavaScript脚本

javascript AJAX片段

Spring MVC 3.2 Thymeleaf Ajax 片段