ajax基础学习笔记整理

一、ajax原理及功能

ajax：Asynchronous JavaScript and XML  翻译为中文异步的JavaScript和XML（用JavaScript异步形式去操作XML）

ajax的特点：无刷新页面就可以完成数据交互。

ajax的优点：节省用户操作时间，提高用户体验，减少数据请求。

不需要浏览器刷新去发送请求，它可以通过js内置的ajax对象，来完成当前浏览器的这种请求行为，我们可以请求url地址，让ajax去加载这个数据，并且可以加载片断数据，加载过来以后，再通过相关的dom操作，把他添加到页面当中

与传统的web应用比较

传统的web应用交互由用户触发一个HTTP请求到服务器，服务器对其进行处理后再返回一个新的HTML页面到客户端，每当服务器处理客户端提交的请求时，客户都只能空闲等待，并且哪怕只是一次很小的交互，只需从服务器端得到很简单的一个数据，都要返回一个完整的HTML页面，而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了很多带宽，由于每次用用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢很多。

与此不同，ajax应用可以仅向服务器发送并取回必需的数据，它使用soap或其它一些基于XML的web service 接口，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交互的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以web服务器的处理时间也减少了。

ajax数据交互的最简单的流程

<script type="text/javascript">
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
    //相当于打开浏览器
    /*
    第一步：创建一个ajax对象
    IE6及以下使用插件的方式：new ActiveXObject('Microsoft.XMLHTTP');兼容处理下面单独提供
    */
    var xhr = new XMLHttpRequest();
    //相当于在地址栏中输入地址
    /*
  第二步：写打开方式，使用open方法
           参数
           1、打开方式
           2、地址
           3、是否异步
               异步：非阻塞模式：前面的代码不会影响后面代码的执行
               同步：阻塞模式：前面的代码会影响后面代码的执行
   */
    xhr.open('get','http://baidu.com','true');
    //相当于提交
    //第三步：发送请求
    xhr.send();
//等待服务器返回内容
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            alert(xhr.responseText);
        }
    }
}
</script>

下面对上面的代码进行优化

1、创建ajax对象时的兼容处理的两种方法

第一种使用if（）{}else{}

var xhr = null;
    if(window.XMLHttpRequest){//此处的window不可省，否则依然会报错
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

第二种使用try{}catch(e){}

var xhr = null;
    try{
        xhr = new XMLHttpRequest();//代码尝试执行这个块中的内容,如果有错误，则会执行catch{}，   并且传入错误信息参数
    }catch(e){
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

2、open第一个参数：

打开方式有两种post和get，不同的请求方式有不同的写法

写两种方式的例子之前，先做一个小小的知识补充

XMLHttpRequest对象描述

方    法	描    述
abort()	停止当前请求
getAllResponseHeaders()	把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader("header")	返回指定首部的串值
open("method","URL",[asyncFlag],["userName"],["password"])	建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步，用户名，密码
send(content)	向服务器发送请求
setRequestHeader("header", "value")	把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 ('post'方法一定要 )

XMLHttpRequest 对象属性描述

属  性	描    述
onreadystatechange	状态改变的事件触发器，每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数
readyState	请求的状态。有5个可取值：0 = 未初始化，1 = 正在加载，2 = 已加载，3 = 交互中，4 = 完成
responseText	服务器的响应，返回数据的文本。
responseXML	服务器的响应，返回数据的兼容DOM的XML文档对象 ，这个对象可以解析为一个DOM对象。
responseBody	服务器返回的主题（非文本格式）
responseStream	服务器返回的数据流
status	服务器的HTTP状态码（如：404 = "文件末找到" 、200 ="成功" ，等等）
statusText	服务器返回的状态文本信息 ，HTTP状态码的相应文本（OK或Not Found（未找到）等等）

下面几个是我们代码中用到的几种属性

• readyState:  ajax工作状态
• responseText : ajax请求返回的内容就被存放到这个属性下面（都是字符串形式）
• onreadystatechange: 当readyState改变的时候触发
• status ：服务器状态，http状态码（http状态码了解更多请点击​​HTTP状态码分类（常用HTTP状态码和HTTP状态码大全）​​）

get方式：

<script type="text/javascript">
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
    //相当于打开浏览器
    /*
    第一步：创建一个ajax对象
    IE6及以下使用插件的方式：new ActiveXObject('Microsoft.XMLHTTP');兼容处理下面单独提供
    */
    var xhr = null;
    try{
        xhr = new XMLHttpRequest();
    }catch(e){
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

 
    xhr.open('get','2.get.php?username='+encodeURI('刘伟')+'age=30&'+new Date().getTime(),true);//encodeURI()进行编码，防止乱码出现。
new Date().getTime()添加时间戳
//第三步：发送请求 xhr.send();//等待服务器返回内容 xhr.onreadystatechange = function(){//
if(xhr.readyState == 4){ if(xhr.status == 200){ alert(xhr.responseText) }else{ alert('出错了，Err'+xhr.status); } } }}</script>

post方式

<script type="text/javascript">
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
    //相当于打开浏览器
    /*
    第一步：创建一个ajax对象
    IE6及以下使用插件的方式：new ActiveXObject('Microsoft.XMLHTTP');兼容处理下面单独提供
    */
    var xhr = null;
    try{
        xhr = new XMLHttpRequest();
    }catch(e){
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

   
    xhr.open('post','2.post.php',true);
    //相当于提交
    //第三步：发送请求
    xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');//申明发送的数据类型
    //post数据放在send()里面作为参数传递
    xhr.send('username=刘伟&age=30');
    //post没有缓存问题，也无需编码。因为已经在上面申明了发送的数据类型
//等待服务器返回内容
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status ==  200){
                alert(xhr.responseText)
            }else{
                alert('出错了，Err'+xhr.status);
            }
        }
    }
}
</script>

