实现Ajax只需要四个步骤:1、建立XML HttpRequest对象;2、发送HTTP请求;3、写回调函数;4、显示反馈信息。
最基础的就是“XML HttpRequest”对象,下面就来说一说XML HttpRequest。这个对象是Ajax最基础的对象之一,是内建到当前浏览器中的内部对象,它提供了客户端与服务器端数据传输的最基本的功能,它会对后台产生HTTP协议的请求,并且讲后台程序的返回结果以XML的方式返回给JavaScript脚本。
任何一个对象都要从它的属性和方法说起,下面简单介绍一下:
属性:
1、ReadyState:描述XML HttpRequest对象把一个HTTP请求发送到服务器时经历的各种状态
值:0 “未初始化” 已经创建XML HttpRequest对象但是还没有初始化;
1 “发送”已经调用了XML HttpRequest open()方法并且已经准备好把一个请求发送到服务器;
2 “发送”已经通过send()方法把一个请求发送到服务器端但是还没有受到一个响应;
3 “正在接收”已经接受HTTP响应的头部信息,但是消息体部分还没有完全接收结束;
4 “已加载” 此时响应已经完全被接收;
2、responseText属性
包含客户端接收到的HTTP响应的文本内容。当ReadyState属性值为0,1,2时,包含一个空字符串;当ReadyState为3时包含客户端还为完成的响应信息。为4 时包含完整的响应信息。
3、responseXML属性
此属性用于当接收到完整的HTTP响应时(ReadyState状态为4)描述XML的响应;此时,Content-Type头部指定MIME(媒体)类型为text/xml,application/xml或以+xml结尾。如果Content- Type头部并不包含这些媒体类型之一,那么responseXML的值为null,而无论何时,只要readyState值不为4,那么 responseXML的值也为null。
4、 status属性描述HTTP代码状态,类型为short,仅当readyState的值为3或4时,这个属性才可用。当小于3时试图存取status的值将引发一个异常。
5、statusText属性
描述HTTP代码状态文本;仅当readyState的值为3或4时才可用。
方法:
abort()方法:
将XML HttpReequest对象恢复到初始化状态。
open() 方法:
打开一个连接以此准备发送请求,需要调用 open(DOMString method,DOMString url,boolean async,DOMString username,DOMString password)方法初始化一个XML HttpRequest对象。
其中,method参数是必须提供的-用于指定你想用来发送请求的HTTP方法(GET,POST,PUT,DELETE,HEAD)。
url 参数用于指定XML HttpRequest对象把请求发送到的服务器的相应的URI。
async参数指定是否请求是异步的-缺省值为true。为了发送一个同步请求,需要把这个参数的值设置成false。对于要认证的服务器,可以提供可选的用户名和口令参数。如果调用open()方法并且此时readyState属性值为4,那么 XMLHttpRequest对象讲复位相应的属性值。
send() 方法:
在通过调用open()方法准备好一个请求之后,需要把该请求发送到服务器。仅当readyState属性值为1时,才可以调用send()方法;否则的话,XML HttpRequest对象将引发一个异常。当async参数为true时,send()方法立即返回,从而允许其它客户端脚本处理继续。在调用 send(0方法之后,XML HttpRequest对象将readyStatus值设置成2(发送)。
当服务器响应时,在接收消息体之前,如果存在任何消息体的话,XML HttpRequest对象将把readyState设置为3(正在接收)
当请求完成加载时,它把readyState属性设置成4(已加载)。对于一个HEAD类型的请求,它将在把readyState值设置成3后再设置成4。
setRequestHeader() 方法:
setRequestHeader(DOMString header,DOMString value)方法用来设置请求的头部信息当readyState值为1时,你可以调用open()方法后调用这个方法,否则你将得到一个异常。
getRequestHeader方法:
getRequestHeader(DOMString header,value)方法用于检索响应的头部值。仅当readyState值为3或4时,才可以调用这个方法;否则该方法返回一个空字符串。
getAllResponseHeader()方法:
该方法以一个字符串形式返回所有的响应头部(每个头部占单独的一行)。如果readyState值不是3或4,则该方法返回null。
上面是理论性的内容,下面以简单的代码展示这一具体过程:
function InitAjax()//定义函数,初始化Ajax对象
{
var ajax=false;//声明变量用于建立ajax对象
try
{
ajax=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
ajax=new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器用ActiveXObject对象创建
}
catch(e)
{
ajax=false;
}
}
if(!ajax && typeof XML HttpRequest!='undefined')
{
ajax=new XMLHttpRequest();//非IE浏览器用XMLHttpRequest对象创建
}
return ajax;
}
//建立请求连接
var req=InitAjax();
req,open("GET",url,true);//url 可以为绝对或者是相对地址
req.onreadystatechange=sentback; //指定回调函数
req.send(null);//发送请求
//写回调函数
function sentback()//回调函数,对服务器的响应处理,监视response状态
{
if(req.readystate==4)//请求状态为4表示成功
{
if(req.status==200)//HTTP状态为200表示OK
{
DisplayInfo();//所有状态成功,执行此函数,显示数据
}
else
{
alert("服务器返回状态"+req.statusText);
}
}
else//请求状态没有成功页面等待
{
document.getElementById("myDiv").innerHTML="数据加载中";
}
}
function DiplayInfo()//接收服务器返回的数据对其进行显示
{
document.getElementById("myDiv").innerHTML=req.responseText;
}
分享到:
相关推荐
AJAX原理 原理 AJAXAJAX原理 原理 AJAXAJAX原理 原理 AJAX
关于Ajax原理的ppt 理解AJAX原理 理解AJAX核心对象 了解异步调用基本原理 使用异步调用构建简单AJAX程序
Ajax原理与系统开发》源码 Ajax原理与系统开发》源码
ajax ajax原理 ajax代码 ajax编程 ajax学习
主要关于ajax原理、XMLHTTPRequest等介绍
ajax原理,ajax原理和XmlHttpRequest对象,ajax优缺点
Ajax原理 和开发指南
Ajax原理详细说明.docAjax原理详细说明.doc
Ajax原理详细说明
ajax原理及应用,概念,技术以及xmlhttprequest实例化
Ajax原理图解借鉴.pdf
Ajax原理介绍,详细介绍了ajax的工作原理!
AJAX原理[收集].pdf
描述原生ajax的原理,以及详细的用法 1.什么是Ajax技术? Ajax 由javascript , xml , css 的组合来做到一定功能的技术 2.它的工作原理是什么? 它会产生一个Ajax引擎对象XMLHttpRequest,它由浏览器产生。所以不同...
程序员突击:Ajax原理与系统开发
AJAX原理及其在Web开发中的应用.pdf
Ajax 原理和应用.如果你对Ajax不了解或者不是很熟悉的,可以来看看 文档通过10个方面,比较详细的给你介绍这一技术。 1、ajax技术的背景 2、ajax技术的意义 3、关于ajax的名字 。。。等等
1 原始ajax原理 2 jquery JDBC 3 json数据 4 三级联动 5 仿百度自动提示 6 fromValidator验证 其中自带jar包 修改 DBconfig Mysql数据库配置文件直接运行即可 方便大家学习 ~~~同时鄙视那些高分卖例子的人... ...
十分经典的Ajax实例,可以讲通用 网页无刷新,异步请求实现的相当完美