原生Ajax技术归纳总结

2016-11-16 18:56:02来源:CSDN作者:SiuKong_Ngau人点击

原生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中。后续更新

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台