首页 > 代码库 > Ajax

Ajax

2024-11-25 10:16:39   204人阅读

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=http://www.mamicode.com/[];"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


联系
我们