AJAX 简介及入门实例

我会为您讲解关于“AJAX 简介及入门实例”的完整攻略。

AJAX 简介

AJAX 全称为 Asynchronous JavaScript and XML，即“异步的 JavaScript 和 XML”。它是一种用于 Web 开发的技术，通过使用 AJAX 技术，Web 页面可以异步地向服务器请求数据并且在不刷新页面的情况下更新部分页面内容。

AJAX 使用了以下技术：

• XMLHttpRequest 对象用于与服务器交换数据。
• JavaScript/DOM 在网页中更新数据。
• XML 或者 JSON 作为数据传输格式。

AJAX 的优点：

• 不需要刷新整个页面，更加流畅和快速。
• 可以通过异步方式与服务器通信，减少请求时间，提升用户体验。
• 可以使用多种数据格式，例如 JSON、XML 等。

下面，我将为您带来 AJAX 的实例示范。

AJAX 示例1：

以下示例为基础的 AJAX GET 请求：

html 代码：

<button onclick="loadDoc()">点击获取数据</button>

<p id="demo"></p>

Javascript 代码：

function loadDoc() {
    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("demo").innerHTML = this.responseText;
        }
    };
    xhttp.open("GET", "demo_ajax.txt", true);
    xhttp.send();
}

demo_ajax.txt 文件内容为：

Hello AJAX!

该示例通过按钮点击触发 loadDoc() 函数，然后通过 AJAX GET 请求读取文件内容，最后将内容更新到 HTML 应用中。

AJAX 示例2：

以下示例为带有参数的 AJAX POST 请求：

html 代码：

<input type="text" id="input" placeholder="在此输入名称">

<button onclick="loadDoc()">点击获取数据</button>

<p id="demo"></p>

Javascript 代码：

function loadDoc() {
    var xhttp = new XMLHttpRequest();
    var inputName = document.getElementById("input").value;

    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("demo").innerHTML = this.responseText;
        }
    };
    xhttp.open("POST", "demo_ajax.php", true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send("name=" + inputName);
}

demo_ajax.php 文件内容为：

<?php
$name = $_POST["name"];
echo "你好 $name";
?>

该示例通过输入框和按钮触发 loadDoc() 函数，然后通过 AJAX POST 请求，将输入的名称作为参数传递给 demo_ajax.php，最后将返回结果更新到 HTML 应用中。

以上是两个比较容易入门的 AJAX 示例，通过对实例的代码和结构的分析，相信您已经有了初步的了解。