快速理解ajax

一、Ajax简介、优劣势、应用场景以及技术

Asynchronous Javascript And XML （异步的JavaScript和XML）

ajax并不是一种单一的技术，而是有机利用一系列交互式网页应用相关的技术所形成的结合体，是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新;这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

优点:

页面无刷新，用户体验好。

异步通信，更加快的响应能力。

减少冗余请求，减轻了服务器负担

基于标准化的并被广泛支持的技术，不需要下载插件或者小程序

缺点:

ajax干掉了back按钮，即对浏览器后退机制的破坏。

存在一定的安全问题。

对搜索引擎的支持比较弱。

破坏了程序的异常机制。

无法用URL直接访问

ajax应用场景

场景 1. 数据验证

场景 2. 按需取数据

场景 3. 自动更新页面

ajax所包含的技术

ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。

使用CSS和XHTML来表示。

使用DOM模型来交互和动态显示。

使用XMLHttpRequest来和服务器进行异步通信。

使用javascript来绑定和调用。

二、ajax使用步骤

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。原生创建ajax可分为以下四步

1.创建XMLHttpRequest对象

Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键，发送异步请求、接受响应以及执行回调都是通过它来完成,所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest对象的语法：

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest对象。如果支持，则创建XMLHttpRequest对象。如果不支持，则创建ActiveXObject：

兼容各个浏览器的创建Ajax的工具函数

2.准备请求

初始化该XMLHttpRequest对象，接受三个参数：

3.发送请求

一般情况下，使用Ajax提交的参数多是些简单的字符串，可以直接使用GET方法将要提交的参数写到open方法的url参数中，此时send方法的参数为null或为空。

GET请求：

POST请求：

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader()来添加 HTTP 头。然后在send()方法中规定您希望发送的数据：

4.处理响应

onreadystatechange ：当处理过程发生变化的时候执行下面的函数

readyState ：ajax处理过程

0：请求未初始化（还没有调用 open()）。

1：请求已经建立，但是还没有发送（还没有调用 send()）。

2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。

3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。

4：响应已完成；您可以获取并使用服务器的响应了。

status属性：

200:"OK"

404: 未找到页面

responseText：获得字符串形式的响应数据

responseXML：获得 XML形式的响应数据

返回值一般为json字符串，可以用JSON.parse(xhr.responseText)转化为JSON对象

上面所说的get 和 post 请求到底有什么区别呢?

两者不同

给服务器传递数据量, get 请求最多是2k

post 原则没限制 php对其限制为8M

安全方面,post 传输数据更加安全

传递数据的形式不一样

get 方式在 url 地址后边以请求字符串的形式传递参数

http://网址/index.php?name=tom&age=23&addr=beijing

以&符号连接的就是请求字符串

post方式是把 form 表单的数据给请求出来以 xml 形式传递给服务器

其中get请求方式

在 url 地址之后以请求字符串的形式传递数据

对中文 = &等特殊符号处理

在 js 中用encodeURIComponent()对中文进行编码

而post请求方式

给服务器传输数据需要使用send(请求字符串)的方法

调用方法setRepuestHeader()把传递的参数组织为xml 格式(仿form 给服务器传送数据)

传递的中文信息不需要编码,特殊符号需要进行编码

该方式请求的同时也可以传递 get 参数信息

什么是同步和异步？

异步:同一个时间点允许执行多个进程 true

同步:同一个时间点只允许执行一个程序 false

ajax 对象open(请求方式 请求地址 同步[异步])