【ajax】 ajax 基础示例

AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术），指的是一套综合了多项技术的浏览器端网页开发技术。Ajax的概念由杰西·詹姆士·贾瑞特所提出[1]。

传统的Web应用允许用户端填写表单（form），当提交表单时就向Web服务器发送一个请求。服务器接收并处理传来的表单，然后送回一个新的网页，但这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML码往往是相同的。由于每次应用的沟通都需要向服务器发送请求，应用的回应时间依赖于服务器的回应时间。这导致了用户界面的回应比本机应用慢得多。

与此不同，AJAX应用可以仅向服务器发送并取回必须的数据，并在客户端采用JavaScript处理来自服务器的回应。因为在服务器和浏览器之间交换的数据大量减少（大约只有原来的5%）[来源请求],服务器回应更快了。同时，很多的处理工作可以在发出请求的客户端机器上完成，因此Web服务器的负荷也减少了。

应用

兼容性

JavaScript编程的最大问题来自不同的浏览器对各种技术和标准的支持。

XmlHttpRequest对象在不同浏览器中不同的创建方法，以下是跨浏览器的通用方法：

// Provide the XMLHttpRequest class for IE 5.x-6.x:
// Other browsers (including IE 7.x-8.x) ignore this
//   when XMLHttpRequest is predefined
var xmlHttp;
if (typeof XMLHttpRequest != "undefined") {
    xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    var aVersions = ["Msxml2.XMLHttp.5.0", "Msxml2.XMLHttp.4.0", "Msxml2.XMLHttp.3.0", "Msxml2.XMLHttp", "Microsoft.XMLHttp"];
    for (var i = 0; i < aVersions.length; i++) {
        try {
            xmlHttp = new ActiveXObject(aVersions[i]);
            break;
        } catch (e) {}
    }
}

AJAX支持的浏览器有：Internet Explorer、Chrome、Firefox、Opera、Konqueror及Mac OS的Safari。但是Opera不支持XSL格式对象，也不支持XSLT[8]。

测试案例:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>ajax</title>
    <script type="text/javascript">

        function loadData() {
            var request;
            //判断浏览器的类型
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                request = new XMLHttpRequest();

            }
            else {
                // code for IE6, IE5
                request = new ActiveXObject('Microsoft.XMLHTTP');
            }

            /*
             onreadystatechange    存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

             readyState
             存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
             0: 请求未初始化
             1: 服务器连接已建立
             2: 请求已接收
             3: 请求处理中
             4: 请求已完成，且响应已就绪

             status
             200: "OK"
             404: 未找到页面

             */
            request.onreadystatechange = function () {

                if (request.status == 200 && request.readyState == 4) {
                    var text = request.responseText;

                    document.getElementById("txt").innerHTML = text;
                }


            }
            /**
             * open(method,url,async)
             * 规定请求的类型、URL 以及是否异步处理请求。
             method：请求的类型；GET 或 POST
             url：文件在服务器上的位置
             async：true（异步）或 false（同步）
             */
            request.open("POST", "test.action", true);
            /**
             * 将请求发送到服务器。
             string：仅用于 POST 请求
             */
            request.send();

        }


    </script>

<body onload="loadData();">

  <H2 id="txt"></H2>
</body>
</html>

参考资料:

AJAX-维基百科

W3CSCHOOL 测试案例

posted @ 2015-04-13 07:39  snow__wolf  阅读(159)  评论(0)    收藏  举报