第一个Ajax小程序，了解Ajax原理
今天看<ajax基础教程>，开始学习ajax底层的一些东西，对理解atlas会有帮助。下面是ajax最简单的代码
----innerHTML.htm----
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>User ResponseText With innerHTML</title>
<script type="text/javascript">
var xmlHttp;//声明全局XmlHttpRequest
function createXMLHttpRequest() //创建一个xmlhttprequest
{
if(window.ActiveXObject)//IE浏览器把xmlhttprequest看成一个activeX控件。
{
xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
}
else//其他浏览器
{
xmlHttp= new XMLHttpRequest();
}
}
function startRequest()
{
createXMLHttpRequest();
xmlHttp.onreadystatechange=handleStateChange;//设定请求状态改变时，响应的函数
xmlHttp.open("GET","innerHTML.xml",true);//建立调用，向innerHTML.xml发送请求，innerHTML.xml模拟服务器
xmlHttp.send();//发送请求
}
function handleStateChange()
{
if(xmlHttp.readyState==4)//请求完成，0=未初始化；1=正在加载；2=已加载；3=交互中；4=完成
{
if(xmlHttp.status==200)//请求状态，200为正常返回。
{
document.getElementById("results").innerHTML=xmlHttp.responseText;//返回文本绘制页面
}
}
}
</script>
</head>
<body>
<form action="#">
<input type="button" value="click me" onclick="startRequest();"/>
<div id="results"></div>
</form>
</body>
</html>
---innerHTML.xml
<table border="1">
<tr>
<th>Activity Name</th>
<th>Location</th>
<th>Time</th>
</tr>
<tr>
<th>WaterSkiing</th>
<th>Dock #1</th>
<th>9:00 AM</th>
</tr>
<tr>
<th>WaterSkiing</th>
<th>Dock #1</th>
<th>9:00 AM</th>
</tr>
<tr>
<th>WaterSkiing</th>
<th>Dock #1</th>
<th>9:00 AM</th>
</tr>
</table>
一个XmlHttpRequest与普通的Http请求流程上没有太大的差别，具体分为：
1.open():建立对服务器的调用，这里设定调用是异步还是同步，这里的异步也就是Ajax里面那个大A。设定为同步，处理只有等待服务器返回相应才继续。一般情况下设定为True，这才与XmlHttpRequest初衷相符合。
2.send(content):向服务器发送请求。
3.得到responseText或者responseXml进行处理。
以上代码对各步骤进行了说明。Ajax核心就是处理XmlHttpRequest对象，深入学习，需要对javascript面向对象编程有深入的了解。这样可以把js代码与html完全分离，实现自己的业务逻辑。
----innerHTML.htm----
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>User ResponseText With innerHTML</title> <script type="text/javascript">
var xmlHttp;//声明全局XmlHttpRequest function createXMLHttpRequest() //创建一个xmlhttprequest {
if(window.ActiveXObject)//IE浏览器把xmlhttprequest看成一个activeX控件。 { xmlHttp= new ActiveXObject("Microsoft.XMLHTTP"); } else//其他浏览器 { xmlHttp= new XMLHttpRequest(); } } function startRequest() { createXMLHttpRequest(); xmlHttp.onreadystatechange=handleStateChange;//设定请求状态改变时，响应的函数 xmlHttp.open("GET","innerHTML.xml",true);//建立调用，向innerHTML.xml发送请求，innerHTML.xml模拟服务器 xmlHttp.send();//发送请求 } function handleStateChange() { if(xmlHttp.readyState==4)//请求完成，0=未初始化；1=正在加载；2=已加载；3=交互中；4=完成 { if(xmlHttp.status==200)//请求状态，200为正常返回。 { document.getElementById("results").innerHTML=xmlHttp.responseText;//返回文本绘制页面 } } } </script></head><body><form action="#"><input type="button" value="click me" onclick="startRequest();"/><div id="results"></div></form></body></html>---innerHTML.xml
<table border="1"><tr><th>Activity Name</th><th>Location</th><th>Time</th></tr><tr><th>WaterSkiing</th><th>Dock #1</th><th>9:00 AM</th></tr><tr><th>WaterSkiing</th><th>Dock #1</th><th>9:00 AM</th></tr><tr><th>WaterSkiing</th><th>Dock #1</th><th>9:00 AM</th></tr></table>1.open():建立对服务器的调用，这里设定调用是异步还是同步，这里的异步也就是Ajax里面那个大A。设定为同步，处理只有等待服务器返回相应才继续。一般情况下设定为True，这才与XmlHttpRequest初衷相符合。
2.send(content):向服务器发送请求。
3.得到responseText或者responseXml进行处理。
以上代码对各步骤进行了说明。Ajax核心就是处理XmlHttpRequest对象，深入学习，需要对javascript面向对象编程有深入的了解。这样可以把js代码与html完全分离，实现自己的业务逻辑。
