【小白入门】始于前端UI（三）——AJAX简介

本文链接：https://blog.youkuaiyun.com/weixin_43226986/article/details/111554695

本文介绍了AJAX技术的基本概念，通过简单实例展示了如何使用JavaScript和XMLHttpRequest对象与服务器异步交互，更新网页部分内容而不需重新加载整个页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是AJAX？

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
AJAX工作原理

AJAX使用XMLHttpRequest对象，异步的与服务器交换数据；
使用JavaScript/DOM，实现信息显示/交互；
CSS可以给数据定义样式
XML则可以作为数据转换的格式

1. 简单的实例让你了解AJAX

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

下面为loadXMLDoc() 函数：

<head>
<script>
function loadXMLDoc()
{
    var xmlhttp;
	if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	}
	xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
	xmlhttp.send();
}
</script>
</head>

ajax_info.txt内容如下：

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的技术，在不重新加载整个页面的情况下

2. XMLHttpRequest——与服务器进行异步交互的JS对象

XMLHttpRequest 是 AJAX 的基础，用于和服务器交换数据

创建XMLHttpRequest对象：

var = new XMLHttpRequest();

向服务器发送请求

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

详细介绍请看：Ajax XMLHttpRequest

3. AJAX的具体操作步骤

触发一个客户端事件。
创建一个XMLHttpRequest对象。

var AjaxRequest;  // 缓存 XMLHttpRequest 对象
function AjaxFunction(){
    try{
        // Opera 8.0+, Firefox, Safari
        AjaxRequest = new XMLHttpRequest();
    }catch (e){

        // IE 浏览器
        try{
            AjaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        }catch (e) {

            try{
                AjaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }catch (e){
                // 错误处理
                alert("Your browser broke!");
                return false;
            }
        }
    }
}

配置XMLHttpRequest对象。

在这个步骤中，我们将会编写一个将由客户端事件触发的函数，然后注册一个processRequest() 回调函数。

function validateUserId() {
    AjaxFunction();

    // 这里的 processRequest() 就是回调函数
    AjaxRequest.onreadystatechange = processRequest;

    if (!target) target = document.getElementById("userid");
    var url = "validate?id=" + escape(target.value);

    AjaxRequest.open("GET", url, true);
    AjaxRequest.send(null);
}

使用XMLHttpRequest对象创建一个到web服务器的异步请求。

function validateUserId() {
    AjaxFunction();

    // 这里的 processRequest() 就是回调函数
    AjaxRequest.onreadystatechange = processRequest;

    __if (!target) target = document.getElementById("userid");__
    __var url = "validate?id=" + escape(target.value);__

    __AjaxRequest.open("GET", url, true);__
    __AjaxRequest.send(null);__
}

假设我们在 userid 输入框中输入 Zara，那么在上面的请求中，URL 会被设置为 "validate?id=Zara"。

web服务器返回包含XML文档的结果。
XMLHttpRequest对象调用callback()函数处理结果，
更新HTML DOM。
① JavaScript 使用 DOM API 获取页面任意元素的引用。
② 获取一个元素引用推荐的方式就是调用
下面是一个具体的例子：

<script type="text/javascript">
<!--
function setMessageUsingDOM(message) {
    var userMessageElement = document.getElementById("userIdMessage");
    var messageText;

    if (message == "false") {
        userMessageElement.style.color = "red";
        messageText = "Invalid User Id";
    }
    else 
    {
        userMessageElement.style.color = "green";
        messageText = "Valid User Id";
    }

    var messageBody = document.createTextNode(messageText);

    // 如果 messageBody 元素已经创建了，则简单的替换它，否则插入一个新的元素。 
    if (userMessageElement.childNodes[0]) {
        userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
    } 
    else
    {
        userMessageElement.appendChild(messageBody);
    }
}
-->
</script>
<body>