Ajax 技术一
一、Ajax概述 1、历史起源

1998年，微软公司Outlook Web Access研发小组在当时的IE浏览器中集成了一种技术，可以在客户端无刷新的前提下向服务器端发送Http请求，这门技术称之为"XMLHTTP"。

2005年，谷歌公司在自家的多款产品（Gmail邮箱、Google Suggest搜索建议、Google地图）中应用了Ajax技术，从此Ajax火的一塌糊涂…

2、什么是Ajax技术

Asynchronous ：异步

JavaScript ：Javascript技术

And ：和

XML ：可扩展标记语言，主要用于数据的传输与存储

所谓的Ajax技术就是异步的Javascript和XML，由于XML主要用于数据的传输与存储，由此可知：Ajax的核心就是异步的Javascript。

3、Web技术

客户端语言：

Html

Css

Javascript

服务端语言：

ASP(ASP.NET)

JSP

PHP

由于Ajax是异步的Javascript，所以我们可以确定：Ajax也是运行于客户端浏览器的。

4、Ajax工作模式 1）同步请求：

同步请求在网速比较慢的情况下，其体验度是非常不理想的，因为给用户的感觉整个请求就是不连续的过程。

2）异步请求：

由上图可知，当用户发送请求时，系统首先把请求发送Ajax对象，Ajax对象在对请求进行发送，然后服务器端对其请求进行处理，但是在处理还没有完成的过程中，其就会返回一部分数据给客户端，所以对于用户而言，整个请求是一个连续的过程，体验度非常好。

5、Ajax应用场景

① 表单验证（实时验证用户名是否唯一）

② 百度下拉搜索

③ 无刷新分页

④ WebAPP手机+PHP后台程序（手机APP）

6、快速入门

demo01_rumen.html

demo01.php

运行结果：

二、Ajax对象 1、为什么需要Ajax对象

记住：使用Ajax技术有一个前提，必须要创建一个Ajax对象。

2、如何创建Ajax对象

基于IE内核浏览器（IE8以下的IE浏览器、各种浏览器的兼容模式）

var Ajax对象 = new ActiveXObject('Microsoft.XMLHTTP');

基于W3C内核浏览器（火狐、Google浏览器、各种浏览器的极速模式）

var Ajax对象 = new XMLHttpRequest();

3、解决Ajax对象的兼容性问题

① 创建一个public.js文件，作为核心代码库

② 定义一个$函数，用于获取指定id的dom对象

③ 定义一个公用函数，如createXhr()，用于创建Ajax对象

4、Ajax对象中的属性和方法

常用方法

open(method,url) ：初始化Ajax对象（设置请求类型与请求地址）

setRequestHeader(header,value) ：设置请求头

参数说明：

header：请求头

value：值

send(content) ：发送Ajax请求

参数说明：

content：在请求空白行传递的参数，如果是get请求，此值为null

常用属性

onreadystatechange ：当Ajax状态码发生改变时所触发的回调函数

readyState ：Ajax状态码

0：表示对象已建立，但未初始化，调用了createXhr方法，但是未调用open方法

1：表示对象已初始化，但未发送，调用了open方法，但是未调用send方法

2：已调用send方法进行请求

3：正在接收数据（接收到一部分）

4：接收完成

status ：响应状态码，200接收完成，404未找到页面

statusText（了解） ：响应状态文本

reponseText ：响应结果

responseXML ：响应结果

如果服务器端返回字符串，则使用xhr.responseText进行接收

如果服务器端返回XML格式的数据，则使用xhr.responseXML进行接收

三、Ajax中的get请求 1、Ajax口诀：Ajax中get请求五步走

① 创建Ajax对象

② 设置回调函数

③ 初始化Ajax对象

④ 发送Ajax请求

⑤ 判断与执行

2、使用Ajax技术发送get请求

demo04.php

3、使用Ajax中的get请求进行传值操作

demo05.php

4、几个小问题

1）问题：我们在使用Ajax时发现，我们在服务器端都是通过echo语句来返回数据的，这个地方可不可以通过return语句代替呢？