更好的理解AJAX

Ajax全称为“Asynchronous JavaScript and XML(异步JavaScript和XML)”，它是一种无刷新更新页面的技术。无需重新加载整个网页，能够对网页的局部进行更新，使网页实现异步更新。
Ajax使用CSS和XHTML来表示；使用DOM模型来交互和动态显示；使用XMLHttpRequest方法来和服务器进行异步通信，从而实现数据交互；使用Javascript来绑定和调用。使用Json来传数据，靠Jsonp来跨域
除了XmlHttpRequest对象方法以外，其它技术都是基于web标准并且已经得到了广泛使用的，XMLHttpRequest虽然目前还没有被W3C所采纳，但是它已经是一个事实的标准，因为目前几乎所有的主流浏览器都支持它。
AJAX的工作原理是通过XMLHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用JavaScript来操作DOM来更新页面。
XMLHttpRequest对象是AJAX的核心机制。是一种异步请求数据的技术，使得javascript可以及时向服务器提出请求和处理响应，而不阻塞用户，达到页面无刷新而更新页面的效果，目的是为了提高用户体验。
XMLHttpRequest对象方法的工作原理：
    XMLHttpRequest对象的属性：
1：onreadystatechange 每次状态改变所触发事件的事件处理程序
2：responseText 从服务器进程返回数据的字符串形式
3：readystate 对象状态值 
    有哪些状态值？什么是状态值？
    未初始化0：对象已建立，但是未初始化（未调用open()）
    已初始化1：对象已建立，初始化了，但未调用send()
    发送数据2：send()已调用，但是当前的状态及http头未知
    数据传送中3：已接收部分数据，因为响应及http头不全，这时通responseText获取部分会出现错误
    完成4：数据接收完毕，通过responseText来获取完整的回应数据。status 从服务器返回的数字代码，
什么是状态码？
比如200 300 400 500
200 成功
300 缓存
400 客服端错误
500 服务器错误
statusText 伴随状态码的字符串信息
Ajax实现过程四个步骤：
    创建一个ajax对象
    发送HTTP请求
    接收服务器传递的数据
    更新页面数据
但是，浏览器之间存在差异性，所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。所以要创建不同浏览器的适配的对象：IE浏览器创建的是：ActiveXObject()
get和post的区别？
ajax请求的时候get和post 方式的区别
get:参数放在url地址上，参数大小有限制，不安全
post:参数要封装起来传递，参数无限制，安全
1）open()
参数1:请求方式（get,post）
参数2：url地址（服务器地址）
参数3：同步和异步处理（默认true，异步）
参数4和参数5是可以选项（username和password）
2).send():实际发送http的请求
前端+服务器的流程
ajax+php+地址
知道了XMLHttpRequest的工作流程，我们可以看XMLHttpRequest是完全用来向服务器发出一个请求的，它的作用也局限于此，但它的作用是整个ajax实现的关键，因为ajax无非是两个过程，发出请求和响应求并且它完全是一种客户端的技术。而XMLHttpRequest正是处理了服务器端和客户端通信的问题所以才会如此的重要。
现在，我们对ajax的原理大概可以有一个了解了。我们可以把服务器端看成一个数据接口，它返回的是一个纯文本流，当然，这个文本流可以是XML格式，可以是Html，可以是Javascript代码，也可以只是一个字符串。这时候，XMLHttpRequest向服务器端请求这个页面，服务器端将文本的结果写入页面，这和普通的web开发流程是一样的，不同的是，客户端在异步获取这个结果后，不是直接显示在页面，而是先由javascript来处理，然后再显示在页面。至于现在流行的很多ajax控件，比如magicajax等，可以返回DataSet等其它数据类型，只是将这个过程封装了的结果，本质上他们并没有什么太大的区别。

下面这段代码就是上面理论的总结
        //兼容性的问题
if (window.XMLHttpRequest) {
    //如果浏览器支持，返回true  标准browser
    var xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
    //ie浏览器
    var xhr = new ActiveXObject();
}
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
        //代表数据读取完成
        if (xhr.status == 200) {
            console.log(xhr.statusText);//打印状态码信息
            var data = xhr.responseText;
            console.log(data);//打印数据
        }
    }
}
xhr.open("get","");//请求方式 get post  地址：写服务器文件
xhr.send();

接下来我们来说说AJAX的优点缺点？
    优点： 
　 1.可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量
　 2.避免用户不断刷新或者跳转页面，提高用户体验
   3.最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。
   4.使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
    5.可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
    6.不需要下载插件或小程序。
缺点：
　1.可能造成请求数的增加
　2.跨域问题限制
  3.ajax干掉了back按钮，即对浏览器后退机制的破坏，实现Ajax的前后退功能成本较大。
  4.安全性能差，容易被黑客入侵。
  5.对搜索引擎的支持比较弱。
  6.破坏了程序的异常机制。
  7.违背了url（统一资源定位符）我给你一个url地址，如果采用了ajax技术，也许你在该url地址下面看到的和我在这个url地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。
 8.移动设备不支持。