ajax简介

Ajax 艺名 阿贾克斯 全称Asynchronous JavaScript and XML （异步的JavaScript 和 XML）是指在不刷新页面的情况下。与服务器交换数据并更新部分网页的技术。

工作原理

Ajax的工作原理是通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面

XmlHttpRequest对象

XMLHttpRequest 对象用于在后台与服务器交换数据。提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。

XmlHttpRequest对象兼容性

• 所有现代的浏览器都支持 XMLHttpRequest 对象。xmlhttp=new XMLHttpRequest();
• 在 IE 5 和 IE 6 中，必须使用特定于 IE 的 ActiveXObject() 构造函数。xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

了解XmlHttpRequest对象的属性

readyState

用来标识当前XMLHttpRequest对象处于什么状态。当一个 XMLHttpRequest 创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。

状态码	描述
0	未初始化：请求未初始化 (在调用 open() 之前)
1	启动：open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
2	发送：Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应
3	接收：请求处理中(接收到部分请求)
4	完成：请求已完成（可以访问服务器响应并使用它）

responseText

服务器响应的文本内容

responseXML

服务器响应的XML对象，可以解析成DOM对象

Status状态码

常用状态码	描述
200	成功
204	请求成功没有返回
301	永久重定向
302	临时重定向
304	有缓存
400	参数错误
401	没有权限
403	请求被拒绝
404	没找到
500+	服务器错误

statusText

状态码的文本信息

onreadystatechange

状态改变的触发器，每次改变状态都会触发，通常调用一个javascript函数

了解XmlHttpRequest对象的方法

abort();

停止当前请求，XmlHttpRequest状态归0回到未初始化状态

open(methods,url,asyncFlag,username,password)

methods对应请求方式get、post、put等； url请求服务器地址； asyncFlag是否异步，true异步，false同步； username，password可选参数，提供http认证的用户名密码。

send()

发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。

getAllResponseHeaders()

返回所有响应头信息，返回值是一个字符串，包含所有响应头信息，键值对形式。

getResponseHeader()

返回指定键名响应头的信息

setRequestHeader

设置请求头信息

Ajax工作流程

1. 创建XMLHttpRequest对象。
2. 设置请求方式和参数。
3. 发送请求。
4. 响应处理。

// 1. 创建XMLHttpRequest对象。
var xhr=null;  
if (window.XMLHttpRequest){
  // 兼容 IE7+, Firefox, Chrome, Opera, Safari  
  xhr=new XMLHttpRequest();  
} else{// 兼容 IE6, IE5 
  xhr=new ActiveXObject("Microsoft.XMLHTTP");  
} 
// 2. 设置请求方式和参数。
xhr.open(method,url,async);  
// 如果是post方式 设置请求头
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
// 3.发送请求
xhr.send();
// 4. 响应处理。
xhr.onreadystatechange=function()  { 
  if (xhr.readyState==4 &&xhr.status==200)  { 
     console.log('成功', responseText);
     // 处理结果
  }
} 

Ajax优缺点

优点：

1. 最大的优点就是页面无需刷新，在页面内与服务器通信，非常好的用户体验。
2. 使用异步的方式与服务器通信，不需要中断操作。
3. 可以把以前服务器负担的工作转嫁给客户端，减轻服务器和带宽，可以最大程度减少冗余请求。
4. 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

缺点：

1. AJAX干掉了Back和History功能，即对浏览器机制的破坏。 无法使用浏览器前进后退。
2. 安全问题：跨站脚本攻击、SQL注入攻击等。
3. 对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。