AJAX学习笔记

VerRan

浏览: 458795 次
性别:
来自: 陕西.西安

最近访客更多访客>>

guochaohui

baqqioku

251859257

lichina

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

AJAX

Ajax XML IE Safari JavaScript

代码:
mainhtml

<script type="text/javascript" language="javascript">
function makeRequest(url) {
var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
if (httpRequest.overrideMimeType) {
httpRequest.overrideMimeType('text/xml');
// See note below about this line
}
} else if (window.ActiveXObject) { // IE
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
if (!httpRequest) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
httpRequest.onreadystatechange = function() { alertContents(httpRequest); };//当服务器将响应信息返
//回时要作的事情这个时一个回掉函数
httpRequest.open('GET',url,true);//
httpRequest.send(null);
}
function alertContents(httpRequest) {
if (httpRequest.readyState == 4) {//4表示 If the state has the value of 4,
//that means that the full server response is received and it's OK for you to continue processing it.
//大概意思是说如果状态是4的话服务器相应是被接受到同时服务器正常能够为您继续处理请求
if (httpRequest.status == 200) {//200表示http服务响应正常
var xmldoc = httpRequest.responseXML;
var root_node = xmldoc.getElementsByTagName('root').item(0);
alert(root_node.firstChild.data);
document.write(root_node.firstChild.data);//输出xml文件的内容并且没有刷新和重定向
//可见当点击连接的时候
} else {
alert('There was a problem with the request.');
}
}
}
script>
<span
style="cursor: pointer; text-decoration: underline"
onclick="makeRequest('test.xml')">
Make a request
span>

testxml

xml version="1.0" ?>
<root>
I am a test xml file!!!!!!!!!
root>

1. ajax的执行过程<o:p></o:p>

首先当用户触发一个事件的时候这个事件调用一个用于创建xmlhttprequest的函数,然后再由这个函数去访问服务器,,服务器再看是否需要访问数据库如果需要则访问完数据库后将结果传给xmlhttprequest,然后由它调用一个回掉函数来将结果显示给用户.

<o:p></o:p>

1.1第一步创建xmlHttpRequest对象<o:p></o:p>

var httpRequest;<o:p> </o:p>

if (window.XMLHttpRequest) { // Mozilla, Safari, ...

httpRequest = new XMLHttpRequest();

if (httpRequest.overrideMimeType) {

httpRequest.overrideMimeType('text/xml');

// See note below about this line

}

} else if (window.ActiveXObject) { // IE

try {

httpRequest = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

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

} catch (e) {

}

if (!httpRequest) {

alert('Giving up :( Cannot create an XMLHTTP instance');

return false;

}

<o:p> </o:p>

}

1.2然后由xmlhttprequest对象来访问服务器<o:p></o:p>

httpRequest.onreadystatechange = function() { alertContents(httpRequest); };//当服务器将响应信息返回时要作的事情这个时一个回掉函数

1.3还有就是当返回信息的时候要对服务器和http请求的状态进行判断,要是正常则执行回掉函数中的操作.<o:p></o:p>

if (httpRequest.readyState == 4) {//4表示 If the state has the value of 4,

//that means that the full server response is received and it's OK for you to continue processing it.

//大概意思是说如果状态是4的话服务器相应是被接受到同时服务器正常能够为您继续处理请求

if (httpRequest.status == 200) {//200表示http服务响应正常

var xmldoc = httpRequest.responseXML;

var root_node = xmldoc.getElementsByTagName('root').item(0);

alert(root_node.firstChild.data);

document.write(root_node.firstChild.data);//输出xml文件的内容并且没有刷新和重定向

//可见当点击连接的时候

<o:p> </o:p>

} else {

alert('There was a problem with the request.');

}

1.4调用部分<o:p></o:p>

由此事件进行触发<o:p></o:p>

style="cursor: pointer; text-decoration: underline"

onclick="makeRequest('test.xml')">

Make a request

此例子的功能是,当用户点击一个链接时,则在步刷新的前提吓将xml文件的相关内容显示在main.html文件上.实现了很好的交互性.<o:p> </o:p>

分享到：

最佳男友守则 | po和vo的区别与关系

2007-02-28 15:24
浏览 1703
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论