From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/guide/ajax/getting_started/index.html | 273 +++++++++++++++++++++ files/zh-cn/web/guide/ajax/index.html | 93 +++++++ 2 files changed, 366 insertions(+) create mode 100644 files/zh-cn/web/guide/ajax/getting_started/index.html create mode 100644 files/zh-cn/web/guide/ajax/index.html (limited to 'files/zh-cn/web/guide/ajax') diff --git a/files/zh-cn/web/guide/ajax/getting_started/index.html b/files/zh-cn/web/guide/ajax/getting_started/index.html new file mode 100644 index 0000000000..4aed922902 --- /dev/null +++ b/files/zh-cn/web/guide/ajax/getting_started/index.html @@ -0,0 +1,273 @@ +--- +title: Getting Started +slug: Web/Guide/AJAX/Getting_Started +translation_of: Web/Guide/AJAX/Getting_Started +--- +
{{DefaultAPISidebar("XMLHttpRequest")}}
+ +

这篇文章旨在帮助你了解AJAX基础，并提供两个可上手的简单案例供你学习。

+ +

什么是AJAX？

+ +

AJAX是异步的JavaScript和XML（Asynchronous JavaScript And XML）。简单点说，就是使用 XMLHttpRequest 对象与服务器通信。 它可以使用JSON，XML，HTML和text文本等格式发送和接收数据。AJAX最吸引人的就是它的“异步”特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。

+ +

你可以使用AJAX最主要的两个特性做下列事：

+ + + +

Step 1 – 怎样发送http请求

+ +

为了使用JavaScript向服务器发送一个http请求，你需要一个包含必要函数功能的对象实例。这就是为什么会有 XMLHttpRequest 的原因。 这是IE浏览器的ActiveX对象 XMLHTTP的前身。 随后Mozilla，Safari和其他浏览器也都实现了类似的方法，被称为 XMLHttpRequest 。同时，微软也实现了XMLHttpRequest方法。

+ +
// Old compatibility code, no longer needed.
+if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
+    httpRequest = new XMLHttpRequest();
+} else if (window.ActiveXObject) { // IE 6 and older
+    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
+}
+
+ +
Note: 上面代码只是简单版的如何创建一个XMLHttp实例。更实际的例子，请看本篇文章的step 3。
+ +

发送一个请求后，你会收到响应。在这一阶段，你要告诉XMLHttp请求对象是由哪一个JavaScript函数处理响应，在设置了对象的 onreadystatechange 属性后给他命名，当请求状态改变时调用函数。

+ +
httpRequest.onreadystatechange = nameOfTheFunction;
+ +

要注意的是，函数名后没有参数，因为你把一个引用赋值给了函数，而不是真正的调用了它。 此外，如果不使用函数名的方式，你还可以用JavaScript的匿名函数响应处理的动作，就像下面这样：

+ +
httpRequest.onreadystatechange = function(){
+    // Process the server response here.
+};
+
+ +

接下来，声明当你接到响应后要做什么，你要发送一个实际的请求，通过调用HTTP请求对象的 open() 和 send() 方法，像下面这样:

+ +
httpRequest.open('GET', 'http://www.example.org/some.file', true);
+httpRequest.send();
+
+ + + +

send() 方法的参数可以是任何你想发送给服务器的内容，如果是 POST 请求的话。发送表单数据时应该用服务器可以解析的格式，像查询语句：

+ +
"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"
+ +

或者其他格式, 类似 multipart/form-data，JSON，XML等。

+ +

如果你使用 POST 数据，那就需要设置请求的MIME类型。比如，在调用 send() 方法获取表单数据前要有下面这个：

+ +
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+ +

Step 2 – 处理服务器响应

+ +

在发送请求时，你提供的JavaScript函数名负责处理响应：

+ +
httpRequest.onreadystatechange = nameOfTheFunction;
+
+ +

这个函数应该做什么？首先，函数要检查请求的状态。如果状态的值是 XMLHttpRequest.DONE （对应的值是4），意味着服务器响应收到了并且是没问题的，然后就可以继续执行。

