Ajax 工作原理及实例

参考文档：https://blog.csdn.net/wu_duo/article/details/52627193

ajax 的全称是Asynchronous JavaScript and XML，其中 Asynchronous 是异步的意思，它于传统web开发的同步方式不同。

1. 关于同步与异步

　　　同步：面向比特的传输，单位是帧。它传输的时候要求接收方和发送发的始终保持一致，而异步在传送过程中则不要求保持一致。

　　　异步：面向字符的传输，单位是字符。发送方可以在任何时刻发送小组，接收方并不知道它什么时候到达。异步传输的例子：计算机键盘和主机的通讯，键盘可以在任何时刻发送代码，主机内部的硬件必须能够在任何时刻接收一个键入的字符。

　　　当一个进程执行某个请求时，如果这个请求的返回信息需要一段时间，那么同步会等待该请求返回信息，直到收到该返回信息，才执行下一个请求。而异步在执行一个请求的时候，如果该请求的返回信息需要一段时间，那么它不会一直等待返回信息，它会继续执行下一个请求，不会管其他进程的状态，当有返回信息的时候，系统会通知进程处理，这样可以提高执行效率。

2. Ajax所包含的技术

使用CSS和XHTML来表示。
使用DOM模型来交互和动态显示。
使用XMLHttpRequest来和服务器进行异步通信。
使用JavaScript来绑定和调用

　　在上面的技术中，出了XMLHttpRequest对象外，其他技术都是基于web标准并且已经被广泛使用，虽然XMLHttpRequest没有被W3C所采纳，但是它已经是一个实施的标准，因为目前几乎所有浏览器都支持它。

3. ajax原理和XMLHttpRequest 对象

　　ajax原理：是通过XMLHttpRequest对象来向服务器发出请求，从服务器获取数据，通过JavaScript来操作DOM对象，实现页面更新。

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

　　XMLHttpRequest对象的属性和方法

属性	说明
readyState	表示XMLHttpRequest对象的状态： 0：未初始化。对象已创建，未调用open。 1：open方法成功调用，但Send方法未调用。 2 : send方法已经调用，尚未开始接受数据。 3：正在接受数据。Http响应头信息已经接受，但尚未接受完成。 4：完成，即响应数据接受完成。
OnReadyStateChange	请求状态改变的事件触发器（readyState变化时会调用这个属性上注册的JavaScript函数）
responseText	服务器响应的文本内容。
responseXML	服务器响应的XML内容对应的DOM对象
Status	服务器返回的http状态码。 200：成功 404：未找到 500：服务器内部错误
statusText	服务器返回状态的文本信息

方法	说明
Open（String method，string url， boolean asynch，string userName， string password）	指定与服务器交互方式，URL地址和其他请求信息。 Method：表示http请求方式，一般是用“GET”，“POST”。 URL：表示请求的服务器地址。 asynch：表示是否异步请求方式，true：异步，false：同步。 username和password可以不指定。 username：用户名，password：密码，提供http认证机制需要的用户名和密码。
Send（content）	向服务器发出请求，如果是异步方式，该文件会立即返回。 content可以指定为null，表示不发送数据，其内容可以是DOM对象，输入流或者字符串。
SetRequestHeader（string header，string value）	设置HTTP请求中的指定头部header的值为value。此方法需要再open方法以后调用，一遍在post方式中使用。
getAllResponseHeader()	返回包含Http的所有响应头信息，其中响应头包括Content-length，data，url等内容。返回值是一个字符串，包含所有头信息，其中每个键名和键值用冒号分开，每一组键之间用CR和LF（回车加换行符）来分隔
Abort（）	停止当前http请求。对应的XMLHttpRequest对象会抚慰到未初始化状态

4. Ajax 实例

五步写出Ajax实例

第一步：创建XMLHttpRequest对象

第二步：注册回调方法

第三部：设置和服务器交互的响应参数

第四步：设置向服务器发送的数据，启动和服务器的交互

第五步：判断和服务器端的交互是否完成，还要判断服务器端是否返回正确的数据

