javascript实现Ajax的六个步骤
2014-10-25 00:00
281 查看
摘要: javascript实现Ajax的六个步骤
通过jQuery的封装之后,对于Ajax的使用变得非常的简单,但是个人对于javascript实现的Ajax的原理却一无所知,今天在看《锋利的jQuery》这本书的时候,在书上看到了关于这个实现的例子,特此摘抄下来。
例子描述:单击一个按钮,然后通过传统的javascript的Ajax的方式从服务器端取回一个“Hello Ajax!”的字符串并显示在页面上。
首先在前台页面中书写HTML代码,代码如下:
<button>按钮用来触发Ajax,id为"resText"的元素用来显示从服务器返回的HTML文本。
接下来的任务就是完成Ajax()函数,实现步骤如下:
(1)定义一个函数,通过该函数来异步获取信息,代码如下:
(2)声明一个空对象用来装入XMLHttpRequest对象,代码如下:
(3)给XMLHttpRequest对象赋值,代码如下:
IE5、IE6是以ActiveXObject的方式引入XMLHttpRequest对象的,而其他浏览器的XMLHttpRequest对象是window的子对象。
(4)实例化成功后,使用open()方式初始化XMLHttpRequest对象,指定HTTP方法和要使用的服务器URL,代码如下:
默认情况下,使用XMLHttpRequest对象发送的HTTP请求是异步进行的,但是可以显示地把async参数设置为true,如上面代码所示。
(5)因为要做一个异步调用,所以需要注册一个XMLHttpRequest对象,将调用的回调事件处理器当它的readyState值改变时调用。当readState值被改变时,会激发一个readstatechange事件,可以使用onreadstatechange属性来注册该回调事件处理器,代码如下:
(6)使用send()方法发送该请求,因为这个请求使用的是HTTP的GET方式,所以可以在不指定参数或使用null参数的情况下调用send()放法,代码如下:
当请求状态改变时,XMLHttpRequest对象调用onreaystatechange属性注册的事件处理器。因此,在处理该响应之前,事件处理器应该首先检查readyState的值和HTTP的状态。当请求完成加载(readyState值为4)并且响应已经成功(HTTP状态为200)时,就可以调用一个javascript函数来处理该响应内容,代码如下:
最后,如果单击"Ajax提交"按钮后发现网页上出现了"Hello Ajax!",那么就完成了第一个Ajax调用。
通过jQuery的封装之后,对于Ajax的使用变得非常的简单,但是个人对于javascript实现的Ajax的原理却一无所知,今天在看《锋利的jQuery》这本书的时候,在书上看到了关于这个实现的例子,特此摘抄下来。
例子描述:单击一个按钮,然后通过传统的javascript的Ajax的方式从服务器端取回一个“Hello Ajax!”的字符串并显示在页面上。
首先在前台页面中书写HTML代码,代码如下:
<input type="button" value="Ajax提交" onclick="Ajax();" /> <div id="resText"></div>
<button>按钮用来触发Ajax,id为"resText"的元素用来显示从服务器返回的HTML文本。
接下来的任务就是完成Ajax()函数,实现步骤如下:
(1)定义一个函数,通过该函数来异步获取信息,代码如下:
function Ajax(){ //... }
(2)声明一个空对象用来装入XMLHttpRequest对象,代码如下:
var xmlHttpReq=null;
(3)给XMLHttpRequest对象赋值,代码如下:
if(window.ActiveXObject){ //IE5、IE6是以ActiveXObject的方式 //引入xmlHttpRequest对象的 xmlHttpReq=new ActiveXObject("Microsoft.XMLHTTP"); }else if(window.XMLHttpRequest){ //除IE5、IE6以外的浏览器 //XMLHttpRequest是window的子对象 xmlHttpReq=new XMLHttpRequest(); //实例化一个XMLHttpRequest对象 }
IE5、IE6是以ActiveXObject的方式引入XMLHttpRequest对象的,而其他浏览器的XMLHttpRequest对象是window的子对象。
(4)实例化成功后,使用open()方式初始化XMLHttpRequest对象,指定HTTP方法和要使用的服务器URL,代码如下:
xmlHttpReq.open("GET","test.php",true); //调用open()方法并采用
默认情况下,使用XMLHttpRequest对象发送的HTTP请求是异步进行的,但是可以显示地把async参数设置为true,如上面代码所示。
(5)因为要做一个异步调用,所以需要注册一个XMLHttpRequest对象,将调用的回调事件处理器当它的readyState值改变时调用。当readState值被改变时,会激发一个readstatechange事件,可以使用onreadstatechange属性来注册该回调事件处理器,代码如下:
xmlHttpReq.onreadstatechange=RequestCallBack; //设置回调函数
(6)使用send()方法发送该请求,因为这个请求使用的是HTTP的GET方式,所以可以在不指定参数或使用null参数的情况下调用send()放法,代码如下:
xmlHttpReq.send(null); //因为使用GET方法提交,所以可以使用null作为参数调用
当请求状态改变时,XMLHttpRequest对象调用onreaystatechange属性注册的事件处理器。因此,在处理该响应之前,事件处理器应该首先检查readyState的值和HTTP的状态。当请求完成加载(readyState值为4)并且响应已经成功(HTTP状态为200)时,就可以调用一个javascript函数来处理该响应内容,代码如下:
function RequestCallBack(){//一旦readyState值改变,将会调用该函数 if(xmlHttpReq.readyState == 4) { if(xmlHttpReq.status == 200){ //将xmlHttpReq.responseText的值赋予id为resText的元素 document.getElementById("resText").innerHTML=xmlHttpReq.responseText; } } }
最后,如果单击"Ajax提交"按钮后发现网页上出现了"Hello Ajax!",那么就完成了第一个Ajax调用。
相关文章推荐
- ajax中如何实现innerHTML中javascript的运行
- 用javascript实现无刷新更新数据的详细步骤 asp
- Asp.net Ajax WebService 实现循环引用(自定义JavascriptConverter)
- 基于对象的JavaScript实现无刷新页面发送和获取数据Ajax.js
- 一段用JavaScript写的实现AJAX代码
- AJAX之旅(2):javascript中类的深入研究-实现和继承
- 用 AJax 技术实现 JavaScript 访问服务器端方法
- asp.net通过反射技术实现Ajax(2)--前台javascript封装的Ajax对象
- ajax中如何实现innerHTML中javascript的运行
- javascript+ajax控制滑块实现滑杆拉动式评论翻页效果
- AJAX基础:JavaScript中类的实现
- [荐]Javascript与asp.net 实现Ajax多文件无刷新上传
- 在.net中使用ajaxpro实现ajax效果的步骤
- 纯javaScript脚本来实现Ajax功能例子一
- Javascript与asp.net 实现Ajax多文件无刷新上传
- Ajax - JavaScript之实现私有属性、像C++和Java一样支持基于类的继承方法之例子
- Javascript与asp.net 实现Ajax多文件无刷新上传【转】
- Javascript与asp.net 实现Ajax多文件无刷新上传
- 动态创建表格js文件,javascript,Ajax,DHTML动态实现表格的创建,动态读取XML中的文件,读取dom节点的例子。
- ajax实例 - Javascript+ASP实现无组件上传类