+ +
if (httpRequest.readyState === XMLHttpRequest.DONE) {
+    // Everything is good, the response was received.
+} else {
+    // Not ready yet.
+}
+
+ +

全部readyState状态值都在 XMLHTTPRequest.readyState，如下也是：

+ + + +

(Source)

+ +

接下来，点击HTTP响应的 response code。 可能的响应码都已经列在 W3C这个列表里。在下面的例子中，我们通过检查响应码 200 OK 判断AJAX有没有成功。

+ +
if (httpRequest.status === 200) {
+    // Perfect!
+} else {
+    // There was a problem with the request.
+    // For example, the response may have a 404 (Not Found)
+    // or 500 (Internal Server Error) response code.
+}
+ +

在检查完请求状态和HTTP响应码后， 你就可以用服务器返回的数据做任何你想做的了。你有两个方法去访问这些数据：

+ + + +

注意上面这一步只在你发起异步请求时有效（即 open() 的第三个参数未特别指定或设为 true）。如果你你发起的是同步请求则不必使用函数，但是非常不推荐这样子做，它的用户体验很糟糕。

+ +

Step 3 – 一个简单的例子

+ +

让我们把所有的知识都集中起来做一个简单的HTTP请求。这个JavaScript会请求一个HTML文档 test.html，包含 "I'm a  test" 内容。然后我们 alert() 响应的内容。注意这个例子我们只是用了JavaScript，没有用jQuery。而且，HTML，XML和PHP文件都要放在用一个目录下。

+ +
<button id="ajaxButton" type="button">Make a request</button>
+
+<script>
+(function() {
+  var httpRequest;
+  document.getElementById("ajaxButton").addEventListener('click', makeRequest);
+
+  function makeRequest() {
+    httpRequest = new XMLHttpRequest();
+
+    if (!httpRequest) {
+      alert('Giving up :( Cannot create an XMLHTTP instance');
+      return false;
+    }
+    httpRequest.onreadystatechange = alertContents;
+    httpRequest.open('GET', 'test.html');
+    httpRequest.send();
+  }
+
+  function alertContents() {
+    if (httpRequest.readyState === XMLHttpRequest.DONE) {
+      if (httpRequest.status === 200) {
+        alert(httpRequest.responseText);
+      } else {
+        alert('There was a problem with the request.');
+      }
+    }
+  }
+})();
+</script>
+
+ +

在这个例子中：

+ + + +
Note: 如果你向一个代码片段发送请求，将返回XML，而不是静态XML文件，在IE浏览器上则必须要设置响应头才能正常工作。如果不设置响应头为 Content-Type:application/xml ，IE浏览器会在你访问XML元素时抛出 “Object Expected” 错误。
+ +
Note 2: 如果不设置响应头 Cache-Control: no-cache 浏览器将会把响应缓存下来而且再也无法重新提交请求。你也可以添加一个总是不同的 GET 参数，比如时间戳或者随机数 (详情见 bypassing the cache)
+ +
Note 3: 如果变量 httpRequest 在全局范围内使用，它会在 makeRequest() 函数中被相互覆盖，从而导致资源竞争。为了避免这个情况，请在包含 AJAX 函数的闭包中声明 httpRequest 变量。
+ +

在通信错误的事件中（例如服务器宕机），在访问响应状态 onreadystatechange 方法中会抛出一个例外。为了缓和这种情况，则可以使用 try...catch 把 if...then 语句包裹起来。

+ +
function alertContents() {
+  try {
+    if (httpRequest.readyState === XMLHttpRequest.DONE) {
+      if (httpRequest.status === 200) {
+        alert(httpRequest.responseText);
+      } else {
+        alert('There was a problem with the request.');
+      }
+    }
+  }
+  catch( e ) {
+    alert('Caught Exception: ' + e.description);
+  }
+}
+
+ +

Step 4 – 处理 XML 响应

+ +

