ajax原理和简单示例

很多人做了较久的web研发,但对ajax的基本原理都不甚了解,主要原因可能是很多流行框架都封装的很好,如jquery等。 但我们还是需要知道其最基本的原理是什么,才能在工作中用到恰到好处。

//ajax 对象的创建

var xmlhttp;

if (window.XMLHttpRequest) {

// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

} else {

// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

//ajax 请求服务端页面(post方式)

xmlHttp.open("POST", "user_validate.php", true);

var data =  'username=admin1';

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");

xmlHttp.onreadystatechange = processRequest;//回调函数

xmlHttp.send(data);

function processRequest(){

if(xmlHttp.readyState == 4) {

if(xmlHttp.status == 200) {

var rs = xmlHttp.responseText;

//code ....

}

}

}

XmlHttp对象参考:

属性:

onreadystatechange* 指定当readyState属性改变时的事件处理句柄。

readyState 返回当前请求的状态,只读

responseBody 将回应信息正文以unsigned byte数组形式返回,只读

responseStream 以Ado Stream对象的形式返回响应信息,只读

responseText 将响应信息作为字符串返回,只读

responseXML 将响应信息格式化为Xml Document对象并返回,只读

status 返回当前请求的http状态码,只读

statusText 返回当前请求的响应行状态,只读

* 表示此属性是W3C文档对象模型的扩展.

方法:

abort 取消当前请求

getAllResponseHeaders 获取响应的所有http头

getResponseHeader 从响应信息中获取指定的http头

open 创建一个新的http请求,并指定此请求的方法、URL以及验证信息(用户名/密码)

send 发送请求到http服务器并接收回应

setRequestHeader 单独指定请求的某个http头

onreadystatechange事件是在readyState属性发生改变时触发的,

readyState的值表示了当前请求的状态,在事件处理程序中可以根据这个值来进行不同的处理。

readyState有五种可取值0:尚未初始化,1:正在加载,2:加载完毕,3:正在处理;4:处理完毕。一旦readyState属性的值变成了4,就可以从服务器返回的响应数据进行访问了。

本文固定链接: http://www.webzhishi.com/ajax_basic/ | web知识网

【上一篇】
【下一篇】

ajax原理和简单示例:等您坐沙发呢!

发表评论

快捷键:Ctrl+Enter