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】