ajax使用教程_AJAX教程：什么是AJAX以及如何使用它

最新推荐文章于 2024-07-13 13:55:40 发布

cumi6497

最新推荐文章于 2024-07-13 13:55:40 发布

阅读量195

点赞数 1

文章标签： java ajax js javascript vue ViewUI

原文链接：https://www.freecodecamp.org/news/ajax-tutorial/

版权

ajax使用教程

什么是AJAX？ (What is AJAX?)

AJAX stands for Asynchronous JavaScript And XML. It is not a programming language. It is a technology for developing better, faster and interactive Web Applications using HTML, CSS, JavaScript and XML.

AJAX代表异步JavaScript和XML 。它不是编程语言。它是一项使用HTML，CSS，JavaScript和XML开发更好，更快和交互式Web应用程序的技术。

HTML : Hypertext Markup Language (HTML) is used for defining the structure of a Web Application.
HTML：超文本标记语言(HTML)用于定义Web应用程序的结构。
CSS : Cascading Style Sheet (CSS) is used to provide look and style to a Web Application.
CSS：级联样式表(CSS)用于为Web应用程序提供外观和样式。
JavaScript : JavaScript is used for making a Web Application interactive, interesting and user friendly.
JavaScript：JavaScript用于使Web应用程序具有交互性，趣味性和用户友好性。
XML : Extensible Markup Language (XML) is a format to store and transport data from the Web Server.
XML：可扩展标记语言(XML)是一种用于存储和传输来自Web服务器的数据的格式。

AJAX中的异步是什么意思？ (What's the meaning of Asynchronous in AJAX?)

Asynchronous means that the the Web Application could send and receive data from the Web Server without refreshing the page. This background process of sending and receiving data from the server along with updating different sections of a web page defines Asynchronous property/feature of AJAX.

异步意味着Web应用程序可以在不刷新页面的情况下从Web服务器发送和接收数据。从服务器发送和接收数据以及更新网页的不同部分的后台过程定义了AJAX的异步属性/功能。

AJAX如何运作 (How AJAX works)

AJAX makes use of a browser built-in XMLHttpRequest object to request data from a Web Server and HTML DOM to display or use the data.

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

XMLHttpRequest Object : It is an API in the form an object whose methods help in transfer of data between a web browser and a web server.

XMLHttpRequest对象 ：它是一种对象形式的API，其方法有助于在Web浏览器和Web服务器之间传输数据。

HTML DOM : When a web page is loaded, the browser creates a Document Object Model of the page.

HTML DOM ：加载网页时，浏览器将创建该页面的文档对象模型。

Create a XMLHttpRequest Object :

创建一个XMLHttpRequest对象：

var xhttp = new XMLHttpRequest();

Properties of XMLHttpRequest object :

XMLHttpRequest对象的属性：

readystate is a property of the XMLHttpRequest Object which holds the status of the XMLHttpRequest.

readystate是XMLHttpRequest对象的属性，该对象保存XMLHttpRequest的状态。

0: request not initialized
0：请求未初始化
1: server connection established
1：建立服务器连接
2: request received
2：收到请求
3: processing request
3：处理要求
4: request finished and response is ready
4：请求已完成且响应已准备就绪

```onreadystatechange``` is a property of the XMLHttpRequest Object which defines a function to be called when the readyState property changes.```status``` is a property of the XMLHttpRequest Object which returns the status-number of a request

“ onreadystatechange”是XMLHttpRequest对象的属性，该属性定义了readyState属性更改时要调用的函数。“ status”是XMLHttpRequest对象的属性，该属性返回请求的状态号。

200: "OK"
200：“确定”
403: "Forbidden"
403：“禁止”
404: "Not Found"
404：“找不到”

XMLHttpRequest Object Methods : To send a request to a Web Server, we use the open() and send() methods of the XMLHttpRequest object.

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

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

Create a function changeContent() using JavaScript :

使用JavaScript创建功能changeContent()：

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();
}

AJAX example to change content of a web page :

更改网页内容的AJAX示例：

<!DOCTYPE html>
<html>
<body>

<div id="foo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="changeContent()">Change Content</button>
</div>

<script>
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();
}
</script>

</body>
</html>

The file content.txt should be present in the root directory of the Web Application.

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

翻译自: https://www.freecodecamp.org/news/ajax-tutorial/

ajax使用教程

cumi6497

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax使用教程_AJAX教程：什么是AJAX以及如何使用它

ajax使用教程什么是AJAX？ (What is AJAX?)AJAX stands for Asynchronous JavaScript And XML. It is not a programming language. It is a technology for developing better, faster and interactive Web Applications u...
复制链接

扫一扫