2016-01-26

JavaScript学习笔记---Ajax入门(零)

传统的Web应用，服务器处理每一个用户请求都需要重新加载网页。这样的处理方式效率不高。用户的体验是所有页面都会消失，再重新载入，即使只是一部分页面元素改变也要重新载入整个页面，不仅要刷新改变的部分，连没有变化的部分也要刷新，这会加重服务器的负担。ajax就解决了这个问题。

什么是Ajax?

Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通俗的说Ajax是一种用来改善用户体验的技术，其本质是利用浏览器内置的一种特殊的对象(XMLHttpRequest)异步(即发送请求时，浏览器不会销毁当前页面，用户可以继续在当前页面做其它的操作)的向服务器发送请求,并且利用服务器返回的数据(不再是一个完整的页面，只是部分的数据，一般使用文本或者xml返回)来部分更新当前页面。

XMLHttpRequest是 Ajax 的基础。获取Ajax对象就要创建XMLHttpRequest对象

function getXhr() {
    var xmlhttp;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
    }
    else {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
}

比较标准的创建XMLHttpRequest对象的方法

function createXmlHttp() { 
    if (window.XmlHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = newXmlHttpRequest();
    } 
    if (window.ActiveXObject) { // code for IE6, IE5
        try {
            xmlhttp = newActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            try {
                xmlhttp = newActiveXObject("msxml2.XMLHTTP");
            } catch (ex) {}
        }
    }
}
function useAjax() {
    var data = document.getElementById("username").value;
    createXmlHttp();
    if (!xmlhttp) {
        alert("创建xmlhttp对象异常！");
        return false;
    }
    xmlhttp.open("get", url, true);    
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4) {
            document.getElementById("xxx").innerHTML = "数据正在加载...";
            if (xmlhttp.status == 200) {
                document.write(xmlhttp.responseText);
            }
        }
    }
    xmlhttp.send();
}

Ajax的工作原理图:

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’方法一定要)

Ajax对象的属性

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（未找到）等等）

Ajax技术的优点

1、最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。　
2、使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

Ajax技术的缺点

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

Ajax注意点及适用和不适用场景

1、注意点

Ajax开发时，网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑。不给予用户明确的回应，没有恰当的预读数据，或者对XMLHttpRequest的不恰当处理，都会使用户感到延迟，这是用户不希望看到的，也是他们无法理解的。通常的解决方案是，使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。

2、Ajax适用场景

1）.表单驱动的交互
2）.深层次的树的导航
3）.快速的用户与用户间的交流响应
4）.类似投票、yes/no等无关痛痒的场景
5）.对数据进行过滤和操纵相关数据的场景
6）.普通的文本输入提示和自动完成的场景

3、Ajax不适用场景

1）.部分简单的表单
2）.搜索
3）.基本的导航
4）.替换大量的文本
5）.对呈现的操纵

所用到的技术

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

本文标题:JavaScript学习笔记---Ajax入门(零)

文章作者:Lueny

发布时间:2016年01月26日 - 22时50分

最后更新:2016年04月01日 - 16时55分

原始链接:http://yoursite.com/2016/01/26/JavaScript学习笔记---Ajax入门(零)/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。