Was ist Ajax? Eine ausführliche Einführung in Ajax

Ajax selbst ist keine Technologie, sondern wurde 2005 von Jesse James Garrett entwickelt und als „neue“ Möglichkeit zur Anwendung vieler bestehender Technologien beschrieben, darunter: HTML oder XHTML, Cascading Style Sheets, JavaScript, The Document Objektmodell, XML, XSLT und vor allem das XMLHttpRequest-Objekt.

Durch die Kombination dieser Technologien im Ajax-Modell kann die Web-App die Benutzeroberfläche schnell und schrittweise aktualisieren, anstatt die gesamte Browseroberfläche zu aktualisieren, was die Anwendung schneller und das Benutzererlebnis verbessert.

Obwohl x XML in Ajax darstellt, wird JSON häufiger verwendet, da es leichter ist und Teil von Javascript ist. Sowohl JSON als auch XML im Ajax-Modell werden zum Packen von Dateninformationen verwendet.

Was ist AJAX?

AJAX steht für Asynchronous JavaScript And XML. Kurz gesagt, es verwendet XMLHttpRequestobject, um mit dem Server zu kommunizieren. Es kann auf verschiedene Arten verwendet werden zum Senden und Empfangen von Informationen, einschließlich JSON-, XML-, HTML- und Textdateien. Die attraktivste Funktion von AJAX ist „asynchron“, was bedeutet, dass es mit dem Server kommunizieren und Daten austauschen kann, um die Seite zu aktualisieren, ohne die Seite zu aktualisieren.

Die beiden wichtigsten Hauptfunktionen von Ajax:

• Seite nicht aktualisieren, um Daten anzufordern

• Von: Der Server erhält die Daten

Schritt 1 – So fordern Sie an

Um den Server mit Javascript anzufordern, müssen wir Folgendes tun Instanziieren Sie ein Objekt mit den erforderlichen Funktionen. Hierher kommt XMLHttpRequest. Ursprünglich implementierte Internet Explorer ein ActiveX-Objekt namens XMLHTTP. Seitdem haben Mozilla, Safari und andere Browserhersteller sukzessive das XMLHttpRequest-Objekt implementiert, um diese Methode und ActiveX-Objektfunktionen ähnlich denen von Microsoft zu unterstützen. Gleichzeitig implementierte Microsoft auch XMLHttpRequest.

// Alter Kompatibilitätscode, nicht mehr benötigt.

if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ .. .

httpRequest = new XMLHttpRequest();

} else if (window.ActiveXObject) { // IE 6 und älter

httpRequest = new ActiveXObject("Microsoft.XMLHTTP ");

}

Hinweis: Der obige Code dient nur zur Erläuterung und erstellt nur eine Instanz von XMLHttp. Sie können mit Schritt 3 fortfahren, um weitere praktische Beispiele zu sehen.

Nach der Anfrage müssen wir das Ergebnis der Anfrage erhalten. In dieser Phase müssen wir das XMLHttp-Anforderungsobjekt anweisen, die Antwort-JavaScript-Methode zu verarbeiten, indem wir seine onreadystatechangeproperty-Methode wie folgt konfigurieren:

httpRequest.onreadystatechange = nameOfTheFunction;

oder

