AJAX 基础学习

1.什么是Ajax ?
    --一种用来改善用户体验的技术
    --实质是视图XMLHttpRequest对象异步的向服务器发请求
    --服务器返回部分数据,不是一个完整的页面,以页面无刷新的效果
        更改页面中的局部内容
2.JavaScript 中 如何获取Ajax对象 ?
    function getXHR(){
        var xhr = null;
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiveXObject('Microsoft.XMLHttp');
        }
        return xhr;
    }    
3. AJAX 异步对象的方法
    1)abort()   
        --取消请求
    2)getAllResponseHeaders()
        --获取响应的全部Http头
    3)getResponseHeader()
        --获取指定的Http头
    4) open()
        --建立请求,method请求类型get,post
    5) send()
        --发送请求
    6)setRequestHeader()
        --指定请求的Http头
4. AJAX 异步对象的属性
    1)onreadystatechange
        --发生任何状态变化时的事件控制对象
    2)readyState
        --请求的状态
        --0还没有初始化
        --1正在发送请求
        --2求情完成
        --3请求成功,正在接收数据
        --4数据接收成功
    3)responseText 
        --服务器返回的文本
    4)reponseXML
        --服务器返回的xml,能够当作DOM处理
    5)status
        --服务器返回的http请求相一致经常使用的有:
        --200表示请求成功
        --202请求被接受但处理未完成
        --400错误的请求
        --404资源未找到
        --500呢不服务器错误,如asp代码错误等服务器

5. 发送异步请求的步骤
    1)获取AJAX对象:获取XMLHttpRequest对象实例
    2)设置回调函数:为AJAX对象的onreadystatechange事件设定响应函数
        function fn(){
            if(xhr.readyState==4&&xhr.status==200){
                var txt = xhr.responseText;
            }
        }
    3)建立请求:调用XMLHttpRequest对象的open方法
        xhr.open('get','xx.do',true)
        --true:表示发送异步请求
            当AJAX对象发送请求时,用户任然能够对当前页面作其余操做
        --false:表示发送同步请求
              当AJAX对象发送请求时,用户不能对当前页面作其余操做
    4)发送求情:调用AJAX对象的send方法
        (1)发送GET请求
            --xhr.send(null);
            --若是要传参数,就在open方法的“URL”后面追加
                如xhr.open("get","xx.do?id=100",true)
        (2)发送POST请求
            --设定请求头中的content-type属性的值为:
                    application/x-www-form-urlencoded
            --xhr.open("post","xx.do",true);
            --xhr.setRequestHeader('content-type',
                'application/x-www-form-urlencoded');
            //在send方法中添加须要传的参数
            --xhr.send("uname=Dr.");app

相关文章
相关标签/搜索