在上一个例子中，在收到HTTP请求的响应后我们会请求对象的 responseText 属性，包含 test.html 文件的内容。现在我们试试 responseXML 属性。 

+ +

首先，我们创建一个稍后将要请求的有效的 XML 文档。文档（test.html）包含以下内容：

+ +
<?xml version="1.0" ?>
+<root>
+    I'm a test.
+</root>
+
+ +

在脚本里我们只需要把请求行改为：

+ +
...
+onclick="makeRequest('test.xml')">
+...
+
+ +

然后在 alertContents() 里，我们把 alert(httpRequest.responseText) 改为：

+ +
var xmldoc = httpRequest.responseXML;
+var root_node = xmldoc.getElementsByTagName('root').item(0);
+alert(root_node.firstChild.data);
+
+ +

这部分代码采用 responseXML 提供的 XMLDocument 对象，并使用 DOM 方法访问 XML 文档中包含的一些数据。你可以在这里查看 test.xml 并且在这里更新测试代码。

+ +

Step 5 – 处理数据

+ +

最后，我们发送一个数据给服务器并收到响应。这次我们用 JavaScript 请求动态页面，test.php  并返回一个计算后的字符串 - “Hello, [user date]”，并用 alert() 出来。

+ +

首先要添加一个文本到 HTML 中以方便用户输入名字：

+ +
<label>Your name:
+  <input type="text" id="ajaxTextbox" />
+</label>
+<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
+  Make a request
+</span>
+
+ +

还要添加事件处理程序，从表单中获取用户数据连同服务器端的UTL一并发送给 makeRequest()  函数：

+ +
  document.getElementById("ajaxButton").onclick = function() {
+      var userName = document.getElementById("ajaxTextbox").value;
+      makeRequest('test.php',userName);
+  };
+
+ +

我们还要修改 makeRequest() 让它接受用户数据并将其发给服务器。把请求方法从 GET 改为 POST，把数据作为参数让 httpRequest.send() 调用。

+ +
  function makeRequest(url, userName) {
+
+    ...
+
+    httpRequest.onreadystatechange = alertContents;
+    httpRequest.open('POST', url);
+    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+    httpRequest.send('userName=' + encodeURIComponent(userName));
+  }
+
+ +

如果这就是服务器返回的全部内容，alertContents() 函数可以使用 step 3 中的相同函数写。可是，服务器会返回计算后的内容和原内容。所以，如果用户输入 “Jane” 在输入框中，那服务器就会返回如下内容：

+ +

{"userData":"Jane","computedString":"Hi, Jane!"}

+ +

为了在 alertContents() 中使用这个数据，我们可不能只是alert responseText ，我们要解析它并 alert conputedString，我们想要的属性：

+ +
function alertContents() {
+  if (httpRequest.readyState === XMLHttpRequest.DONE) {
+    if (httpRequest.status === 200) {
+      var response = JSON.parse(httpRequest.responseText);
+      alert(response.computedString);
+    } else {
+      alert('There was a problem with the request.');
+    }
+  }
+}
+
+ +

test.php 文件应该包含以下内容：

+ +
$name = (isset($_POST['userName'])) ? $_POST['userName'] : 'no name';
+$computedString = "Hi, " . $name;
+$array = ['userName' => $name, 'computedString' => $computedString];
+echo json_encode($array);
+ +

想获取更多 DOM 方法，可以查看 Mozilla's DOM implementation 文档.

diff --git a/files/zh-cn/web/guide/ajax/index.html b/files/zh-cn/web/guide/ajax/index.html new file mode 100644 index 0000000000..875ee9c9d6 --- /dev/null +++ b/files/zh-cn/web/guide/ajax/index.html @@ -0,0 +1,93 @@ +--- +title: Ajax +slug: Web/Guide/AJAX +translation_of: Web/Guide/AJAX +--- +
新手入门
+ Ajax简介
+ +
+

