1>:今天重新回到对AJAX的认识，首先从AJAX的由来说起，由于感觉自己才疏学浅，
我感觉只有了解了WEB的发展历史，我们才能更好地理解并运用AJAX。
2>:其实AJAX最大的应用就是我们要理解XMLHttpRequest这个对象。XMLHttpRequest可以提供不重新加载页面的情况下更新网页，在页面加载后在客户端向服务器请数 据， 在 页面加载后在服务器端接受数据，在后台向客户端发送数据。XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。
3>:我们如何创建一个XMLHttpRequest对象呢？
首先我们要知道XMLHttpRequest对象开始时有微软开发的一个基于IE5，IE6的一个插件，所以他在IE浏览器中肯定有自己的创建方式，IE中把他实现成一个ActiveX对象，但其他浏览器如果也想使用 XMLHttpRequest对象，就必须依靠JAVASCRIPT创建本地对象。我们在使用时不需要判断浏览器的类型，只需要看浏览器提供对ActiveX的支持。
下面就是XMLHttpRequest的创建方式：
[javascript] view plaincopyprint?
01.function createXHR()
02.{
03. if(window.ActiveXObject)
04. {
05. xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
06. }
07. else if(window.XMLHttpRequest)
08. {
09. xmlHttpRequest=new XMLHttpRequest();
10. }
11. if(null==xmlHttpRequest)
12. {
13. alert("浏览器不支持");
14. }
15.}
function createXHR()
{
if(window.ActiveXObject)
{
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttpRequest=new XMLHttpRequest();
}
if(null==xmlHttpRequest)
{
alert("浏览器不支持");
}
}4>:介绍XMLHttpRequest的常用属性、方法：
百度其实是个好东西，我没必要复制粘贴：大家可以参考http://baike.baidu.com/view/1105115.htm
5>:XMLHttpRequest的应用：
其实要理解AJAX并学会运用我们只要掌握三方面内容，第一就是XMLHttpRequest对象的创建。第二就是如何从表单获取值并传到服务器。第三就是如何从后台获取数据显示在前台。大家想想AJAX的应用是不是就是围绕这三方面。
下面我们来简单说一下如何从表单获取值的问题：其实只要稍微了解点JavaScript的热你都知道我们DOM文档模型，通过操纵文档对象模型中对象的属性并调用其方法，可以使脚本按照一定的方式显示Web页并与用户的动作进行交互。
我们常用的就是document.getElementById("id").value.来获取网页中的数据。其他的大家用到就百度。
我们获取到值之后就是把这个值传给后台：这里我们一般采用get:方式提交，采用url传参。通过调用：xmlHttpRequest.open("get","url?paramater="+value,true);
最后就是如何从后台获取值传到前台显示：这里是通过xmlHttpRequest.responseText（返回一个字符串）xmlHttpRequest.responseXML返回一个XML文件。
我们可以通过解析这两种值插入到页面中：通常我们用到的显示在htbml中方式是：通过document.getElementById("id").value=xmlHttpRequest.responseText;
或者document.getElementById("id").innerHTML=xmlHttpRequest.responseText;
知道了这些我们先做一个简单地例子：
[javascript] view plaincopyprint?
01.<script type="text/javascript">
02. var xmlHttpRequest=null;
03. function createXHR()
04. {
05. if(window.ActiveXObject)
06. {
07. xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
08. }
09. else if(window.XMLHttpRequest)
10. {
11. xmlHttpRequest=new XMLHttpRequest();
12. }
13. if(null!=xmlHttpRequest)
14. {
15. var v1=document.getElementById("num1").value;
16. var v2=document.getElementById("num2").value;
17. xmlHttpRequest.open("get","servlet/AjaxServlet?v1="+v1+"&v2="+v2,true);
18. xmlHttpRequest.onreadystatechange=callback;
19. xmlHttpRequest.send(null);
20. }
21. }
22. function callback()
23. {
24. if(xmlHttpRequest.readyState==4)
25. {
26. if(xmlHttpRequest.status==200)
27. {
28. var responseText=xmlHttpRequest.responseText;
29. document.getElementById("num3").innerHTML=responseText;//innerHTML不能小写
30. }
31. }
32. }
33. </script>
<script type="text/javascript">
var xmlHttpRequest=null;
function createXHR()
{
if(window.ActiveXObject)
{
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttpRequest=new XMLHttpRequest();
}
if(null!=xmlHttpRequest)
{
var v1=document.getElementById("num1").value;
var v2=document.getElementById("num2").value;
xmlHttpRequest.open("get","servlet/AjaxServlet?v1="+v1+"&v2="+v2,true);
xmlHttpRequest.onreadystatechange=callback;
xmlHttpRequest.send(null);
}
}
function callback()
{
if(xmlHttpRequest.readyState==4)
{
if(xmlHttpRequest.status==200)
{
var responseText=xmlHttpRequest.responseText;
document.getElementById("num3").innerHTML=responseText;//innerHTML不能小写
}
}
}
</script>[html] view plaincopyprint?
01.<form method="" action="">
02. <table border="1" borderstyle="solid" cellpacing="0" >
03. <tr><td><input type="text" id="num1"/></td></tr>
04. <tr><td><input type="text" id="num2"/></td></tr>
05. <tr><td><input type="button" value="submit" onclick="createXHR()"/></td></tr>
06. <tr><td><span id="num3"></span></td></tr>
07. </table>
08. </form>
<form method="" action="">
<table border="1" borderstyle="solid" cellpacing="0" >
<tr><td><input type="text" id="num1"/></td></tr>
<tr><td><input type="text" id="num2"/></td></tr>
<tr><td><input type="button" value="submit" onclick="createXHR()"/></td></tr>
<tr><td><span id="num3"></span></td></tr>
</table>
</form>以上代码有借鉴http://blog.csdn.net/csh624366188/article/details/7670500大家也可以去看。
还有两哥问题一：如何将结果显示在下拉列表，第二如何读取XML文件，这个稍后介绍。