javascript中的ajax

首先说一下Ajax是可以从服务器上读取数据,并且返回给我们,不刷新页面就可以读取数据或者发送数据。
(1)本地服务器url:localhost/aaa.html || 127.0.1/aaa.html
(2)async
异步(async:true):多个请求同时进行;
同步(async:false) :多个请求一个一个的进行,如果有一个停止或异常就会引起其他请求从而会导致阻塞;
(3)缓存问题:就是之前获取数据会保存在本地,当下次读取的时候就直接去本地获取;
工作机制|:根据域名(url)缓存的,相同的域名制度去一次;
阻止缓存:如果要获取的数据时刻在变的话,就必须阻止缓存,利用时间戳千分之一秒的极短时间特性拼接给url从而使每次的域名都不相同;
(4)请求方式method:
GET:通过网址提交,提交的数据会以/?key=value&key=value….的形式在url中显示url是限制容量的(长度)一般4k到10k,传输的容量比较小,安全性比较差,有缓存,更适合从服务器获取数据,简单快捷。
POST:不通过网址提交,通过http的Content提交的,不会在url里显示内容,传输的容量比较大(一般2G,大于2G的可以用控件发送),安全性相对好一点,没有缓冲,更适合向服务器传递数据,
然而,在以下情况中,请使用POST请求:
无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
(5)编写一个简单的Ajax需要四步:
1)创建Ajax对象
2)链接到服务器
3)发送请求
4)接收返回值
//(一)Ajax get请求方式

 function ajax(url,fnSucc,fnFaild){
            //1:创建Ajax对象;
            if(window.XMLHttpRequest){
                var oAjax=new XMLHttpRequest();//非IE6
            }else{
                var oAjax=new ActiveXObject("Microsoft.XMLHTTP");//IE6
            }
            //2:链接到服务器;
            oAjax.open('GET',url,true);
            //3:发送请求;
            oAjax.send();
            // 4:接收返回值;
            oAjax.onreadystatechange=function(){//存有处理服务器响应的函数,每当 readyState 改变时,onreadystatechange 函数就会被执行
                if(oAjax.readyState==4){//oAjax.readyState;//告诉浏览器和服务器进行到那一步了
                    if(oAjax.status==200){//进一步判断读取是否成功
                        fnSucc(oAjax.responseText);//成功回掉
                    }else{
                        if(fnFaild){
                            fnFaild(oAjax.status);//失败回掉
                        }
                    }
                }
            }
        }

(二)Ajax进阶

    function ajax(json){
        //设置默认参数
        var settrings={
            method:'get',//默认get请求方式
            url:'',
            data:{},//参数
            async:true,//默认异步加载
            dataType:'json',//默认返回数据类型为json
            succ:function(){},//成功回调
            filer:function(){}//失败回调
        }
        //将传入的json赋值给settrings
        for(var attr in json){
            settrings[attr]=json[attr];
        }
        //将参数转化为usename=ltnsee&password=123456&...;
        var arr=[];
        for(var attr in settrings.data){
            arr.push(attr+'='settrings.data[attr]);
        }
        settrings.data=arr.join('&');
        //1、创建Ajax对象
        var ajax=window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject('Microsoft.XMLHTTP');
        //2、设置请求方式
        if(settrings.method.toLocaleLowerCase()=='get'){
            ajax.open('get',settrimgs.url+'?'+settrings.data+'&_t'+new Date().getTime(),settrings.async);
            ajax.send();
        }else{
            ajax.open('post',settrings.url,settrings.async);
            ajax.setRequestHeader('Content-Type','applicztion-www-form-urlencoded');
            ajax.send(settrings.data);
        }
        //设置响应Http状态函数
        if(Typeof(ajax.onload)=='undefinde'){
            ajax.readystatechange=ready;
        }else{
            ajax.onload=ready;
        }
        //HTTP状态函数
        function ready(){
            if(ajax.readyState==4){
                if(ajax.status==200){
                    switch(settrings.dataType.yoLocaleLowerCase()){
                        case 'string':
                        settrings.succ(ajax.reponseText);
                        break;
                        case 'json':
                        settrings.succ(JSON parse(ajax.reponseText));
                        break;
                        case 'xml':
                        settrings.succ(ajax.reponseXML);
                        break;
                    }
                }else{
                    aettrings.fail(ajax.status);
                }
            }
        }
    }

readyState:存有服务器响应的状态信息。
0: 请求未初始化:没有调用open方法
1: 启动:调用了open方法,没有调用send方法
2: 发送:已经调用了send方法,未接收到响应
3: 接收:已接收到部分响应数据
4: 完成:应接收到全部响应数据
status:http状态码:
100-199 用于指定客户端应相应的某些动作。
200-299 用于表示请求成功。
300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
400-499 用于指出客户端的错误。
500-599 用于支持服务器错误。
HTTP状态码
100 Continue 继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求,但尚未处理
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向,且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后,请求的网页未修改过。
400 Bad Request 服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。
500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求(可能是过载或维护)。
responseText:获得字符串形式的响应数据。
setRequestHeader():POST传数据时,用来添加 HTTP 头,然后send(data),注意data格式;GET发送信息时直接加参数到url上就可以,比如url?a=a1&b=b1

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值