AJAX学习心得分享----（一）AJAX初识+原生态AJAX
对于做web开发的朋友一定对Ajax这个名字一点也不陌生，那么Ajax到底是个什么呢？先从字面上进行解释。所谓的Ajax即是Asynchronous JavaScript + XML的简写，事实上，它是用Javascript来进行绑定和调用，通过使用XMLHttpRequest同服务器进行异步通信，用Dom模型来交互、动态的显示，最后再用CSS+XHTML来进行表示，通过这一些列技术的综合运用为用户提供良好的用户体验的一种技术。
还是延续以往的作风吧，通过一个小的登录示例给大家先初步的讲解一下Ajax的具体应用。
该示例主要是用来模拟一个用户登录。
新建一个html页布局如下：
<body>
<table style="background-color:lightblue; margin-top:300px; margin-left:300px">
<tr>
<td><label>姓名：</label>
</td>
<td>
<input id="txtname" type="text" />
</td>
</tr>
<tr><td><label>密码：</label></td>
<td>
<input id="txtpwd" type="password" /></td></tr>
<tr><td>
<input id="btndl" type="button" value="登录" onclick="SayHello()" /></td>
<td>
<input id="btnqx" type="button" value="取消" /></td></tr>
</table>
</body>
如图：
然后在<head></head>里边添加如下的两个函数（该函数必须包含在<script></script>中）：
<script type="text/javascript">
var xmlhttp = false;//全局xmlhttp对象
//作用：创建HttpRequest对象，该对象是Ajax的核心
function CreatHttpRequest() {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");//新版本的IE创建IE兼容对象
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//使用旧版本的IE创建IE兼容对象
} catch (e1) {
return false;
}
}
//如果xmlhttp对象为创建成功，或者对象为undefined则使用通用的方法创建xmlhttp对象，Mozilla、Opera、Safari 和 大部分非 Microsoft 浏览器已经IE7以后均采用此种方式创建。
if (!xmlhttp && xmlhttp == 'undefined') {
xmlhttp = new XMLHttpRequest();
}
}
function SayHello() {
CreatHttpRequest();
if (xmlhttp != null) {
var name = document.getElementById("txtname").value;//获得用户姓名
xmlhttp.open("Get", "SayHello.ashx?Name="+name+"&i="+Math.random(),true);//将用户姓名传给ashx页进行数据校验，i=Math.random()主要是为了避免get方式提交时受缓存的影响
xmlhttp.onreadystatechange = function () {
//xmlhttp.readState属性为说明Http请求状态，4为请求完毕，
//xmlhttp.status属性为从服务器发回的状态码，200为就绪
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText);//xmlhttp.responseText为从ashx页处理后的结果
}//每次 readyState 属性改变的时候调用的事件句柄函数,后边跟的是一个匿名的函数，每次属性改变都会调用该函数
}
xmlhttp.send();//只有调用了send()方法才能真正的向服务器发送请求，函数参数可以为null，一般也可不填
}
Else{
alert（"HttpRequest对象创建失败");
}
}
</script>
下面说下SayHello.ashx页（即一般处理程序页）
代码如下：仅仅是读取用户输入的姓名，并返回"Hello"+用户姓名，这里主要做演示demo用，所以就没有从数据库读取信息。
public void ProcessRequest(HttpContext context)
{
var name = context.Request["Name"].ToString();
context.Response.Write("Hello !"+name);
}
结果：
Ok，到这里你已经实现了你的第一个Ajax程序了，赶快测试一下看看吧。通过测试你会发现，在页面并没有刷新的情况话，从我们的模拟后台数据库中读取到了相应的数据，返回了我们想要的结果，这样的用不体验是不是比一点击登陆页面就会瞬间变白重绘要好很多呢？如果数据检索的时间比较长页面就会持续的变白，这样的用户的体验效果会很差的。你有没有体验到Ajax带来的美感呢？我想现在你肯定有很多的不明白，下面我会给你细细的详解一番。
首先来看第一个函数，该函数的主要作用是生成一个HttpRequest对象，何为HttpRrequest对象呢？HttpRequest是AJAX的核心，它是在IE5中首先引入的，是一种支持异步请求的技术。Javascript可以及时向服务器提出请求和处理响应，获取到服务器的数据，然后再通过DOM将数据插入到页面中呈现。虽然名字中包含XML，但Ajax通讯与数据格式无关。具体的创建在函数里有具体的解析，这里就不再做重复的介绍了。
下面看第二函数，也就是实现AJAX的主体函数，在该函数中，我们先调用了CreateHttpRequest()函数，也就是先将全局变量xmlhttp实例化，然后获取用户的输入名。调用HttpRequest的open()方法，该方法只是用来初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。
该方法有三个参数第一个参数是说明Http方法，有两种形式一种是“get",另一个种是”post",两者的区别就相当于表单提交时如果使用get方法，就可以在url里看到提交的值，是显示的，不安全，post是隐式的，看不到提交的值，相对比较安全，上边的示例我们采用的是“get"方法，本文最后我会跟大家演示一下”post“方法。
第二个参数是一个url也就是后台要处理的页，也就是相对于执行代码的当前页面（使用绝对路径），本例中是“SayHello.ashx？Name="+name+"&i="+Math.Random()，做过asp.net 开发的朋友相信对这个一定都不陌生，是的，这里就相当于querystring传值，把你需要传递的值通过这种方法传递进入，如果有多个值的话跟QueryString一样使用“&”分割开来，后边又跟了一个参数”i“这里采用Math.Random()产生随机数，主要是为了解决的浏览器缓存问题，这样没每次提交的数据都不会一样，很好的解决了缓存问题。
第三个参数为是否设置为异步，在这里我们当然选择是异步操作，设置为"true"即可。
同步与异步的区别如下：
同步请求：发生请求后，要等待服务器执行完毕才继续执行当前代码。
异步请求：发生请求后，无需等到服务器执行完毕，可以继续执行当前代码
紧跟着下边是HttpRequest的onreadystateChange属性，具体可以理解为每次 readyState 属性改变的时候调用的事件句柄函数，所以在其后边紧跟了一个匿名的函数
在该匿名函数里首先在if条件判断里又用到了HttpRequest的两个属性，分别介绍下，
第一个是HttpRequest.readyState,还记得我们在上边open（）函数里设置的第三个参数，也就是是否设置为异步吗，我们设置的为true，也就是异步请求，所以在请求过程中javascript代码会继续执行，这时可以通过readyState属性判断请求的状态，当readyState = 4时，表示收到全部响应数据，属性值的定义如下：
| readyState值 |
描述 |
| 0 |
未初始化；尚未调用open()方法 |
| 1 |
启动；尚未调用send()方法 |
| 2 |
已发送；但尚未收到响应 |
| 3 |
接收；已经收到部分响应数据 |
| 4 |
完成；收到全部响应数据 |
下面看第二个属性：HttpRequest.status ：由服务器返回的 HTTP 状态代码 200表示OK一切正常，可以进行下一步的操作，当然还有其他的一些状态码，比如大家所知的404、303等，这里就不再做过多介绍了，只要用到HttpReques.status,我们记的拿它与200相比就可以了。当然还有另外一种状态的表示方式：HttpRequest.statusText, 这个属性用名称而不是数字指定了请求的 HTTP 的状态代码，仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。
然后我们看满足if条件时，执行的代码，这里边又用到了一个HttpRequest.responseText:
该属性的意思是如果满足了if()里的判断条件，则包含客户端接收到的HTTP响应的文本内容，如果不满足以上的readyState==4，则当readyState值为0、1或2时，responseText包含一个空字符串。当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。上边也有介绍，这里就不再重复了。此外还有一个HttpRequest.reponseXML 属性，此属性用于当接收到完整的HTTP响应时(readyState为4)描述XML响应；此时，Content-Type头部指定MIME(媒体)类型为text/xml，application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一，那么responseXML的值为null。
紧接下来要执行的是HttpRequest.send()函数，这个时候才真正的向服务器发送请求，send()方法接受一个参数，如果是用“get”的方式请求这里边可是设置为null也可以什么都写，因为“get"的方式所需传的值都通过url传递了，如果是”Post“的请求方式，则传递的参数可以写在send（）里。
下面附上使用Post的请求方式的Ajax代码
function SayHello() {
alert("hell0");
CreatHttpRequest();
if (xmlhttp != null) {
var name = document.getElementById("txtname").value;
xmlhttp.open("Post", "SayHello.ashx", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//使用Post方式请求时必须要加上这句话
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText);
}
}
xmlhttp.send("Name="+name+"&i="+Math.random());//传递所需的参数
}
到这里我已经基本上把HttpRequest的核心的东西给大家讲完了，通过这一章节的学习，我想你已经可以自如做到构建一个属于你的Ajax程序了，当然这些都只是些比较基础的Ajax的东西，这些都是原生态的Ajax，现在我们也可以使用JQuery实现Ajax，而且这个封装的也比较好，用起来也比较方便，但是我觉得我们还是有必要把Ajax的原理给搞清楚的，这样运用起来才会比较的自如。希望能对大家有所帮助，也希望大家多多指点！下一节我主要会讲通过JQuery的方式实现Ajax效果。