Ajax基础介绍
- 什么是Ajax
首先来看一下什么是Ajax，英语全称Asynchronous JavaScript And XML，翻译成中文就是异步的JavaScript和XML。也被称为异步无刷新技术
先来解释什么是同步？什么是异步？
所谓同步，就是发出HTTP请求以后，客户端只能等待HTTP响应回来才能够干其他的事儿，只要HTTP响应没有回来，那就什么都做不了
所谓异步，发出HTTP请求以后，客户端不用非要等到HTTP响应回来，就可以做其他的事儿。
Ajax并不是一门新的语言或者说是新的技术，而是之前已有的技术：JS，XML，DOM，CSS等多种技术的结合。
Ajax是一个与服务器端无关的技术
哪些地方使用了Ajax？
百度地图：
表单验证
智能提示
- Ajax工作原理
传统Web应用的工作：当用户每触发一个HTTP请求，即使只有少量的数据发生变化，其他部分的内容都没有变化，一旦提交，页面还是会重新刷新
处理—等待—处理—等待
Ajax技术实现的是按需获取数据
传统Web应用和Ajax工作原理示意图：
传统Web应用 Ajax工作原理
- 编写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
POST示例如下：
③ 设置回调函数是为了处理从服务器取回来的数据
在open()方法和send()方法之间需要添加状态的监听
通过XMLHttpRequest对象的onreadystatechange属性就可以监听Ajax引擎的工作状态
Ajax的状态如下：
0-（未初始化）：还没有调用send（）方法
1-（载入）：已经调用了send（）方法
2-（载入完成）：send（）方法执行完成
3-（交互）：正在解析响应内容
4-（完成）：响应内容已经解析完成，可以在客户端使用了
通过XMLHttpRequest对象的readyState属性可以获取Ajax运行的状态值
通过XMLHttpRequest对象的status属性可以获取到返回的HTTP响应的状态码
通过XMLHttpRequest对象的responseText属性可以获取从服务器返回的值
服务器端：服务器接收到客户端提交过来的用户名，然后进行判断，最后返回文本数据
详细代码请参见【表单验证Demo】
