1. 什么是Ajax
首先来看一下什么是Ajax,英语全称Asynchronous JavaScript And XML,翻译成中文就是异步的JavaScript和XML。【异步无刷新技术】
先来解释什么是同步?什么是异步?
所谓同步,就是发出HTTP请求以后,客户端只能等待HTTP响应回来才能够干其他的事儿,只要HTTP响应没有回来,那就什么都做不了
所谓异步,发出HTTP请求以后,客户端不用非要等到HTTP响应回来,就可以做其他的事儿。
Ajax并不是一门新的语言或者说是新的技术,而是之前已有的技术:JS,XML,DOM,CSS等多种技术的结合。
Ajax是一个与服务器端无关的技术
哪些地方使用了Ajax?
百度地图:
表单验证
智能提示
2. Ajax工作原理
传统Web应用的工作:当用户每触发一个HTTP请求,即使只有少量的数据发生变化,其他部分的内容都没有变化,一旦提交,页面还是会重新刷新
处理—等待—处理—等待
Ajax技术实现的是按需获取数据
传统Web应用和Ajax工作原理示意图:
传统Web应用 Ajax工作原理
3. 编写Ajax步骤
① 创建Ajax对象
有两种不同的方式:IE的方式和主流浏览器的方式
Ajax中最核心的对象就是XMLHttpRequest对象,最早是由微软公司于1999年在IE5里面内嵌的一种技术。现在市面上几乎所有浏览器都内置了这个对象。
主流浏览器创建XMLHttpRequest对象的方式
IE浏览器创建XMLHttpRequest对象的方式
通过window.ActiveXObject可以判断用户使用的浏览器是IE还是主流浏览器,根据用户使用的浏览器创建不同类型的XMLHttpRequest对象
② 与服务器建立连接并且向服务器发送请求
什么时候建立服务器连接并向服务器发送请求,这里我们需要通过JS事件来进行判断
建立与服务器的连接,通过XMLHttpRequest对象的open()
该函数接收3个参数:1. 连接服务器的方式 2. 连接地址 3. 同步还是异步
GET示例:如下
这里是采用get的方式连接服务器,服务器的地址为test.php 向服务器传输的数据为username=xiejie 由于向服务区传输的数据通过get的方式是拼接在url后面的,所以send()方法里面写入一个null
True是同步,false是异步;
POST示例如下:
③ 设置回调函数是为了处理从服务器取回来的数据
在open()方法和send()方法之间需要添加状态的监听
通过XMLHttpRequest对象的onreadystatechange属性就可以监听Ajax引擎的工作状态
Ajax的状态如下:
0-(未初始化):还没有调用send()方法
1-(载入/读取中):已经调用了send()方法
2-(载入/读取完成):send()方法执行完成
3-(交互):正在解析响应内容
4-(完成):响应内容已经解析完成,可以在客户端使用了
通过XMLHttpRequest对象的readyState属性可以获取Ajax运行的状态值
通过XMLHttpRequest对象的status属性可以获取到返回的HTTP响应的状态码
通过XMLHttpRequest对象的responseText属性可以获取从服务器返回的值
onreadystatechange属性:状态改变的事件触发器
responseXML属性:服务器进程返回数据的兼容DOM的XML文档对象
StatusText属性:服务器返回的状态文本信息
服务器端:服务器接收到客户端提交过来的用户名,然后进行判断,最后返回文本数据
详细代码请参见【表单验证Demo】