【B/S】走进AJAX

前端之家收集整理的这篇文章主要介绍了【B/S】走进AJAX前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

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

一、AJAX简介

在和大家分析之前,给大家提出一个现象:一个企业用户注册时的一个应用,当用户注册时检查用户名和企业名是否可用,以前的做法是在旁边加一个按钮,点击“检查”,就向服务器发出请求,然后等待……服务器返回信息,继续操作。
如果我们用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引擎允许用异步方式实现用户与程序的交互,也就是说不用等待服务器的通信。

图二 新旧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);
            }
        }
    };
}

四、小结

通过接近1星期的学习,终于对AJAX有了一点皮毛的认识,还是要多多的实践,如果不练习,就会什么也不会。加油吧!

原文链接:https://www.f2er.com/ajax/162355.html

猜你在找的Ajax相关文章