ajax知识整理

一.认识Aajx
重要程度：*****
1.什么是Ajax
怎么读?

中文化：阿贾克斯

Ajax：Asynchronous javascript and xml，异步的js和xml。
是指一种创建交互式网页应用的网页开发技术。

Ajax，不是一个语言。是一系列技术的综合应用，（老技术，新应用）。
包括如下技术：
 Html
 Css
 JavaScript
 XMLHttpRequest对象（核心）
 服务器端语言（node.js和php）
 数据库（mysql和mongodb）

所谓的交互式，通常就是指 异步刷新（局部刷新）
2.为什么需要Ajax
为何需要？
从需求出发（平常使用软件出发）。

提到软件，有两种形式：
 C/S，client/server，桌面应用程序，QQ，杀毒工具、播放器、编辑器
 B/S，browser/server，web应用程序，通过浏览器去访问的web应用

C/S和B/S有何不同之处？
C/S模式，需要在每个用户的电脑安装客户端，后期的更新是比较麻烦的。胖客户端，瘦服务端。
B/S模式，只需要有浏览器即可，更新非常方便。瘦客户端，胖服务端。

由于C/S模式，是在本地安装了一个客户端程序，实现整个软件的部分功能，有很多的功能都是在客户端可以完成的，用户的操作就非常的流畅。

B/S模式，所有的功能都是在服务端实现的，每一次操作都要在服务器进行，都需要一次请求和回应，用户的操作比较卡顿。

但是，随着互联网的发展，越来越多的应用都会使用B/S模式。

矛盾：B/S模式的大量增长和用户体验。

希望，使用B/S模式的架构，同时又具备C/S模式的用户体验。

Ajax就应运而生。在B/S架构的web应用中，获得C/S模式的用户体验。

Ajax 尝试在web应用程序中实现类似c/s应用程序中的功能和交互性，使之能够快速响应用户的操作，从而提高用户体验。

Ajax到底能干什么？
 表单交互
 动态标签页
 及时编辑（云笔记，office在线）
 地图类应用

尤其是移动web中更为突出。
3.Ajax的发展历程
实际上，Ajax发展经历了三个时代
 Ajax前传，使用iframe实现局部刷新技术
 Ajax正传，传统的Ajax
 Ajax新传，下一代Ajax，反向Ajax

重要的节点：
同年，Google在三大产品中使用了Ajax技术:
 Google Suggest
 Google Maps
 Gmail

请问：ajax是前端来写的，还是后台来写的？

Ajax是一个老技术的综合应用：
 Html
 Css
 Javasccirpt
 Dom
 XmlHttpRequest
 服务端语言
 数据库

任何一个后台开发人员都会写。
在开发中，ajax应该更偏向于前端。前端的代码会多一些。

二.传统的Ajax
Ajax经历了三个时代：
 早期，使用iframe来实现的，这种方式功能太弱，已经很少使用了。（可以忽略）
 传统，从05年开始一直在使用的。（重点）
 反向ajax

1.核心—XMLHttpRequest对象
Ajax是一些来技术的新应用。
涉及了：
 浏览器端：HTML、css、js、dom
 服务端：后台语言，数据库

每一次都是一个新的请求，会刷新整个页面。

需要开个后门，然后悄悄的发请求，悄悄的返回响应，如下：

这个对象就是XMLHttpRequest了。它是这个ajax中的核心。简称为XHR对象。

直观感受，就是一个js中的对象。

查看如下：

通用定义
XMLHttpRequest是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。

来自MSDN的解释
XMLHttpRequest提供客户端同http服务器通讯的协议。客户端可以通过该对象向http服务器发送请求并使用XML文档对象模型处理回应。

我们的理解：
XMLHttpRequest是一个对象，这个对象有属性和方法。我们可以利用这个对象的方法从客户端向服务端发出请求，然后就接受从服务端返回的响应，进行的相应处理。

重点，就是要学习xhr对象到底有哪些属性和方法，以及如何使用的。

参考手册，也就10来个：

2.快速入门案例
(1).目标

需求：在用户注册时，检查这个用户名是否可用。

(2).传统的做法
需要准备一个用户注册界面
使用express来快速提供一个http服务，实现注册功能。

