ajax 与XMLHttpRequest对象(1/4)

创建一个XMLHttpRequest的引用
告诉XMLHttpRequest对象，哪个函数会处理XMLHttpRequest对象状态的改变，为此要设置onreadystatechange属性
指定请求的属性。open()
将请求发送给服务器。send()
xmlHttp.responseText将响应提供为一个串

以下示例代码包括两个文件，分别为：
simpleRequest.html和simpleResponse.xml

以下为其完整代码：

@H_404_22@<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"@H_404_22@>
@H_404_22@<html@H_404_22@>
@H_404_22@<head@H_404_22@>
@H_404_22@<title@H_404_22@>simpleRequest@H_404_22@.html@H_404_22@<@H_404_22@/title@H_404_22@>
@H_404_22@<Meta http-equiv@H_404_22@="content-type" content@H_404_22@="text/html; charset=UTF-8"@H_404_22@>
@H_404_22@<@H_404_22@/head@H_404_22@>
@H_404_22@<script type@H_404_22@="text/javascript" @H_404_22@>
var xmlHttp@H_404_22@;
@H_404_22@/@H_404_22@/创建一个XMLHttpRequest对象
function createXMLHttpRequest@H_404_22@(@H_404_22@)
@H_404_22@{
if@H_404_22@(window@H_404_22@.ActiveXObject@H_404_22@)
@H_404_22@{
xmlHttp @H_404_22@= new ActiveXObject@H_404_22@("Microsoft.XMLHTTP"@H_404_22@)@H_404_22@;
@H_404_22@}
else if@H_404_22@(window@H_404_22@.XMLHttpRequest@H_404_22@)
@H_404_22@{
xmlHttp @H_404_22@= new XMLHttpRequest@H_404_22@(@H_404_22@)@H_404_22@;
@H_404_22@}
@H_404_22@}
@H_404_22@/@H_404_22@/开始一个请求
function startRequest@H_404_22@(@H_404_22@)
@H_404_22@{
createXMLHttpRequest@H_404_22@(@H_404_22@)@H_404_22@;
xmlHttp@H_404_22@.onreadystatechange @H_404_22@= handleStateChange@H_404_22@;
xmlHttp@H_404_22@.open@H_404_22@("GET"@H_404_22@,"simpleResponse.xml"@H_404_22@,true@H_404_22@)@H_404_22@;
xmlHttp@H_404_22@.send@H_404_22@(null@H_404_22@)@H_404_22@;
@H_404_22@}
@H_404_22@/@H_404_22@/当xmlHttp对象的内部状态发生变化时候，调用此处理函数
@H_404_22@/@H_404_22@/一旦接受到相应（readyState为4）
function handleStateChange@H_404_22@(@H_404_22@)
@H_404_22@{
if@H_404_22@(xmlHttp@H_404_22@.readyState @H_404_22@=@H_404_22@= 4@H_404_22@)
@H_404_22@{
if@H_404_22@(xmlHttp@H_404_22@.status @H_404_22@=@H_404_22@= 200@H_404_22@)
@H_404_22@{
alert@H_404_22@("The server replied with:"@H_404_22@+xmlHttp@H_404_22@.responseText@H_404_22@)@H_404_22@;
document@H_404_22@.getElementById@H_404_22@("result"@H_404_22@)@H_404_22@.innerHTML @H_404_22@= xmlHttp@H_404_22@.responseText@H_404_22@;
@H_404_22@}
@H_404_22@}
@H_404_22@}
@H_404_22@<@H_404_22@/script@H_404_22@>
@H_404_22@<body@H_404_22@>
@H_404_22@<form@H_404_22@>
@H_404_22@<input type@H_404_22@="button" value@H_404_22@="Start Basic Asynchronous Request" onclick@H_404_22@="startRequest();" @H_404_22@/@H_404_22@>
@H_404_22@<@H_404_22@/form@H_404_22@>
@H_404_22@<div id@H_404_22@="result" style@H_404_22@="boder:1px solid red;width:400px;height:200px;"@H_404_22@>Box@H_404_22@<@H_404_22@/div@H_404_22@>
@H_404_22@<hr@H_404_22@/@H_404_22@>
@H_404_22@<ul@H_404_22@>使用XMLHttpRequest对象发送请求的基本步骤如下：
@H_404_22@<li@H_404_22@>创建一个XMLHttpRequest的引用@H_404_22@<@H_404_22@/li@H_404_22@>
@H_404_22@<li@H_404_22@>告诉XMLHttpRequest对象，哪个函数会处理XMLHttpRequest对象状态的改变，为此要设置onreadystatechange属性@H_404_22@<@H_404_22@/li@H_404_22@>
@H_404_22@<li@H_404_22@>指定请求的属性。open@H_404_22@(@H_404_22@)@H_404_22@<@H_404_22@/li@H_404_22@>
@H_404_22@<li@H_404_22@>将请求发送给服务器。send@H_404_22@(@H_404_22@)@H_404_22@<@H_404_22@/li@H_404_22@>
@H_404_22@<li@H_404_22@>xmlHttp@H_404_22@.responseText将响应提供为一个串@H_404_22@<@H_404_22@/li@H_404_22@>
@H_404_22@<@H_404_22@/ul@H_404_22@>
@H_404_22@<@H_404_22@/body@H_404_22@>
@H_404_22@<@H_404_22@/html@H_404_22@>

@H_404_22@<@H_404_22@?xml version@H_404_22@="1.0" encoding@H_404_22@="UTF-8"?@H_404_22@>
@H_404_22@<books@H_404_22@>
@H_404_22@<book@H_404_22@>
@H_404_22@<author@H_404_22@>Henry@H_404_22@<@H_404_22@/author@H_404_22@>
@H_404_22@<pubdate@H_404_22@>2011-11-11@H_404_22@<@H_404_22@/pubdate@H_404_22@>
@H_404_22@<Subject@H_404_22@>西游记@H_404_22@<@H_404_22@/Subject@H_404_22@>
@H_404_22@<@H_404_22@/book@H_404_22@>
@H_404_22@<book@H_404_22@>
@H_404_22@<author@H_404_22@>Kater@H_404_22@<@H_404_22@/author@H_404_22@>
@H_404_22@<pubdate@H_404_22@>2015-11-11@H_404_22@<@H_404_22@/pubdate@H_404_22@>
@H_404_22@<Subject@H_404_22@>娃哈哈@H_404_22@<@H_404_22@/Subject@H_404_22@>
@H_404_22@<@H_404_22@/book@H_404_22@>
@H_404_22@<@H_404_22@/books@H_404_22@>

效果：当点击页面上的button后，会alert出一个框，其中内容为xml文件中的内容。然后在html页面中id=result的div中显示xml中的信息。

ajax 与XMLHttpRequest对象(1/4)

相关文章