<code>httpRequest.onreadystatechange = function(){<br>    // Process the server response here.<br>};</code>

, bevor wir erklären, wie es akzeptiert werden soll die Antwort. Danach müssen wir eine Anfrage initiieren, indem wir die Methoden open() und send() des HTTP-Anfrageobjekts wie folgt aufrufen:

<code>httpRequest.open('GET', 'http://www.example.org/some.file', true);<br>httpRequest.send();</code>

• Der erste Parameter von open() ist die HTTP-Anfragemethode – GET, POST, HEAD oder andere vom Server unterstützte Methoden. Methodennamen in Großbuchstaben sind HTTP-Standards, andernfalls stellen einige Browser (z. B. Firefox) die Anfrage möglicherweise nicht aus. Klicken Sie auf W3C-Spezifikationen, um weitere Informationen zu HTTP-Anfragemethoden zu erhalten.

• Der zweite Parameter ist die anzufordernde URL. Aus Sicherheitsgründen können domänenübergreifende URL-Anfragen standardmäßig nicht gestellt werden. Stellen Sie sicher, dass sich alle Seiten unter demselben Domänennamen befinden. Andernfalls erhalten Sie beim Aufruf der open()-Methode die Fehlermeldung „Berechtigung verweigert“. Ein häufiges domänenübergreifendes Problem besteht darin, dass der Domänenname Ihrer Website domain.tld lautet, Sie jedoch versuchen, über www.domain.tld auf die Seite zuzugreifen. Wenn Sie wirklich Cross-Origin-Anfragen stellen möchten, schauen Sie sich die HTTP-Zugriffskontrolle an.

• Der optionale dritte Parameter legt fest, ob die Anfrage synchron oder asynchron ist. Wenn es wahr ist (Standardwert), wird JavaScript weiterhin ausgeführt und der Server gibt Daten zurück, während der Benutzer die Seite betreibt. Das ist AJAX.

Die Parameter der send()-Methode können beliebige Daten (POST) sein, die Sie an den Server senden möchten. Die Formulardaten müssen in einer Form vorliegen, die der Server analysieren kann, z. B. als Abfragezeichenfolge:

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

oder in anderen Formen, z. B. Multipart/Formulardaten, JSON, XML usw.

Beachten Sie, dass Sie möglicherweise den MIME-Typ der Anfrage festlegen möchten, wenn Sie Daten POSTEN möchten. Beispielsweise fügen wir vor dem Aufruf von send() den folgenden Code ein, um die Formulardaten als Abfragedaten zu senden:

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

Schritt 2 – Bei der Verarbeitung der Serverantwort auf die

-Anfrage senden wir haben eine JavaScript-Methode zur Verarbeitung der Antwort bereitgestellt:

httpRequest.onreadystatechange = nameOfTheFunction;

Was macht diese Methode? Zuerst müssen wir den Anfragestatus überprüfen. Wenn der Wert XMLHttpRequest.DONE (4) ist, bedeutet dies, dass alle Serverantworten akzeptiert wurden.

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

Alle möglichen Werte von readyState können unter XMLHTTPRequest.readyState wie folgt angezeigt werden:

• 0 (nicht initialisiert) oder (Anfrage ist nicht initialisiert)

• 1 (Laden) oder (Server stellt Verbindung her)

• 2 (geladen) oder (Anfrage erhalten)

• 3 (interaktiv) oder (Anfrage ausführen)

• 4 (vollständig) oder (Anfrage abgeschlossen und Antwort ist fertigAnfrage abgeschlossene Antwort vorhanden)

• Value	State	Description
  0	UNSENT	Client has been created. open() not called yet.
  1	OPENED	open() has been called.
  2	HEADERS_RECEIVED	send() has been called, and headers and status are available.
  3	LOADING	Downloading; responseText holds partial data.
  4	DONE	The operation is complete.

(Source)

接下来，检查HTTP响应的 response code 。查看 W3C看到可能的值。下面例子我们用response code是不是等于200来判断ajax请求是否成功。

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

检查完响应值后。我们可以随意处理服务器返回的数据，有两个选择获得这些数据：

• httpRequest.responseText – 返回服务器响应字符串

• httpRequest.responseXML – 返回服务器响应XMLDocument 对象 可以传递给JavaScript DOM 方法

上面的代码只有在异步的情况下有效（open() 的第三个参数设置为true）。如果你用同步请求，就没必要指定一个方法。但是我们不鼓励使用同步请求，因为同步会导致极差的用户体验。

Step 3 – 一个简单的例子

我们把上面的放在一起合成一个简单的HTTP请求。我们的JavaScript 将请求一个HTML 文档， test.html, 包含一个字符串 "I'm a test."然后我们alert()响应内容。这个例子使用普通的JavaScript — 没有引入jQuery， HTML, XML 和 PHP 文件应该放在同一级目录下。

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

在这个例子里：

• 用户点击"Make a request” 按钮；

• 事件调用 makeRequest() 方法；

• 请求发出，然后 (onreadystatechange)执行传递给 alertContents()；

• alertContents() 检查响应是否 OK, 然后 alert() test.html 文件内容。

 

 

注意 1: 如果服务器返回XML，而不是静态XML文件，你必须设置response headers 来兼容i.e.。如果你不设置headerContent-Type: application/xml, IE 将会在你尝试获取 XML 元素之后抛出一个JavaScript "Object Expected" 错误 。

 

 

注意 2: 如果你不设置header Cache-Control: no-cache 浏览器将会缓存响应不再次提交请求，很难debug。你可以添加永远不一样的GET 参数，例如 timestamp 或者 随机数 (查看 bypassing the cache)

 

注意 3: 如果 httpRequest 变量是全局的，混杂调用 makeRequest()会覆盖各自的请求,导致一个竞争的状态。在一个closure 里声明 httpRequest 本地变量 来避免这个问题。

在发生通信错误(如服务器崩溃)、onreadystatechange方法会抛出一个异常,当访问响应状态。为了缓解这个问题,你可以用ry…catch包装你的if...then 语句:

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

Step 4 – 使用 XML 响应

在前面的例子里，在获取到响应之后，我们用request 对象responseText 属性获得 test.html 文件内容。现在让我们尝试获取responseXML 属性。

首先，让我们创建一个有效的XML文档，留着待会我们请求。(test.xml)如下:

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

在这个脚本里，我们只要修改请求行为：

<code>...<br>onclick="makeRequest('test.xml')"><br>...</code>

然后在alertContents()里，我们需要把 alert(httpRequest.responseText); 换为：

<code>var xmldoc = httpRequest.responseXML;<br>var root_node = xmldoc.getElementsByTagName('root').item(0);<br>alert(root_node.firstChild.data);</code>

这里获得了responseXML的XMLDocument，然后用 DOM 方法来获得包含在XML文档里面的内容。你可以在here查看test.xml，在here查看修改后的脚本。

Step 5 – 使用数据返回

最后，让我们来发送一些数据到服务器，然后获得响应。我们的JavaScript这次将会请求一个动态页面，test.php将会获取我们发送的数据然后返回一个计算后的字符串 - "Hello, [user data]!"，然后我们alert()出来。

首先我们加一个文本框到HTML，用户可以输入他们的姓名：

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

我们也给事件处理方法里面加一行获取文本框内容，并把它和服务器端脚本的url一起传递给 makeRequest() 方法：

<code>  document.getElementById("ajaxButton").onclick = function() { <br>      var userName = document.getElementById("ajaxTextbox").value;<br>      makeRequest('test.php',userName); <br>  };</code>

我们需要修改makeRequest()方法来接受用户数据并且传递到服务端。我们将把方法从 GET 改为 POST，把我们的数据包装成参数放到httpRequest.send()：

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

如果服务端只返回一个字符串， alertContents() 方法可以和Step 3 一样。然而，服务端不仅返回计算后的字符串，还返回了原来的用户名。所以如果我们在输入框里面输入 “Jane”，服务端的返回将会像这样：

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

要在alertContents()使用数据，我们不能直接alert responseText, 我们必须转换数据然后 alert computedString属性:

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

test.php 文件如下：

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

查看更多DOM方法, 请查看 Mozilla's DOM implementation 文档。

Das obige ist der detaillierte Inhalt vonWas ist Ajax? Eine ausführliche Einführung in Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!