ajax的一些事

ajax：asynchronous Javascript and XML   (异步的 JavaScript 和 XML)

 

ajax原理和XMLHttprequest

ajax的原理简单来说XMLHttpquest来向服务器发送异步的请求，从服务器获取数据，然后用javascript来操作DOM来更新界面，其中最关键的一点就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对XMLHttpRequest有所了解。

XMLHttpRequest是ajax的核心机制，是一种支持异步请求的技术，简单来说，也就是javascript可以及时向服务器端提出请求和处理响应，而不阻塞用户，以此来达到无刷新的效果。

想要了解XMLHttquset工作原理，我们首先要对他的属性有所了解。

　　属性不多，我们要用的只有6个属性：

　　onreadystatechange 每次状态改变所触发事件处理程序

　　responseText　　　从服务器进程中返回数据的字符串形式

　　responseXML　　   从服务器返回DOM兼容的文档数据对象

　　status　　　　　　从服务器返回的数字代码，常见的有404（未找到）和200（已就绪）

　　status Text　　　　伴随状态码的字符串信息

　　readyState　　　　对象状态值

　　　　　　0（未初始化）对象已建立，但是尚未初始化（尚未调用open方法）

　　　　　　1（初始化）对象已建立，　尚未调用send放法　

　　　　　　2（数据传送中）已接受部分数据，因为响应及http头不全，这个时候通过responseBody和reponseText获取部分数据会出现错误

　　　　　　3（完成）数据接受完毕，此时可以通过responseXml和responseText获取完整的回应数据

那现在我们就来一遍简单的ajax的请求吧

//首先，我们需要创建一个xml对象
    var xml = new XMLHttpRequest();
//将数据发送
    xml.open('GET','user.php',true);
//发送后响应的程序
    xml.onreadystatechange = function(){
           if(xml.readyState === 4){
                   console.log('正在加载');
          if(xml.status == 200){
                  //拿刀数据，渲染页面
            }
        }      
    }     
xml.send();               

上图代码分析：

1.将数据发送时，括号里面有三个参数，分别是提交数据的类型(get或者post)，请求的url地址和传递的参数，传输方式（同步还是异步，true还是false）

　　关于传输方式，如果是异步通信，客户端就等待服务器响应；如果是同步方式（false），客户端就要等待服务器返回消息后才执行其他操作。有些页面中，可能会放多个请求，甚至是组织有计划大规模的高强度的request，而是后面一个覆盖前面一个，这个时候就要使用同步方式了。

2.然后会检查XMLHttpRequest的整体状态并且保证它已经完成(readyStatus == 4),数据发送完毕，然后根据服务器设定的请求状态，就执行下面的操作

3.一切准备就绪，send发送请求

 

关于ajax的优点

1.页面无刷新，在页面内 与服务器通信，给用户的体验非常好

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

3.可以把以前的服务器负担装换成客户端，利用客户端闲暇的能力来处理，减轻服务器端和带宽的负担，节约空间和宽度租用成本

4.基于规范化并被广泛支持，不需要下载插件和程序

 

关于ajax的缺点：

1.使用ajax无法进行后退，对浏览器的后退机制产生破坏

2.安全问题

3.搜索引擎的支持比较弱

4.违背了url和资源定位的初中，可能两个人打开同一个网页看到的内容不一样