ajax学习总结

一、ajax简介

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），AJAX 是一种与服务器交换数据的技术，他可以在不更新整个页面的情况下局部更新页面中的某一部分。

关于同步异步：

异步：程序一起执行
同步：程序上一个执行完下一个才执行

如果是异步通信方式(true)，客户机就不需要等待服务器的响应；如果是同步方式(false)，客户机就要等到服务器返回消息后才去执行其他操作。这也是ajax可以做到不刷新页面，达到局部刷新的效果的原因

二、ajax原理和XmlHttpRequest对象

Ajax的原理简单来说就是通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。XMLHttpRequest是ajax的核心机制，所以我们要搞清楚这个过程和原理，必须对XmlHttpRequest有所了解。

（1）XMLHttpRequest的重要属性

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

（2）XMLHttpRequest工作流程

为了加深记忆，我们将XMLHttpRequest的工作流程比作打电话的流程

流程打电话流程： XMLHttpRequest工作流程：

第一步. 我们需要买一个电话创建一个XMLHttpRequest对象

第二步. 拨号打开链接

第三步. 讲话发送一个请求

第四步. 对方给出回应接收数据

具体代码实现：

function ajax(url,data,fnSucc,fnerror){

    //1.创建一个ajax对象

    //ie6+

    if(window.XMLHttpRequest){

        //ie6+

        var oAjax = new XMLHttpRequest();

    }else{

        //ie6

        var oAjax = new ActiveXObject('Microsoft.XMLHTTP');

    }

    //2.打开地址

    //open(提交方式(大写),url,是否异步);

    oAjax.open('GET',url+'?'+json2url(data),true);

    //3.发送

    oAjax.send();

    //4.接收数据

    oAjax.onreadystatechange=function(){

        if(oAjax.readyState==4){

            if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){

                //数据

                fnSucc&&fnSucc(oAjax.responseText)

            }else{

                fnerror&&fnerror(oAjax.status)

            }

        }

    };

};

三、ajax优点

1、最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。

　 2、使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。

　 3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。

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

四、ajax缺点

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

2、对流媒体还有移动设备的支持不是太好等

五、ajax注意事项

编码需要一致，要不然会出现乱码
ajax返回的数据都是字符串
防止缓存可以通过设置 ?t=Math.random()或者是new一个最新的时间来防止缓存