原生Ajax技术归纳总结

原生ajax技术归纳总结

1什么是ajax

客户端的页面和服务器之间完成通信的技术，实在同一个页面文档中完 成客户端和服务端的交互。和提交表单,刷新页面,iframe，远程脚本 是不同的。

常用来提交表单，局部刷新，滚动加载等等。

2工作过程

简单来说，就是给服务器一个请求,调用服务器的某些服务,接着返回数 据。

3XMLHttpRequest对象：

管理服务端和客户端异步通信的对象，是一个全局变量。

使用中第一步需要获得XMLHttpRequest对象。

如：var ajax = new XMLHttpRequest();

1.XMLHttpRequest对象中的方法：

1.open(method,url,[async,username,password]);
        method:get/post;
        url:指定服务端的链接；
        async:false/true(默认)；true表示异步,false表示同步
        username，password可选参数,指定服务器的用户名和密码;
2.setRequestHeader(label,value);
        给该方法的请求头添加标记/值对;
3.send('content');
        核心方法,发送请求,附带相应的数据
4.getAllResponseHeaders
        getAllResponseHeaders();
        字符串的形式,返回所有http应答的头,内容,服务，
        日期等相关的信息
5.getResponseHeader
        getResponseHeaders(lable);
        字符串的形式,获取指定http应答头的信息
6.abort
        abort(),取消当前的请求

注意

1.XMLHttpRequest.open()中的method，常用
    get，post；
    但是还包含其他的方法
    get:服务端请求数据；
    post:向服务端发送数据；
    delete：删除指定资源的数据；
    put：数据保存到指定的资源上;
    head，和get相似,但是服务器端应答的只是头而已；

    其中最主要使用的还是get/post

2.XMLHttpRequest对象中的属性：

1.onreadystatechange
    保存请求的ready状态改变的时候,调用的函数
2.readyState
    五个值
    0 没有初始化
    1 open阶段
    2 请求已经发送
    3 正在接受应答
    4 应答已经收到

    注意:大部分情况下,我们只需要关心他的值为4的情况
3.responseText
    文本格式的应答信息
4.responseXML
    xml格式的应答信息，看做有效的xml处理
5.status
    返回http请求的状态
    404，500，等等
    最期待的是200(因为200表示一切正常)
6.statusText
    以文字的形式请求状态

处理web请求

发送Ajax请求之后,下一步就要开始处理相应的请求

1.获取服务器返回的数据
    XMLHttpRequest.onreadystatechange = function(){}
    (后面也可以是函数名,函数另外设定,一般使用回调函数)

    注意:其实按照前文所说,是状态改变的时候，后面跟着需要调用的函数
        也就是创建对象，发送数据完结之后,需要执行的回调函数而已

        它最重要的一点就是函数的调用时机,状态改变的时候调用
2.回调函数的设定
    XMLHttpRequest.onreadystatechange = function(){ 
        //按照前文,其实也就是判断应答是否已经收到,传输过程是否是一切正常
        if(XMLHttpRequest.readyState == 4 && XMLHttpRequest.status == 200)
        //如果应答收到,一切正常,那么执行页面需要执行的程序即可

        //如果需要获取服务器返回的数据
        var data = XMLHttpRequest.responseText;
    }

实例：(步骤实例,不是完整的程序实例)

//-------------------------------------------------
<script type="text/javaScript">
    //获取XMLHttpRequest对象
    var ajaxObj = new XMLHttpRequest();
    //打开发送信息句柄
    ajaxObj.open('get/post','url',true);
    //发送请求
    ajaxObj.send(data)//get方法也可以url后缀
    ajaxObj.onreadystatechange = function(){ 
        if(ajaxObj.readyState == 4 && ajaxObj.status == 200){ 
            //获取到服务器返回的数据
            var res = ajaxObj.responseText;
            //完毕之后页面需要处理的程序
            {XXXXXXXXXXXXXXXXXXXXX}
        }
    }

</script>
//------------------end-------------------------

注意:这只是对常用技术简单的总结归纳,方便自己以及各位查询。错误之处,望批评指正,大家一起成长。

jquery的ajax技术将会总结在大类jquery中。后续更新