【AJAX入门】--异步JavaScript_js ajax异步教程-优快云博客

引言

时代在进步我们也要跟着往前跑啊，以前的文章大部分都是在论述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 及 XML

AJAX 全称是Asynchronous JavaScript And XML，它是指异步 JavaScript 及 XML，它不是一种新的编程语言，而是一种创建更好更快、交互性更强的Web技术。使用XMLHttpRequest对象来直接与服务器进行通信，使得JavaScript可在不重载页面的情况下与 Web 服务器交换数据。

表1 AJAX的应用情况

应用情况	说明
基于表单的简单用户交互	如用户注册验证、数据格式验证等。如果采取整页回发（PostBack）到服务器做法，不仅传输数据量大、服务器负担重、响应时间长，而且会导致用户体验很差。在验证结束后，由于某些数据错误返回注册页面时，先前输入的数据都已不存在了，必须重新填写。而采用Ajax技术后，这些任务在用户填写其他信息时，已有XMLHTTPRequest对象异步完成，极大地改善用户操作体验
时时更新的页面信息	如聊天室信息、在线统计、股票的涨跌等。这类系统都需要实时地反映数据的变化。采用Ajax技术能定时异步访问服务器，可以获得最新信息并将其显示给用户，而且可以避免整个页面的刷新
菜单导航	如多级联动菜单、树状导航等。可以采用Ajax技术来实现按需读取数据的功能，这可以避免每次变动都需要整页回发（PostBack）到服务器，从而节省带宽资源，提高响应速度，也减少显示所有数据时所要消耗的带宽资源
评论、选择投票	这几种情况传输的数据量非常小，因而没有必要将整个页面回发（PostBack）到服务器。采用Ajax技术，用户在执行完相关操作后，将异步与服务器进行自动交互，而用户同时可以继续执行其他操作

二、AJAX运行机制

Ajax应用程序的加载过程与传统的Web应用程序类似。某个用户操作引发浏览器的一次HTTP请求。服务器接收请求并处理这个请求，生成合适的执行结果发送至客户端。客户端浏览器经过处理将数据（HTML+CSS）显示出来。

图1 Ajax Web应用程序的结构

图2 Ajax Web应用程序的模型

     从图3中所示可知，Ajax应用程序与服务器进行一次交互的过程可以分为7个步骤，具体如下所示。
      （1）用户在Web页面上执行了某个操作，如单击某个链接，或进行某项选择等。
      （2）根据用户的操作，页面产生相应的DHTML事件。

（3）调用注册到该DHTML事件的客户端JavaScript事件处理函数。其中需要创建并初始化一个用以向服务器发送异步请求的XMLHttpRequest对象，同时指定一个回调函数。当服务器端的响应返回时，将自动调用该回调函数。

（4）服务器收到XMLHttpRequest对象的请求之后，根据请求进行一系列的处理。
（5）处理完毕，服务器端向客户端返回所需要的数据。

（6）数据到达客户端之后，执行JavaScript回调函数，并根据返回的数据对用户显示界面进行更新。

（7）用户获得自己操作所需的数据，即为看到显示界面的变化。

图3 AJAX应用程序一次与服务器进行交互的过程

三、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对象的。