1、什么是 AJAX ?

w3c的解释是这样写的:

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

这个解释对于一个搞后台开发,或者大牛级的前端者来说,再好理解不过了,但如果是一个刚学js的朋友,可能就不是那么好理解了,什么是异步,什么是数据交换,什么是XML,完全不懂,就像当初的我一样。为此,本来还不是怎么难的ajax,听这么一解释,瞬间就觉得是块不好啃的骨头了,无形中就产生了一种“难”的意识,正是这种意识,让我们走了很多弯路。

2、笔者的理解

好了,废话说了这么多,切入正题。什么是ajax呢,笔者的一种简单粗暴的理解就是:ajax就是一个封装好的,用于不同的页面(这里的页面不是指单纯的html,包括前后台的东西)间传输数据和接收数据的方法。下面举个例子详细,比如,现在我们要做一个登录功能(这是典型的ajax案例),做这个功能该怎么做我想大家都知道,首先是输入用户名和密码,如果用户名存在且密码正确,就登陆成功,否则登录失败。这是我们在登录时直观看到的现象。但登录的真正流程,是这样的:

1、首先,我们输入自己的用户名和密码,点击确定。意思是我们用户名和密码输入完毕。

2、当我们点了确定后,页面中的Js代码会获取我们输入的值。

3、将获取的用户名和密码提交到数据库。当我们提交时,我们需要指明提交到什么地方。用什么方式提交(这就是前面我说的传输数据)。

4,、把我们提交的用户名和密码拿到数据库进行匹配,如果匹配成功,返回一个true值,否则返回false。

5、根据返回的值,就可以确定我们是否登录成功了。如果为true,登录成功,否则,登录失败。

看到此处的人,未免觉得我写得有点多余,这些谁都知道。但我写这个是针对一点ajax基础都没有,或者是完全没理解ajax的人写的。再说了,存在即必然,分析上面的登录,我的目的是可以将其模拟成现实生活中的一个场景,让看的人更容易记住,理解,这样才算对得起阅读人在这篇文章上花的时间,对吧。模拟成什么场景呢,就拿我们高中上学迟到了来说吧。为什么用高中呢,因为高中校园一般是不允许非在校学生和老师进入的。所以如果你没按时到校,校门一关,即便是里面的学生,你想进去,也得过得门卫验证这一关。这个过程跟登录一模一样。请看下面:

1、要想证明你是学校的学生,你需要说你是哪个班的,叫什么名字,这相当于上面的用户名和密码。

2、当我们说完了我们的班级和名字时,门卫会用笔记录下来。这相当于js获取值。

3、门卫将记录下来的班级和名字交到对应班级的班主任手里进行确认。他是以明文(get)发过去,还是加密了(post)再发过去,这是提交方式;是发到班主任的QQ邮箱,还是网易邮箱,这是提交地址。

4、班主任收到纸条后,会根据本班的学生表进行对比(假设班主任是新来的,记不得学生名字),如果有这个名字,则告诉门卫说我是他班的,否则说我不是。这里的学生表就相当于数据库。告诉门卫的“是”或“不是”就是上面的true或false。

5、门卫根据班主任的回答,决定让不让我进校,这就是登录是否成功。

3、代码的编写

好了,场景模拟完毕,我们开始写ajax:相信我,这次你肯定看的懂ajax了,代码如下:

是不是有种恍然大悟的感觉,原来ajax就是这么回事,确实不难啊。这下好了,就算不懂,跟着套我也能把它套出来了。