写给初学者的编程教程：ajax 是什么以及 ajax 如何使用

2024-07-12 00:50| 来源: 网络整理| 查看: 265

原文：AJAX Tutorial: What AJAX Is and How to Use it

什么是 AJAX

AJAX 是 Asynchronous JavaScript And XML 的缩写。它不是一种编程语言。它是一种基于 HTML、CSS、JavaScript 和 XML，让开发更好、更快和更有互动的 Web 应用的技术。

HTML：超文本标记语言（HTML）用于定义网络应用程序的结构。 CSS：层叠样式表（CSS）用于为 Web 应用程序提供外观和样式。 JavaScript：JavaScript 用于使网络应用程序互动、提供趣味和提高用户友好性。 XML：可扩展标记语言（XML）是一种用于存储和传输网络服务器数据的格式。 AJAX 中的异步是什么意思

异步意味着网络应用程序可以从网络服务器发送和接收数据，而无需刷新页面。这个向服务器发送数据和接收服务器数据以及更新网页不同部分的后台过程，就是 AJAX 的异步属性/功能。

AJAX 是如何工作的

AJAX 利用浏览器内置的 XMLHttpRequest 对象从网络服务器请求数据，并利用 HTML DOM 显示或使用数据。

XMLHttpRequest 对象：它是一个对象形式的 API，其方法用于网络浏览器和网络服务器之间传输数据。

HTML DOM：当一个网页被加载时，浏览器会创建一个页面的文档对象模型。

创建一个 XMLHttpRequest 对象：

var xhttp = new XMLHttpRequest();

XMLHttpRequest 对象的属性：

readystate 是 XMLHttpRequest 对象的一个属性，它是 XMLHttpRequest 的一种状态值。

0：请求未被初始化 1：服务器连接建立 2：收到请求 3：处理请求 4：请求完成，响应准备就绪

onreadystatechange是 XMLHttpRequest 对象的一个属性，它定义了一个当 readyState 属性改变时要调用的函数。

status 是 XMLHttpRequest 对象的一个属性，用于返回一个请求的状态值。

200："OK" 403："Forbidden" 404："Not Found"

XMLHttpRequest对象方法：为了向 Web 服务器发送请求，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法。

xhttp.open('GET', 'content.txt', true); xhttp.send();

使用 JavaScript 创建一个函数 changeContent()：

改变网页内容的 AJAX 实例：

The XMLHttpRequest Object Change Content function changeContent() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { document.getElementById( 'foo' ).innerHTML = this.responseText; } }; xhttp.open('GET', 'content.txt', true); xhttp.send(); }

文件 content.txt 应该存在于Web应用程序的根目录中。

【本文地址】

公司简介

联系我们