Ajax基础介绍

 

1. 什么是Ajax

首先来看一下什么是Ajax，英语全称Asynchronous JavaScript And XML，翻译成中文就是异步的JavaScript和XML。也被称为异步无刷新技术

 

先来解释什么是同步？什么是异步？

所谓同步，就是发出HTTP请求以后，客户端只能等待HTTP响应回来才能够干其他的事儿，只要HTTP响应没有回来，那就什么都做不了

 

所谓异步，发出HTTP请求以后，客户端不用非要等到HTTP响应回来，就可以做其他的事儿。

 

Ajax并不是一门新的语言或者说是新的技术，而是之前已有的技术：JS，XML，DOM，CSS等多种技术的结合。

 

Ajax是一个与服务器端无关的技术

 

哪些地方使用了Ajax？

百度地图：

 

表单验证

 

智能提示

 

 

1. Ajax工作原理

传统Web应用的工作：当用户每触发一个HTTP请求，即使只有少量的数据发生变化，其他部分的内容都没有变化，一旦提交，页面还是会重新刷新

处理—等待—处理—等待

 

Ajax技术实现的是按需获取数据

 

 

传统Web应用和Ajax工作原理示意图：

 

 

 

传统Web应用                               Ajax工作原理

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1. 编写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】