一、Ajax简介、优劣势、应用场景以及技术
Ajax简介 :
Asynchronous Javascript And XML （异步的JavaScript和XML）
它并不是一种单一的技术，而是有机利用一系列交互式网页应用相关的技术所形成的结合体
AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
优点：
页面无刷新，用户体验好。
异步通信，更加快的响应能力。
减少冗余请求，减轻了服务器负担
基于标准化的并被广泛支持的技术，不需要下载插件或者小程序
缺点：
ajax干掉了back按钮，即对浏览器后退机制的破坏。
存在一定的安全问题。
对搜索引擎的支持比较弱。
破坏了程序的异常机制。
无法用URL直接访问
ajax应用场景
场景 1. 数据验证
场景 2. 按需取数据
场景 3. 自动更新页面
AJAX 包含以下五个部分：
ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。
使用CSS和XHTML来表示。
使用DOM模型来交互和动态显示。
数据互换和操作技术，使用XML与XSLT
使用XMLHttpRequest来和服务器进行异步通信。
使用javascript来绑定和调用。
在上面几中技术中，除了XmlHttpRequest对象以外，其它所有的技术都是基于web标准并且已经得到了广泛使用的，XMLHttpRequest虽然目前还没有被W3C所采纳，但是它已经是一个事实的标准，因为目前几乎所有的主流浏览器都支持它
第一张图尤其说明了传统Web 应用程序的结构与采用了 AJAX 技术的 Web应用程序的结构上的差别
主要的差别，其实不是 JavaScript，不是 HTML/XHTML和 CSS，而是采用了 XMLHttpRequest 来向服务器异步的请求 XML 数据
再来看第二张图，传统的 Web 应用模式，用户的体验是割裂的，点击->等待->看到新的页面->再点击->再等待。而采用了AJAX技术之后，大部分的计算工作，都是在用户不察觉的情况下，交由服务器去完成了
二、创建ajax的步骤
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。原生创建ajax可分为以下四步
1、创建XMLHttpRequest对象
Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键，发送异步请求、接受响应以及执行回调都是通过它来完成
所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
创建 XMLHttpRequest对象的语法：
var xhr = new XMLHttpRequest();
老版本的 Internet Explorer（IE5 和 IE6）使用ActiveX 对象：
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest对象。如果支持，则创建XMLHttpRequest对象。如果不支持，则创建ActiveXObject：
兼容各个浏览器的创建Ajax的工具函数
function createRequest (){ try { xhr = new XMLHttpRequest(); }catch (tryMS){ try { xhr = new ActiveXObject("Msxm12.XMLHTTP"); } catch (otherMS) { try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); }catch (failed) { xhr = null; } } } return xhr; }
2、准备请求
初始化该XMLHttpRequest对象，接受三个参数：
xhr.open(method,url,async);
第一个参数表示请求类型的字符串，其值可以是GET或者POST。
GET请求：
xhr.open("GET",demo.php?name=tsrot&age=24,true);
POST请求：
xhr.open("POST",demo.php,true);
第二个参数是要作为请求发送目标的URL。
第三个参数是true或false，表示请求是以异步还是同步的模式发出。（默认为true，一般不建议为false）