使用express快速编写一个js代码，如下：

对应的reg.html页面如下：

当用户填写完表单，然后进行提交，我们需要去判断用户名是否可用。

需要处理表单提交的post请求。

对应的，定义的inArray函数如下：

访问如下：

还需要返回重新进行注册

这样的用户体验就是非常糟糕的。早期（10年前），这种表单随处可见。

Why?
由http协议本身和代码的实现息息相关的。

http协议，
 浏览器发请求
 服务端接受请求，进行处理，返回响应。

关键在于响应，使用res写会的响应，就是一个完整的页面。浏览器端接受的就是新的页面，所以原来的页面就不在了。

刚才注册的过程，其实是两次完整的请求和响应。
第一次

第二次

(3).使用ajax来实现用户名检测
使用步骤：
 实例化XHR对象
 连接服务器
 发送请求
 接受响应

第一步，实例化xhr对象

在何时，发出请求？
当用户输完用户名之后，就需要检测，使用到失去焦点事件 – blur。

首先，就需要注册blur事件，如下：

在这个blur事件触发的时候，需要实例化对象，发出请求。

第二步，建立和服务器之间的连接

使用xhr对象的open方法，

其中第一个参数为请求方式，如get或者post
第二个参数，表示请求的url，可以使用查询字符串携带参数。

可以编写代码如下：

第三步，注册事件，监听状态的变化
在发出请求之后，需要进行状态的监听，由于这是一个事件，需要在发出请求之前先注册。

注意，事件是全小写的，和onclick、onmouseover对比。

编写代码如下：

第四步，发请求

对应的，需要在服务端编写 /check方法，如下：

运行，测试，看返回的响应是什么？

现在，只需要将 返回的信息，写回到 文本框的后面即可。
编写代码如下：

再次测试。

(4).小结
Ajax，是一个老技术的综合应用。
在刚才的案例中，涉及到如下技术：
浏览器端：HTML，CSS，JavaScript，DOM，XMLHttpRequest对象
服务器端：node.js ，数据库

使用ajax达到了一个什么样的目的？

通过ajax实现了异步请求，在表单还没有提及的情况下，已经发出一个请求，然后判断用户是否可用，从而提高用户体验。

可用使用network工具查看过程

这个过程，对普通用户来讲，是感受不到。

可用使用这种方式，去查看其它web中的ajax请求。如下：

接下来我们的重点，就是要掌握ajax请求和响应整个的过程和细节。

3.创建兼容性的XHR对象
XHR对象，XMLHttpRequest对象。是整个ajax中的核心。

这个对象是如何创建的呢？
分两种情况：
 标准浏览器
 非标准浏览器（IE）

标准浏览器的创建方式，直接使用new XMLHttpRequest

IE浏览器
ie10以下就存在问题。ie10及其以上已经向标准靠拢。

在ie浏览器中，使用activeXObject对象的方式。
var xhr = new ActiveXObject(“Microsoft.XMLHTTP”); //最原始方式 ie5/ie6
var xhr = new ActiveXObject(“Msxml2.XMLHTTP”); //升级 ie7及以上
注意测试方式。
需要使用ie浏览器测试。此处，使用ietester测试不准确。

需求：如何创建一个兼容性的xhr对象？
用到了try—catch，优雅的处理错误的一种写法。

如果使用jQuery，就不需要自己去做这件事情。

中午：把用户名检测的案例敲一遍。

4.请求方式(get和post)
(1).Get和post 的区别
当实例化好这个xhr对象之后，接下来就需要建立和服务器的连接。
建立连接，就需要使用xhr对象的open方法。

重点就是第一个参数。
第二个参数会随着第一个参数的变化而变化。

第一个参数，表示发起请求的方式。一般就是get和post。大小写均可。

此处的get和post对应于我们http协议中的get请求和post请求。

在原来的http协议中，我们说get请求通常表现为，直接使用url地址，一些标签的src属性和href属性等。而post通常是针对表单。

现在我们还有一种方式，可以发起get和post请求。就是通过xhr对象。

Get和post请求的区别

Post数据，以xml的形式，在http协议做了一些处理，如下：

