【AJAX入门】--异步JavaScript
引言
时代在进步我们也要跟着往前跑啊，以前的文章大部分都是在论述C/S很重要，而且对于程序员来说C/S是基础，但是在如今信息革命时代，网络大行其道只懂C/S是远远不够的，还要精通B/S，接下来的文章就要开始论述B/S技术了。那就从AJAX开始吧。
一、B/S+AJAX
1.1 B/S综述
对于HTML、XML、CSS、Javascript应该都不陌生，它们都是B/S的编程语言，在开发浏览器应用程序时这几种语言必不可少，CSS的出现使得我们的网页布局独立于网页本身，能更方便的开发网页UI。对于Javascript它是一种动态的网页脚本语言，提供了更好的动态网页程序的开发，能够制作出很漂亮的网页效果，另外它的处理是在Browser端减少了Browser和服务器的交互，这也是它优于asp.net的地方。
Note:有关HTML和XML的内容请查看笔者的前篇博客。上面系统了解了B/S应用程序中的几种编程语言，但对于AJAX却没有说明。可能对于没有接触过AJAX的童鞋来说，它可能是一种很困难、很尖端的技术（至少对于以前的我来说是这样的），但通过了解后发现AJAX很简单，因为它基本上类似于JQuery是一种Web应用程序的技术。
1.2 AJAX概述
AJAX= 异步 JavaScript 及 XMLAJAX 全称是Asynchronous JavaScript And XML，它是指异步 JavaScript 及 XML，它不是一种新的编程语言，而是一种创建更好更快、交互性更强的Web技术。使用XMLHttpRequest对象来直接与服务器进行通信，使得JavaScript可在不重载页面的情况下与 Web 服务器交换数据。
表1 AJAX的应用情况
|
应 用 情 况 |
说 明 |
|
基于表单的简单用户交互 |
如用户注册验证、数据格式验证等。如果采取整页回发（PostBack）到服务器做法，不仅传输数据量大、服务器负担重、响应时间长，而且会导致用户体验很差。在验证结束后，由于某些数据错误返回注册页面时，先前输入的数据都已不存在了，必须重新填写。而采用Ajax技术后，这些任务在用户填写其他信息时，已有XMLHTTPRequest对象异步完成，极大地改善用户操作体验 |
|
时时更新的页面信息 |
如聊天室信息、在线统计、股票的涨跌等。这类系统都需要实时地反映数据的变化。采用Ajax技术能定时异步访问服务器，可以获得最新信息并将其显示给用户，而且可以避免整个页面的刷新 |
|
菜单导航 |
如多级联动菜单、树状导航等。可以采用Ajax技术来实现按需读取数据的功能，这可以避免每次变动都需要整页回发（PostBack）到服务器，从而节省带宽资源，提高响应速度，也减少显示所有数据时所要消耗的带宽资源 |
|
评论、选择投票 |
这几种情况传输的数据量非常小，因而没有必要将整个页面回发（PostBack）到服务器。采用Ajax技术，用户在执行完相关操作后，将异步与服务器进行自动交互，而用户同时可以继续执行其他操作 |
二、AJAX运行机制
图2 Ajax Web应用程序的模型
（1）用户在Web页面上执行了某个操作，如单击某个链接，或进行某项选择等。
（2）根据用户的操作，页面产生相应的DHTML事件。
（3）调用注册到该DHTML事件的客户端JavaScript事件处理函数。其中需要创建并初始化一个用以向服务器发送异步请求的XMLHttpRequest对象，同时指定一个回调函数。当服务器端的响应返回时，将自动调用该回调函数。
（4）服务器收到XMLHttpRequest对象的请求之后，根据请求进行一系列的处理。
（5）处理完毕，服务器端向客户端返回所需要的数据。
（6）数据到达客户端之后，执行JavaScript回调函数，并根据返回的数据对用户显示界面进行更新。
（7）用户获得自己操作所需的数据，即为看到显示界面的变化。
三、XMLHttpRequest对象
XMLHttpRequest 对象，使得web 开发者可以做到在页面已加载后从服务器更新页面！
XMLHttpRequest 对象，是AJAX的重点，它封装了DOM对象的基本操作方法和属性，另外不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的，对于IE 浏览器使用 ActiveXObject，而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。所以在使用AJAX时首先必须要做的是判断浏览器的类型，代码如下：
<html>
<head>
<title>AJAX的多浏览器支持示例</title>
</head>
<body>
<script type="text/javascript">
//验证浏览器的类型，根据浏览器的类型创建XMLHttpRequest对象
function ajaxFunction(){
var xmlHttp;
//******************************************************************************
//方法一：使用try-catch的方法判断是否支持AJAX
try{
xmlHttp=new XMLHttpRequest();
}catch(e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alert("您的浏览器不支持AJAX！")；
return false;
}
}
}
//******************************************************************************
//******************************************************************************
//方法二：使用if-else的方法判断是否支持AJAX
if(window.ActiveXObject){
//IE浏览器
}if (window.ActiveXObject) {
//针对IE6，IE5.5，IE5
//两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中
//排在前面的版本较新
var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for (var i = 0; i < activexName.length; i++) {
try{
//取出一个控件名进行创建，如果创建成功就终止循环
//如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建
xmlhttp = new ActiveXObject(activexName[i]);
break;
} catch(e){
}
}
}
//******************************************************************************
}
</script>
</body>
</html>
XMLHttpRequest使用的基本步骤：
（1）建立XMLHttpRequest对象（2）注册回调函数
（3）使用open方法设置和服务器端交互的基本信息
（4）设置发送的数据，开始和服务器端交互
（5）在回调函数中判断交互是否结束，相应是否正确，并根据需要获取服务器端返回的数据，更新页面代码。
//用户名校验的方法
//这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交互
var xmlhttp;
function verify() {
//0。使用dom的方式获取文本框中的值
//document.getElementById("userName")是dom中获取元素节点的一种方法，一个元素节点对应HTML页面中的一个标签，如果<input>
//。value可以获取一个元素节点的value属性值
var userName = document.getElementById("userName").value;
//1.创建XMLHttpRequest对象
//这是XMLHttpReuquest对象五部使用中最复杂的一步
//需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码
if (window.XMLHttpRequest) {
//针对FireFox，Mozillar，Opera，Safari，IE7，IE8
xmlhttp = new XMLHttpRequest();
//针对某些特定版本的mozillar浏览器的BUG进行修正
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) {
//针对IE6，IE5.5，IE5
//两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中
//排在前面的版本较新
var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for (var i = 0; i < activexName.length; i++) {
try{
//取出一个控件名进行创建，如果创建成功就终止循环
//如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建
xmlhttp = new ActiveXObject(activexName[i]);
break;
} catch(e){
}
}
}
//确认XMLHTtpRequest对象创建成功
if (!xmlhttp) {
alert("XMLHttpRequest对象创建失败!!");
return;
} else {
alert(xmlhttp.readyState);
}
//2.注册回调函数
//注册回调函数时，只需要函数名，不要加括号
//我们需要将函数名注册，如果加上括号，就会把函数的返回值注册上，这是错误的
xmlhttp.onreadystatechange = callback;
//3。设置连接信息
//第一个参数表示http的请求方式，支持所有http的请求方式，主要使用get和post
//第二个参数表示请求的url地址，get方式请求的参数也在url中
//第三个参数表示采用异步还是同步方式交互，true表示异步
xmlhttp.open("GET",url,true);
//POST方式请求的代码
//xmlhttp.open("POST","AJAXServer",true);
//POST方式需要自己设置http的请求头
//xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//POST方式发送数据
//xmlhttp.send("name=" + userName);
//4.发送数据，开始和服务器端进行交互
//同步方式下，send这句话会在服务器段数据回来后才执行完
//异步方式下，send这句话会立即完成执行
xmlhttp.send(null);
}
//回调函数
function callback() {
//alert(xmlhttp.readyState);
//5。接收响应数据
//判断对象的状态是交互完成
if (xmlhttp.readyState == 4) {
//判断http的交互是否成功
if (xmlhttp.status == 200) {
//获取服务漆器端返回的数据
//获取服务器段输出的纯文本数据
var responseText = xmlhttp.responseText;
//将数据显示在页面上
//通过dom的方式找到div标签所对应的元素节点
var divNode = document.getElementById("result");
//设置元素节点中的html内容
divNode.innerHTML = responseText;
} else {
alert("出错了！！！");
}
}
}
上面的代码示例演示类XMLHttpRequest在使用过程中需要执行的五个步骤，其中最困难的是XMLhttpRequest的创建，不同的浏览器在创建该对象时会有所差异，另外还有设置连接信息，有GET和POST两种方式，两种创建方式有很大的区别。有关XMLHttpRequest的API说明请下载：XMLHttpRequest方法和属性API。
三、Ajax示例
编写了一个注册的案例，使用的是Ajax进行用户信息的验证。该案例通过对会员昵称（用户名）进行验证，即根据该用户名是否已经被使用，在不进行页面刷新的情况下给出相应的提示信息。如下图为注册页面的UI界面：
完整的代码示例请下载：AJAX登陆示例。
会员注册页面：Default.aspx，使用的是基本的HTML控件，在昵称后面放置了一个<span>标签用来提示用户输入的信息是否合法，其中交互过程使用的是AJAX来实现。
<form id="form1" runat="server">
<script language="javascript" src="Scripts/tool.js"></script>
<div>
<h2>会员注册</h2>
</div>
<div>
<asp:Panel ID="Panel1" runat="server">
<div>
完成下面的注册，即可成为我们的会员
</div>
</asp:Panel>
<div>
昵 称：<input id="iUserName" type="text" onblur="userCheck()" style=" height:20px; width:200px;"/>
<span id="showmsgform"></span><br />
邮 箱：<input id="Text1" type="text" style=" height:20px; width:200px;"/>
<br />
密 码：<input id="Text2" type="text" style=" height:20px; width:200px;"/>
<br />
<input id="btnSubmit" type="submit" value="确 定" />
<input id="btnCancel" type="submit" value="取 消" />
</div>
</div>
</form>
Tool.js，内部Ajax代码的执行过程。userCheck方法用来验证数据用户的用户名，如果不为空将调用AJAX代码向checkUserName.aspx页面传递用户名参数，并在checkUserName.aspx查询数据库中的用户名来验证输入的用户名是否正确。
//检查用户是否存在
function userCheck() {
//获取用户输入的用户名
var username = document.getElementById("iUserName").value;
//判断用户名是否输入，如果用户名为空将显示提示语句
if (username == "") {
//显示提示语句
document.getElementById("showmsgform").innerHTML = "<font color=‘Red‘>会员昵称不能为空</font>";
//用户名框重新获得焦点
document.getElementById("iUserName").focus();
return false;
} else {
send_request(‘checkUserName.aspx?username=‘ + username + ‘&r=‘ + Math.random());
}
}
//向服务器发送请求函数
var http_request = false;
function send_request(url) {
//初始化，指定处理函数，发送请求的函数
http_request = false;
//开始初始化XMLHttpRequest对象
if (window.XMLHttpRequest) {
//非IE浏览器
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
//IE浏览器
try{
http_request=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try
{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
//判断http_request是否创建成功
if (!http_request) {
alert("该浏览器不支持AJAX！");
return false;
}
//注册回调函数
http_request.onreadystatechange = processRequest;
//设置连接信息
//第一个参数表示http的请求方式，支持所有http的请求方式，主要使用get和post
//第二个参数表示请求的url地址，get方式请求的参数也在url中
//第三个参数表示采用异步还是同步方式交互，true表示异步
http_request.open("GET", url, true);
//发送数据，开始和服务器端进行交互
http_request.send(null);
}
//处理返回信息的函数processRequest()
function processRequest() {
if (http_request.readyState==4) {
// 判断对象状态
if (http_request.status == 200) {
// 信息已经成功返回,开始处理信息
var str = http_request.responseText;
showMsg(str);
}
else {
//页面不正常
alert("您所请求的页面有异常.");
}
}
}
//根据返回结果，显示信息
function showMsg(str)
{
if(str == "1")
{
document.getElementById("showmsgform").innerHTML = " <font color=‘Red‘>昵称可以使用！</font> ";
}
else if(str == "2")
{
document.getElementById("showmsgform").innerHTML = "<font color=‘Red‘>会员昵称已存在！</font>";
}
else if(str == "3")
{
document.getElementById("showmsgform").innerHTML = "<font color=‘Red‘>会员昵称不能为空！</font>";
}
}
结语
有关AJAX基础部分的内容已经讨论完成，从B/S到AJAX再到AJAX运行机制的解析，系统的了解了B/S架构的内容以及AJAX技术的便利性。其次对XMLHttpRequest对象进行了大致的应用解析，该对象是AJAX应用的基础，封装了页面的基本信息，最后通过示例来加深联系。说到这里有关AJAX的内容还没有完结，下篇博客让我们来看看AJAX是如何操作DOM对象的。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
