ajax学什么难,ajax分析与讲解,其实ajax一点也不难,只是你把它看难了

2023-05-16

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了,代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

varmyclass=$("#class").val();//告诉门卫我的班级

varmyname=$("#name").val();//告诉门卫我的名字

vardata={username:myname,password:mypassword}

/* 门卫根据我说的写成一张纸条:{班级:我的班级,名字:我的名字}如{class:高三(7)班,username:爽歪歪}*/

$.ajax({

type:'post',//提交方式,他是以明文(get)发过去,还是加密了(post)再发过去

url:'data.json',//提交地址,QQ邮箱,还是网易邮箱

data:data,//提交的数据,就是根据我说的那张写好的纸条

success:function(result){

/*success的意思如果门卫准确的把纸条送到了班主任的手里,并且班主任进行了比对,

* 告诉门卫我是不是他们班的学生,括号里的result就是班主任说的“是”或“不是”

*

*

* 至于学生表是怎么制作的。彩色版还是黑白版,我们不需要关心,也就是说数据库是怎么设计的,我们不关心

* 班主任是怎么进行比对的,一行一行对比,还是一列一列对比,我们也不需要关心。

* 这就是java后台做的事情

*

*

* 我们要做的,就是把班级和名字告诉门卫,然后等结果,看是让我进,还是不让我进。我们也只能做这些,毕竟我们还在校门外,对吧

*/

if(result=="是"){//如果说的我是

alert("让我进校");//让我进校

}else{//如果说的我不是

alert("不让我进校");//不让我进校

}

}

});

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ajax学什么难,ajax分析与讲解,其实ajax一点也不难,只是你把它看难了 的相关文章

随机推荐