Ajax原理与应用案例快速入门教程攻略

什么是Ajax？

Ajax 指的是“Asynchronous Javascript And XML” (异步 JavaScript 和 XML)。

通过在后台与服务器进行少量数据交换，实现网页异步更新。这意味着可以在不重新加载整个网页的情况下更新网页的部分内容。

Ajax的原理

Ajax的工作原理相对简单，基本由以下几步组成：

创建XMLHttpRequest对象。
发送请求：使用 XMLHttpRequest 对象向服务器发起异步请求。
服务器处理请求生成响应。
接收响应：使用 XMLHttpRequest 对象接收并处理服务器返回的数据。
更新页面内容：使用JavaScript操作DOM来更新页面的HTML内容。

Ajax的优点

优化用户体验：Ajax的异步请求能够在不重新加载整个页面的情况下更新局部页面，这样可以极大地提高用户的交互体验。
减轻服务器压力：Ajax的异步请求可以减少无必要的数据传输，减轻服务器压力，提高服务器响应速度。
优化带宽：Ajax技术可以使数据传输更小、更快、更可靠。

Ajax的应用案例

案例1：查询当前时间

<!DOCTYPE html>
<html>
<head>
    <title>查询系统当前时间</title>
    <meta charset="utf-8">
    <script>
        function showTime() {
            //创建 XMLHttpRequest
            let xmlhttp;
            if (window.XMLHttpRequest) {
                xmlhttp=new XMLHttpRequest();
            } else {
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }

            //接收响应
            xmlhttp.onreadystatechange=function() {
                if (this.readyState==4 && this.status==200) {
                    //更新页面内容
                    document.getElementById("time").innerHTML=this.responseText;
                }
            }

            //发送请求
            xmlhttp.open("GET","getTime.php",true);
            xmlhttp.send();
        }
    </script>
</head>
<body onload="showTime()">
    <h1>系统当前时间</h1>
    <p id="time"></p>
</body>
</html>

在上述示例中，Ajax技术被用来实现了查询系统当前时间的功能。页面在加载完成后，自动调用showTime()函数，该函数创建 XMLHttpRequest 对象，向服务器发起异步请求，通过接收服务器的响应来更新当前时间的内容。

案例2：实现异步搜索功能

<!DOCTYPE html>
<html>
<head>
    <title>异步搜索</title>
    <meta charset="utf-8">
    <script>
        function showResult(str) {
            //创建 XMLHttpRequest
            let xmlhttp;
            if (window.XMLHttpRequest) {
                xmlhttp=new XMLHttpRequest();
            } else {
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }

            //接收响应
            xmlhttp.onreadystatechange=function() {
                if (this.readyState==4 && this.status==200) {
                    //更新页面内容
                    document.getElementById("result").innerHTML=this.responseText;
                }
            }

            //发送请求
            xmlhttp.open("GET","getHint.php?q="+str,true);
            xmlhttp.send();
        }
    </script>
</head>
<body>
    <h1>异步搜索</h1>
    <p>输入一个城市名称：</p>
    <form>
        <input type="text" size="30" onkeyup="showResult(this.value)">
    </form>
    <p>搜索结果：</p>
    <p id="result"></p>
</body>
</html>

在上述示例中，Ajax技术被用来实现了异步搜索的功能。在搜索框中输入关键词后，页面自动调用showResult()函数，该函数创建 XMLHttpRequest 对象，以GET方式向服务器发起异步请求并携带查询的关键词，通过接收服务器的响应来更新搜索结果的内容。