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

ajax基础知识

时间:2016-07-30 00:21:06      阅读:214      评论:0      收藏:0      [点我收藏+]

标签:

1.   什么是Ajax ?

a)   无刷新的从服务器上读取数据;

2.   关于浏览器缓存:

a)   缓存机制:根据地址来缓存,同样地址只读一次;可以通过Math.random()或new Date().getTime()解决。

b)   解决缓存困扰:在文件名后加上一个时间戳参数;保存每次读取文件的路径都不一样,这样浏览器就不会去缓存中拿而去读新的;

3.   Ajax请求动态数据:

a)   请求JSON文件;

b)   Ajax 从服务器上所读取的所有东西都是以文本的形式存在的;

c)   eval的使用,将返回的string转换成arr,或json;

d)   配合DOM使用;

4.   eval(str):

a)   接受一个字符串作为参数(服务器读取的数据都是string类型),这个字符串里面可以放任何JS代码;

b)   eval可以计算字符串里的值;对于json要加();

<script>
            window.onload=function(){
                var oBtn=document.getElementById("btn");
                oBtn.onclick=function(){   //无刷新的从服务器中取数据
                    ajax(‘b.txt?t=‘+Math.random(),function(str){    //Math.random()解决缓存,success成功之后的回调函数
                        var json=eval(‘(‘+str+‘)‘);    //str--json
                        console.log(json.a); 
                    },function(){                             //error失败之后的回调函数
                        alert(‘失败了‘);
                    });
                };
            }
        </script>

 

5.   Ajax的原理:

a)   HTTP 请求:

        i.      GET方式:安全性低、容量小,有缓存,适于分享,适合获取数据;(如: 浏览帖子)

       ii.      POST方法:安全性稍好,容量2G,无缓存,适合上传数据;(如:用户注册)

6.   Ajax请求服务器数据的4个步骤:

a)   创建一个Ajax对象 (买个手机);

        i.      非IE6 : new XMLHttpRequest();

       ii.      IE6 : new ActiveXObject("Microsoft XMLHTTP");

b)   连接服务器(拨号);

c)   发送请求,告诉服务器要什么(说话);

d)   接收返回值(听);

7.   Ajax对象创建的兼容处理:

a)   用if (window.XMLHttpRequest) 取代if (XMLHttpRequest)  

b)   原理:

        i.      用一个不存在的变量: 出错;

       ii.      用一个不存在的属性:undefined;

8.   Ajax连接服务器:

a)   oAjax.open(方法,url, 是否为异步);

b)   方法:大多用”Get”;

c)   同步与异步:

        i.      同步:任何两件事不能一块儿做;

       ii.      异步: 多件事儿可以一起进行;Ajax天生就该工作在异步模式下的;

9.   Ajax发送请求:

a)   oAjax.send();

10.Ajax接收服务器的返回信息:

a)   oAjax.onreadystatechange 事件:

        i.      它类似于window.onload;

       ii.      用来监控请求状态;

     iii.      是当客户端和服务器那边有通信发生或有状态变化的时候会来调用;

       iv.      客户端和服务器的通信不是一步就完成的;

        v.      oAjax.readyState属性:告诉我们客户端和服务器的通信发生到哪一步了; 4 代表完成;

       vi.      oAjax.readyState == 4 只代表完成,不代表成功;

     vii.      oAjax.status == 200 代表成功;

    viii.      oAjax.status  , 400多是客户端错误, 500多是服务器错误, 300多是重定向;

       ix.      oAjax.responseText , 就是取得服务器返回的内容;

11.完整的ajax.js:

function json2str(json){    //将json转str
    json.t=Math.random();
    var arr=[];
    for(var name in json){
        arr.push(name+‘=‘+encodeURIComponent(json[name]));  //encodeURIComponent兼容汉字
    }
    return arr.join(‘&‘);
}

function ajax(url,data,success,error){    //data是url?后面的东西
    //success成功之后的回调函数
    //1.创建一个ajax对象
    if(window.XMLHttpRequest){//可以用undefined作为判断条件,但不能用error作为判断条件;变量不定义,加window相当于undefinded;
        var oAjax = new XMLHttpRequest();   //用于非ie6
    }else{
        var oAjax = new ActiveXObject(‘Microsoft.XMLHttp‘);//用于ie6;Microsoft公司的插件
    }
    //2.建立连接  是否异步
    oAjax.open(‘GET‘,url+‘?‘+json2str(data),true);
    //3.发送
    oAjax.send();
    //4.接收
    oAjax.onreadystatechange = function(){
             //网络状态readyState
        if(oAjax.readyState == 4){   //接收完成   0,初始化1,建立连接2.发送3.接收4.完成
            //http的状态status
            if(oAjax.status>=200&&oAjax.status<300||oAjax.status == 304){   //接收成功  200-300接收成功 304未修改 404未找到
                //从服务器返回的文本
                success&&success(oAjax.responseText);    //如果成功,服务器返回的文本内容    
            }else{
                error&&error(oAjax.status);//如果错误,服务器返回的错误码
            }
        }
    };
    
}    

 

ajax基础知识

标签:

原文地址:http://www.cnblogs.com/yang0902/p/5719964.html

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