【B/S】走进AJAX

原创

wx645606081424e 2023-05-06 16:20:58 ©著作权

文章标签 ajax 企业异步应用 AJAX 文章分类 MySQL 数据库

©著作权归作者所有：来自51CTO博客作者wx645606081424e的原创作品，请联系作者获取转载授权，否则将追究法律责任

前言

小编也是第一次接触AJAX，个人还是感觉十分高大上的。比如一些词汇，异步，请求等，都是比较高深的，经过自己刻苦研究，自己也可以做一个AJAX的小程序，感到非常的开心。下面和大家一起分析分析AJAX到底是什么，有什么作用。

一、AJAX简介

在和大家分析之前，给大家提出一个现象：一个企业用户注册时的一个应用，当用户注册时检查用户名和企业名是否可用，以前的做法是在旁边加一个按钮，点击“检查”，就向服务器发出请求，然后等待……服务器返回信息，继续操作。

如果我们用AJAX技术来实现以上的操作则不必等待服务器返回信息，用户输入用户名或企业名称的时候，当输入文本框失去焦点的时候，则会自动向服务器发出请求，用户继续做下面的操作，不必点击“检查”，也不必等待服务器返回信息，检查与用户操作是异步的，可同时进行。当服务器信息返回的时候，会自动在面页相应位置显示返回信息，不必刷新页面，相当于局部刷新的效果。

【B/S】走进AJAX_异步

图一 注册人人网

         通过这个小例子，我们就可以看出，AJAX让我们的操作变得很简单，更加省时。下面是一些比较官方的解释：
         AJAX，异步JavaScript与Xml，是使用客户端脚本与Web服务器交换数据的Web应用开发方法。这样，Web页面不用打断交互流程进行重新加裁，就可以动态地更新。使用AJAX，你可以创建接近本地桌面应用的，直接的、高可用的、更丰富的、更动态的Web用户接口界面。
         AJAX(Asynchronous JavaScript and Xml)是一个结合了Java技术、Xml、以及JavaScript的编程技术，可以让你构建基于Java技术的Web应用，并打破了使用页面重载的惯例。

在这些官方的介绍中，提到了“异步”。到底什么是异步呢？
再请大家看一个例子：你叫我去吃饭，我听到了就立刻和你去吃饭，如果我没有听到，你就会一直叫我，直到我听见和你一起去吃饭，这个过程叫同步；异步过程指你叫我去吃饭，然后你就去吃饭了，而不管我是否和你一起去吃饭。而我得到消息后可能立即就走，也可能过段时间再走。如果我请你吃饭，就是同步，如果你请我吃饭就用异步，这样你比较省钱。哈哈哈。。。

好的，再让我们回到第一个例子，看看异步操作到底发现在哪里？首先我输入了我的邮箱，然后系统就开始判断，而我不管他是否可以使用，继续输入我的密码。是不是系统就跟我一样呢？用户就跟你一样？用户不管系统怎么回复，都可以继续操作=你不管我怎么回答，都会马上去吃饭。这就是异步的体现。

二、AJAX原理

要想知道AJAX的原理就要先了解一下传统的Web模型是什么样的：用户的动作会触发一个连接到Web服务器的HTTP请求，服务器完成处理后，返回一个HTML页面到客户端。

在AJAX模型中，通过用户和服务器之间引入一个Ajax引擎，可以消除旧的Web模型中的“开始–停止–开始–停止”的交互过程。会话开始，浏览器加载一个Ajax引擎：采用JavaScript编写并且通常在一个隐藏的框架中。这个引擎负责绘制用户界面以及服务器端的通信。Ajax引擎允许用异步方式实现用户与程序的交互，也就是说不用等待服务器的通信。

【B/S】走进AJAX_AJAX_02

图二 新旧Web工作模式对比

可能大家对HTTP的请求方法还是比较陌生的，其实一共有两种方法，分别是get 和 post，下面我们对比学习一下：

表一 对比学习http的请求方法

http请求方法	内容	优缺点
get	数据放在URL	①安全性低 ②容量低 ③便于分享
post	数据放在非URl	①安全性一般 ②容量基本无限 ③不便分享

三、编写一个AJAX

在编写AJAX之前，我想问问大家是不是都打过电话？你想想打电话的时候分为几步？①买个电话 ②拨号 ③说话 ④听。
编写一个AJAX其实也十分简单，就和打电话一样，要编写一个AJAX ，首先要创建一个AJAX对象（买电话），然后要连接到服务器（拨号），再发送请求（说话），最后接收信息（听）。下面我们将分步的讲解一下如何编写AJAX：

1. 创建AJAX对象

由于浏览器的版本不一样，所以请求的语句也是不一样的。
XMLHttpRequest()是为IE6以上的版本用的，ActiveXObject(“Microsoft.XMLHTTP”)是为了IE6用户的。

2. 连接到服务器

这里就一个方法 open(请求方法，文件名，是否异步)；

3. 发送请求

同样也就一个方法 send（）；

4.接收
接收的时候会触发onreadyStateCharge（请求状态监控）事件，状态有5种：

0未初始化，没有调用open（）；
1载入，已调用send（），正在发送请求；
2载入完成，send（）完成，已收到全部响应内容；
3解析；
4完成，接收成功，但是不知道是否成功；

下面是完整的AJAX代码，将这些方法封装成一个函数，以后直接调用ajax（）函数就可以直接使用了。扩充一下代码库。

function ajax(url, fnSucc, fnFaild)
{
    //1.创建Ajax对象
    var oAjax=null;

    if(window.XMLHttpRequest)
    {
        oAjax=new XMLHttpRequest();
    }
    else
    {
        oAjax=new ActiveXObject("Microsoft.XMLHTTP");
    }

    //2.连接服务器
    oAjax.open('GET', url, true);

    //3.发送请求
    oAjax.send();

    //4.接收服务器的返回
    oAjax.onreadystatechange=function ()
    {
        if(oAjax.readyState==4) //完成
        {
            if(oAjax.status==200)   //成功
            {
                fnSucc(oAjax.responseText);
            }
            else
            {
                if(fnFaild)
                    fnFaild(oAjax.status);
            }
        }
    };
}