AJAX全名:Asynchronous JavaScript And Xml;
翻译过来的意思是:异步的JavaScript和Xml。
注意:AJAX不能称为一种技术,它是多种技术的综合产物。
想搞清楚什么是AJAX,就要先理解什么是异步,什么是同步。
同步和异步:
同步是指一个进程在执行某个请求的时候,如果该请求的某个步骤将会花费较长的一段时间才能完成该步骤,那么这个进程就需要一直等待下去,直到该步骤完成后才能继续执行下一步骤;而异步可以在等待的过程中去做其他的事情,当该步骤执行完成后,再进行操作。
例如,我们通过微信给某人发一条消息,不论他什么时候回复,在他没回复的这段时间,我们完全做其他的事情,而不用一直等待他回复,这就是异步;但如果我们有某件急事,要立刻联系上此人,微信不回复就要给他打电话,一直想办法联系他,直到联系上此人后才可以去做其他的事情,这就是同步。
搞明白了同步和异步,就可以学习AJAX了。
传统方式向服务器发送请求:
我们知道,通过传统方式向服务器发送请求有多种方法,
例如:
- 在地址栏输入URL
- 超链接
- form表单
- 通过JavaScript代码
通过传统方式向服务器发送请求有一个特点:会刷新整个页面;也就是说,当接收到服务器的response
(响应)时,会将整个页面清空,然后通过接收到的response
重新加载页面。
这种方式存在着明显的弊端,假如我们在通过手机号+验证码登录某平台时,我们先输入手机号,然后点击发送验证码按钮,由于是传统的请求方式,将会重新加载整个页面,就会导致手机号的输入框清空,还需要再次输入手机号,这显然不是我们想看到的,这时,就要用到AJAX来解决这个问题了。
使用AJAX可以做到在一个页面中进行局部刷新。
实际上,AJAX请求和传统请求的原理是一样的。都是向服务器发送请求,然后接收响应。
只不过AJAX是通过XMLHttpRequest对象向服务器发送请求。
AJAX请求发送后,服务器将会给Web前端响应数据,数据类型可能为:普通文本、XML字符串、json字符串。
之后,Web前端会解析这个字符串,然后进行页面的局部刷新。
需要注意的是:这个过程的核心是XMLHttpRequest
对象,发送请求和接收数据都依赖这个对象。而XMLHttpRequest
对象是浏览器内置的对象,现代浏览器都内置了该对象,直接使用即可,eg:var xhr = new XMLHttpRequest();
编写JavaScript代码来发送AJAX请求。
在浏览器上发送AJAX请求,需要编写JavaScript代码发送AJAX请求。
AJAX是可以发送异步请求的。也就是说,在同一个页面中,可以发送多个AJAX请求,这些请求之间是不需要等待的,而传统的请求方式不能做到这一点。