ajax学习笔记(一)_H5之家 - 中国HTML5教程资源分享第一站

ajax技术一个经常的应用就是刷新部分页面，用传统的技术也可以实现这一点。传统的方法一般是用IFRAME来实现页面的刷新并可调用远程脚本，不过这种方法总使人觉得有些牵强（也许是因为在页面中使用了一种控件）。下面写出学习中的一个例子，比较传统方法和ajax的不同，以感受其差别。

首先看一下利用iframe是怎么实现的

iframe.htm的代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>iframe网页</title>
<script language=javascript type=text/javascript>


function sayHello()
{
alert("hello");
}

</script>
</head>
<body>
<h1>刷新部分页面</h1>
<iframe name="beforexhr" src="" style="boder:0px"></iframe>

<a href="server.htm" target="beforexhr" >call server</a>
</body>
</html>

server.htm的代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>server</title>
<script language=javascript type=text/javascript>
window.parent.sayHello();
</script>
</head>
<body>
刷新成功
</body>
</html>

这样就完成了页面的部分刷新，并模拟了远程脚本的调用。可以看出其基本思想是把要刷新的那部分页面做成iframe，然后利用iframe的属性来控制页面的刷新。这种刷新本质上还是用一个新的页面来替换旧页面，效率并不高，因为为了利用iframe不得不把要刷新的那一小部分页面做成一个独立的页面。

再来看一下一个简单ajax的例子

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>simpleRequest</title>
<script language=javascript>
var xmlHttp;

function createXMLHttpRequest()
{
//判断浏览器是否支持ActiveXObject对象
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//判断浏览器是否支持XMLHttpRequest对象
else if (window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}


function startRequest()
{
createXMLHttpRequest();
//设置在请求结束后调用handleStateChange函数
xmlHttp.onreadystatechange = handleStateChange;
//用get方法请求服务器端的simple.xml
xmlHttp.open("GET","simple.xml",true)
//发送请求
xmlHttp.send(null);
}


function handleStateChange()
{
if(xmlHttp.readyState == 4) {
   if(xmlHttp.status == 200) {
       alert(xmlHttp.responseText);
   }
}
</script>
</head>
<body>
<form action="#">
<p><input type="button" value="按钮" name="B3" onclick="startRequest();"></p>
</form>
</body>
</html>

simple.xml中随便写一句话就可以了

ajax的核心是XMLHttpRequest对象，利用它可以在客户和服务器之间传递xml格式的数据，并用此数据刷新部分页面。