(2).Get请求
格式：xhr.open（“get”，url）
 第一个参数，为get或GET，表示发起了一个get请求
 第二个参数，url，

只要是请求，通常是需要携带参数。以查询字符串的方式来传递。所以通常会在url上使用查询字符串。

数据已经通过查询字符串传递过去。
这意味着，我们在后面真正发请求那个动作时，是不需要再发送任何的数据。也就是说xhr.send（）方法不需要写任何的内容。通常使用null来作为send方法的参数。

如果有多个键值对，使用&连接即可，如下：

在使用get的时候，有一个细节：
用户填写的内容，如果包含中文（针对ie）、=、&等特殊符号需要编码处理

由于= 和 & 是特殊的，查询字符串中的固定方式。
比如：在用户名中使用了& 和 =，如下：

这就出问题了。

包括，在ie浏览器中，如果使用中文，出现乱码。

针对这些特殊的字符，需要进行编码。 encodeURIComponent

使用如下：

检测，

注意:
 编码码之后，不需要解码，因为浏览器会自动进行解码
 url编码，其格式为 %十六进制数字 如%20表示空格
 在ie浏览器，如果没有进行编码，中文会以乱码来显示
(3).Post请求
在ajax应用中，以get居多（90%以上）。Post请求相对较少。

格式，需要结合项目三个方法

 xhr.open（“post”，url）
 xhr.setRequestHeader（“content-type”,“application/x-www-form-urlencoded”）;
 xhr.send（键值对）

编写代码如下：

对应的url处理如下：

查看传递数据的过程

如果没有设置请求头，那么请求的过程是这个样子的，

同理，在使用post的时候，也是需要对特殊的字符进行处理。
 &
 =

如果没有进行编码，如下：

使用编码之后，

5.异步原理
Ajax中的A，表示Asynchronous，就是异步的意思。
我们在讨论ajax的时候，经常会提到一些说法，异步请求，异步刷新。

异步和同步是对应的。

同步，代码执行的顺序和书写的顺序是一致的。
异步，代码执行的顺序和书写的顺序是不一致的。

 同步：提交请求->等待服务器处理->处理完毕返回 等待的过程
 异步：请求通过事件触发->服务器处理->处理完毕 没有等待过程

Ajax提供了一个参数，可以设置是使用同步还是异步。
在open方法中，可以通过第三个参数设置。

做一个测试。需要使用firefox来进行测试

增加代码如下：

在服务端，增加一个耗时的操作，

测试，结果如下：

点击确定之后，

如果我们使用同步，会怎么样？
只需要将open方法的第三个参数设置为false，即可。

测试，发现alert直到 请求结果回来之后，才弹出。

在使用ajax，到底是使用同步呢，还是使用异步呢？
视情况而定。但是大部分（90%）都会使用异步。这也是open默认的方式。

如果我后续代码，必须要依赖于请求返回的结果，就应该使用同步。

如：使用ajax请求了jQuery，后面使用jQuery来进行操作。

6.状态说明
在注册事件中，我们编写了如下代码：

这段代码如何理解。

onreadystatechange是xhr的属性，意思就是注册readystatechange事件。

和打电话对比，监听对方的回应。

在事件处理函数中，有两个判断
 xhr.status == 200
 xhr.readyState == 4

这两个判断是什么意思，能不能不写？

关键在于，在于readyState和status这两个属性的理解。

readyState
当请求发出之后，服务端处理请求，到底是在哪一个环节。
从发出请求开始，到接受数据，到返回响应，定义了如下几个状态：

添加如下测试代码：

只要当所有的数据在浏览器端接受完毕并且解析完成，我们才能使用。
所以，需要进行一个判断，

Status
http响应的状态码。

200表示，正确的接收到服务端的响应数据。

增加这个判断，保证逻辑的正确性。

7.返回数据的方式
当我们从服务器正确接收到返回数据并格式化之后。
也就是说，满足如下条件时

如何接受返回的结果呢?

根据返回的结果的格式的，不同，可以分为两大类：
 XML格式，xhr.responseXML
 文本格式，xhr.responseText

Ajax，asynchronous JavaScript and xm