零基础学习AJAX之AJAX的简介和基础

AJAX概述

AJAX（Asynchronous JavaScript And XML）指的是利用JavaScript的异步通信技术向后端服务器请求数据并更新页面的技术。它可以使页面部分刷新，而不是每一次都要刷新整个页面，从而增强了用户的体验。

AJAX的优点

• 减少了不必要的数据传输
• 优化了用户体验
• 减轻了服务器的负担
• 可以与其他技术组合使用，实现更强大的功能

AJAX的技术要素

• XMLHttpRequest对象：AJAX最重要的对象之一。通过该对象可以实现与后端服务器的数据交互。
• 回调函数：在数据请求成功之后执行的函数，可以进行数据的更新等操作。
• 服务器端的数据：AJAX通过向后端服务器请求数据来更新页面。

AJAX的基本使用

第一步：创建XMLHttpRequest对象

var xmlhttp = new XMLHttpRequest();

第二步：创建回调函数

当数据请求成功之后，回调函数就会被调用，可以在回调函数中对数据进行处理。

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        // 处理数据的代码
    }
};

第三步：发送请求

xmlhttp.open("GET", "url", true);
xmlhttp.send();

其中，"url"指向后端服务器处理数据的页面地址，true表示异步请求。

AJAX示例1：请求后台数据并更新页面

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("result").innerHTML = xmlhttp.responseText;
    }
};
xmlhttp.open("GET", "data.php", true);
xmlhttp.send();

该示例中，通过AJAX发送GET请求，请求data.php页面的数据，并将返回结果更新到页面的"result"元素中。

AJAX示例2：提交表单并处理数据

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("result").innerHTML = xmlhttp.responseText;
    }
};
var form = document.getElementById("myform");
var data = new FormData(form);
xmlhttp.open("POST", "submit.php", true);
xmlhttp.send(data);

该示例中，通过AJAX发送POST请求，将表单中的数据提交到后台服务器的submit.php页面，后台服务器会返回一个处理结果，然后将该结果更新到页面的"result"元素中。其中，FormData对象用于获取表单中的数据。