容错处理

其实我们运行这两段代码就会发现，不管我们是否能够找到数据，都会正常执行这段代码，这就是因为我们进行了容错处理，下面我们将这段代码单独摘出来，方便我们看的更清楚

xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status ==  200){
                alert(xhr.responseText)
            }else{
                alert('出错了，Err'+xhr.status);
            }
        }
    }

1- AJAX状态值与状态码区别

AJAX状态值是指，运行AJAX所经历过的几种状态，无论访问是否成功都将响应的步骤，可以理解成为AJAX运行步骤。如：正在发送，正在响应等，由AJAX对象与服务器交互时所得；使用“ajax.readyState”获得。（由数字1~4单位数字组成）

AJAX状态码是指，无论AJAX访问是否成功，由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码，该信息使用“ajax.status”所获得；（由数字1XX,2XX三位数字组成，详细查看RFC）

这就是我们在使用AJAX时为什么采用下面的方式判断所获得的信息是否正确的原因。

if(ajax.readyState == 4 && ajax.status == 200) { putData(ajax.responseText);}

2- AJAX运行步骤与状态值说明

在AJAX实际运行当中，对于访问XMLHttpRequest（XHR）时并不是一次完成的，而是分别经历了多种状态后取得的结果，对于这种状态在AJAX中共有5种，分别是。

0 - (未初始化)还没有调用send()方法

1 - (载入)已调用send()方法，正在发送请求

2 - (载入完成)send()方法执行完成，

3 - (交互)正在解析响应内容

4 - (完成)响应内容解析完成，可以在客户端调用了

对于上面的状态，其中“0”状态是在定义后自动具有的状态值，而对于成功访问的状态（得到信息）我们大多数采用“4”进行判断。

ajax的优缺点总结（下面的内容参考​​ajax工作原理及其优缺点​​）

(1).AJAX的优点

<1>.无刷新更新数据。

AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。

<2>.异步与服务器通信。

AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。

<3>.前端和后端负载平衡。

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

<4>.基于标准被广泛支持。

AJAX基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。

<5>.界面与应用分离。

Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。

(2).AJAX的缺点
<1>.AJAX干掉了Back和History功能，即对浏览器机制的破坏。
在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。
后退按钮是一个标准的web站点的重要功能，但是它没法和js进行很好的合作。这是Ajax所带来的一个比较严重的问题，因为用户往往是希望能够通过后退来取消前一次操作的。那么对于这个问题有没有办法？答案是肯定的，用过Gmail的知道，Gmail下面采用的Ajax技术解决了这个问题，在Gmail下面是可以后退的，但是，它也并不能改变Ajax的机制，它只是采用的一个比较笨但是有效的办法，即用户单击后退按钮访问历史记录时，通过创建或使用一个隐藏的IFRAME来重现页面上的变更。（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态。）
但是，虽然说这个问题是可以解决的，但是它所带来的开发成本是非常高的，并与Ajax框架所要求的快速开发是相背离的。这是Ajax所带来的一个非常严重的问题。
一个相关的观点认为，使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中。该问题的解决方案也已出现，大部分都使用URL片断标识符（通常被称为锚点，即URL中#后面的部分）来保持跟踪，允许用户回到指定的某个应用程序状态。（许多浏览器允许JavaScript动态更新锚点，这使得Ajax应用程序能够在更新显示内容的同时更新锚点。）这些解决方案也同时解决了许多关于不支持后退按钮的争论。
<2>.AJAX的安全问题。
AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。Ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有Ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等。
<3>.对搜索引擎支持较弱。
对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。
<4>.破坏程序的异常处理机制。
至少从目前看来，像Ajax.dll，Ajaxpro.dll这些Ajax框架是会破坏程序的异常机制的。关于这个问题，曾在开发过程中遇到过，但是查了一下网上几乎没有相关的介绍。后来做了一次试验，分别采用Ajax和传统的form提交的模式来删除一条数据……给我们的调试带来了很大的困难。
<5>.违背URL和资源定位的初衷。
例如，我给你一个URL地址，如果采用了Ajax技术，也许你在该URL地址下面看到的和我在这个URL地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。
<6>.AJAX不能很好支持移动设备。
一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax，比如说我们在手机的浏览器上打开采用Ajax技术的网站时，它目前是不支持的。
<7>.客户端过肥，太多客户端代码造成开发上的成本。
编写复杂、容易出错 ；冗余代码比较多（层层包含js文件是AJAX的通病，再加上以往的很多服务端代码现在放到了客户端）；破坏了Web的原有标准。

5.AJAX注意点及适用和不适用场景
(1).注意点
Ajax开发时，网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑。不给予用户明确的回应，没有恰当的预读数据，或者对XMLHttpRequest的不恰当处理，都会使用户感到延迟，这是用户不希望看到的，也是他们无法理解的。通常的解决方案是，使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。
(2).Ajax适用场景
<1>.表单驱动的交互
<2>.深层次的树的导航
<3>.快速的用户与用户间的交流响应
<4>.类似投票、yes/no等无关痛痒的场景
<5>.对数据进行过滤和操纵相关数据的场景
<6>.普通的文本输入提示和自动完成的场景