// 类的构建定义，主要职责就是新建XMLHttpRequest对象
var MyXMLHttpRequest = function() {
    var xmlHttpRequest;
    if (window.XMLHttpRequest) {
           xmlHttpRequest = new XMLHttpRequest();   //第一步，创建一个XMLHttpRequest对象；
        if（xmlHttpRequest.overrideMimeType） {
            xmlHttpRequest.overrideMimeType("text/xml"); //重写由服务器返回的MIME type(该资源的媒体类型)。overrideMimeType("text/xml"):强制把一个响应流当作“text/xml”来处理和解析    
        }
      }else if (window.ActiveXObject){
        var  activeName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
        for (var i=0; i<activeName.length;i++) {
            try {
                xmlHttpRequest = new ActiveXObject(activeName[i]);
                break;
            }catch(e) {
　　　　　　}
        }     
       }
    if ((xmlHttpRequest == undefind) || (xmlHttpRequest == null)) {
　　　　alert('XMLHttpRequest对象创建失败！！');
　　} else {
　　　　this.xmlhttp = xmlHttpRequest;
　　}
　　/* 用户发送请求的方法
　　prototype 属性使您有能力向对象添加属性和方法。
　　语法： Object.prototype.name = value
　　　*/
　　MyXMLHttpRequest.prototype.send = function(method,url,data,callback,failback) {
　　　　　　if (this.xmlhttp != undefined && this.xmlhttp != null) {
    　　　　　　method = metchod.toUpperCase();
    　　　　　　if (method != "GET" && method != "POST") {
    　　　　　　　　alert("HTTP的请求方法必须为GET或者POST！");
    　　　　　　}
    　　　　　　if (url == null || url == undefined) {
    　　　　　　　　alert("HTTP的请求地址必须设置！");
    　　　　　　}
    　　　　　　var tempxmlhttp = this.xmlhttp;
    　　　　　　this.xmlhttp.onreadystatechange = function() {
    　　　　　　　　if (tempxmlhttp.readystate == 4) {
    　　　　　　　　　　if (temxmlhttp.status == 200) {
    　　　　　　　　　　　　var responseText = temxmlhttp.responseText;
    　　　　　　　　　　　　var responseXML = temxmlhttp.reponseXML;
    　　　　　　　　　　　　if (callback == undefind || callball == null) {
    　　　　　　　　　　　　　　alert("没有设置处理数据正确返回的方法！")；
    　　　　　　　　　　　　　　alert("返回的数据" + responseText)；
    　　　　　　　　　　　　} else {
    　　　　　　　　　　　　　　callback(responseText, responseXML);
    　　　　　　　　　　　　}
    　　　　　　　　　　} else {
    　　　　　　　　　　　　if (failback == undefined || failback == null) {
    　　　　　　　　　　　　　　alert("没有设置处理数据返回失败的处理方法！");
    　　　　　　　　　　　　　　alert("HTTP的响应码：" + tempxmlhttp.status + ",响应码的文本信息： " + tempxmlhttp.statusText)；

    　　　　　　　　　　　　}else {
    　　　　　　　　　　　　　　failback(tempxmlhttp.status,tempxmlhttp.statusText);
    　　　　　　　　　　　　}
    　　　　　　　　　　}
    　　　　　　　　}
    　　　　　　}
    　　　　　　//解决缓存的转换
    　　　　　　if （url.indexOf("?") > 0） {
    　　　　　　　　url = url + "&t=" + (new Date()).valueOf();//valueOf(): 返回 Date 对象的原始值。单位：毫秒
    　　　　　　} else {
    　　　　　　　　url = url + "?t=" + (new Date()).valueOf();
    　　　　　　}
    　　　　　　//解决跨域的问题
    　　　　　　if (url.indexOf("http://") >= 0) {
    　　　　　　　　url.replace(">","&");
    　　　　　　　　url = "Proxy?url=" + url;
    　　　　　　}
    　　　　　　this.xmlhttp.open(method,url,true);
    　　　　　　//如果是POST方式，需要设置请求头
    　　　　　　if(method == 'POST') {
    　　　　　　　　this.xmlhttp.setRequestHeader("Content-type","application/x-www-four-urlencoded");
    　　　　　　}
    　　　　　　this.xmlhttp.send(data);

　　　　　　} else {
　　　　　　   alert("XMLHttpRequest对象创建失败，无法发送数据！");
　　　　　　}
　　　　　　MyXMLHttpRequest.prototype.abort = function() {
　　　　　　　 this.xmlhttp.abort();
　　　　　　}
　　}
 }

5. Ajax 的优点

无刷新更新数据

　　Ajax最大的优点就是再不更新页面的情况下和服务器进行通信维护数据，使得web应用程序更加迅速的响应交互，减少了用户等待时间，这样带来了更好的用户体验。

异步与服务器通信

　　Ajax采用异步传输方式与服务器通信，在不打断用户操作的情况下，具有更快速的响应能力。

前端和后端负载平衡

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

基于标准被广泛支持

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

界面与应用分离

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

6. AJAX 缺点

无法使用浏览器自带的Back和History功能

　　在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。

Ajax安全性差

　　AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。Ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有Ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等。

对搜索引擎支持较弱

　　对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。

Ajax不能很好支持移动设备

　　一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax，比如说我们在手机的浏览器上打开采用Ajax技术的网站时，它目前是不支持的。

太多客户端代码造成开发上的成本。
编写复杂、容易出错；冗余代码比较多（层层包含js文件是AJAX的通病，再加上以往的很多服务端代码现在放到了客户端）；破坏了Web的原有标准。

Ajax 工作原理 及 实例

猜你喜欢

Ajax 工作原理及实例