Asynchronous JavaScript + XML（异步JavaScript和XML）, 其本身不是一种新技术，而是一个在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML,  CSS, JavaScript, DOM, XML, XSLT, 以及最重要的 {{domxref("XMLHttpRequest")}}。当使用结合了这些技术的AJAX模型以后， 网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。

+ +

尽管X在Ajax中代表XML, 但由于{{glossary("JSON")}}的许多优势，比如更加轻量以及作为Javascript的一部分，目前JSON的使用比XML更加普遍。JSON和XML都被用于在Ajax模型中打包信息。

+
+ +
+
+

文档

+ +
+
新手入门
+
本文将为您引导完成ajax基础知识，并为您提供两个简单的实际操作示例。
+
使用XMLHttpRequest API
+
{{domxref("XMLHttpRequest")}} API是Ajax的核心。本文将解释如何使用一些Ajax技术，比如： + +
+
Fetch API
+
Fetch API 提供一个获取资源的接口。对于用过 {{domxref("XMLHTTPRequest")}} 的人来说会觉得很熟悉，但这个API提供了更加强大且灵活的特性。
+
Server-sent 事件
+
在过去，一个网页必须发送请求到服务器来获取新的数据，也就是说，网页必须主动向服务器请求数据。有了server-sent events之后，服务器可以向网页推送消息，使得服务器可以随时向网页传送数据。这些发送过来的消息可以看作是带有数据的事件。参见: Using server-sent events.
+
纯 Ajax 导航示例 
+
本文提供了一个仅由三个页面组成的纯Ajax网站的（简易）工作示例。
+
发送和接收二进制数据
+
可以设置 XMLHttpRequest 对象的 responseType 属性以改变从服务器端获取数据的类型。可接受的值为空字符串（默认）、arraybuffer、blob、document、json 以 及 text。 response 属性性根据 responseType 的值成为对应的数据对象，如 ArrayBuffer，Blob、 Document、 JSON 或者 string 。本文会展示一些Ajax I/O技术。
+
XML
+
The Extensible Markup Language (XML) 可扩展标记语言是W3C推荐的一种专用于创建专用标记语言的通用标记语言 。它是SGML的简化子集，能够描述许多不同类型的数据。其主要目的是促进在不同的系统，尤其是通过互联网连接的系统间的数据共享。
+
解析和序列化 XML
+
如何从字符串，文件或者Javascript中解析XML文档，以及如何将XML文档序列转化为字符串，Javascript对象树 (JSON)或者文件 。
+
XPath
+
XPath 代表XML Path Language,它使用非XML 语法，提供了一种灵活的方式来寻址（指向）XML文档的不同部分。除此之外，它还可以用于测试文档中的寻址节点，以确定他们是否匹配模式。
+
{{domxref("FileReader")}} API
+
 FileReader API允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓存）的内容，使用 {{domxref("File")}} 或 {{domxref("Blob")}} 对象指定要读取的文件或数据。文件对象可以从用户选择文件后的 {{HTMLElement("input")}} 元素的 {{domxref("FileList")}} 对象中获取，也可以从拖放操作的 {{domxref("DataTransfer")}} 对象获取，或者从{{domxref("HTMLCanvasElement")}} 的mozGetAsFile() API获取。
+
XMLHttpRequest对HTML的支持 
+
W3C XMLHttpRequest规范向XMLHttpRequest添加了HTML解析支持，XMLHttpRequest原本只支持XML解析。此功能允许Web应用程序使用XMLHttpRequest获取HTML资源作为解析的DOM。
+
+ +

View All...

+ +

参见

+ +
+
Ajax: A New Approach to Web Applications
+
Jesse James Garrett在2005年2月写了这篇文章 adaptive path，介绍了Ajax及其相关概念。
+
XMLHttpRequest Specification
+
WHATWG 现行标准
+
+
+ +
+

工具

+ + + +

View All...

+ +

例子

+ + + + + +

HTML, XHTML, CSS, DOM, JavaScript, XML, XMLHttpRequest, XSLT, DHTML, Same Origin Policy

+
+
-- cgit v1.2.3-54-g00ecf