AJAX的学习与理解

1>:今天重新回到对AJAX的认识，首先从AJAX的由来说起，由于感觉自己才疏学浅，建议大家去阅读这篇文章http://wenku.baidu.com/view/17086494dd88d0d233d46ae6.html，

我感觉只有了解了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的创建方式：

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文件。

我们可以通过解析这两种值插入到页面中：通常我们用到的显示在html中方式是：通过document.getElementById("id").value=xmlHttpRequest.responseText;

或者document.getElementById("id").innerHTML=xmlHttpRequest.responseText;

知道了这些我们先做一个简单地例子：

<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>

<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>

以上代码有借鉴/article/1359033.html大家也可以去看。

还有两哥问题一：如何将结果显示在下拉列表，第二如何读取XML文件，这个稍后介绍。