Eine kurze Geschichte und grundlegende Verwendung von Ajax

Dieses Mal werde ich Ihnen einen kurzen Überblick über die Geschichte und die grundlegende Verwendung von Ajax geben. Was sind die Vorsichtsmaßnahmen , um die kurze Geschichte und Verwendung von Ajax zu verstehen?

JavaScript hat sich in den letzten Jahren von einer Nebensache zur wichtigsten Sprache im Web entwickelt. Wenn es einen Faktor gibt, der zu bedeutenden Fortschritten in dieser Technologie geführt hat, dann ist es das Aufkommen der Ajax-basierten Anwendungsentwicklung.

Technologie zu diesem Thema entwickeln

Kurz gesagt ist Ajax eine Technologie zur Entwicklung einer Website oder Anwendung, die eine Echtzeit-Datenaktualisierungsschnittstelle verwendet ohne Seitenaktualisierung. Diese Funktion sorgt für ein reibungsloseres und Desktop-ähnlicheres Benutzererlebnis.

Eine kurze Geschichte von Ajax

Die Geschichte von Ajax ähnelt der vieler anderer Erfolge über Nacht. Auch wenn Ajax wie aus dem Nichts aufgetaucht zu sein scheint, gibt es ihn tatsächlich schon seit langer Zeit. Jahrelange Bemühungen haben es im gesamten Web geschafft, Tools und Muster unter dem Ajax-Banner zu erstellen. Während der DHTML-Tage der ursprünglichen Dotcom-Blase und der dunklen Zeiten nach den Dotcom-Pleiten erschlossen Entwickler auf der ganzen Welt die Superkräfte von JavaScript und brachten dieses neue und aufregende Anwendungsparadigma ins Web.

XMLHttpRequest

Das früheste und wichtigste Ajax-Puzzle ist die XMLHttpRequest (XHR) API. XHR ist eine JavaScript-API zur Übertragung von Datennachrichten zwischen Webbrowsern und Webservern. Es unterstützt Browser, die HTTP POST (Daten an den Server übertragen) oder GET-Anfragen (Zugriff auf Daten vom Backend-Server) verwenden. Diese API ist das Herzstück der meisten Ajax-Interaktionen und eine wesentliche Technologie in der modernen Webentwicklung.

Es ist auch das beste Geschenk, das das Microsoft® Internet Explorer®-Team dem Internet gemacht hat.

Es ist wahr. XHR erschien erstmals im Jahr 2000 in IE 5. XHR war ursprünglich ein von Alex Hopmann geschriebenes Microsoft® ActiveX®-Steuerelement. Es wurde für die Zusammenarbeit mit Microsoft Outlook® Web Access entwickelt und sollte Interaktionen zwischen (damals) übergeordneten Front-End-Schnittstellen und Microsoft Exchange Server ermöglichen.

Obwohl das Paket von Microsoft nicht gerade „bescheiden“ war, entwickelte sich XHR weit über den Rahmen des ursprünglichen Produkts hinaus und wurde später in allen gängigen Browsern implementiert und sogar als W3C-Standard übernommen.

Pioniere

Neben Microsoft gibt es mehrere andere Unternehmen, die begonnen haben, in den Bereich des Ajax-Prototyps einzusteigen. Viele Unternehmen experimentieren mit diesen Technologien, aber zwei verdienen besondere Erwähnung – die eine, weil sie eine interessante und oft zitierte Fußnote zur Ajax-Entwicklung darstellt, und die andere, weil es der Internetgigant war, der diese Technologien wirklich demokratisiert hat.

Oddpost

Oddpost ist ein fortschrittlicher webbasierter E-Mail-Client, der 2002 eingeführt wurde. Es nutzt viele derzeit bekannte Muster. Was Design und Interaktion angeht, fallen einem Desktop-Mail-Clients ein. Intern verwendet Oddpost ein Konzept, das die Entwickler DataPacks nennen, um kleine Datenblöcke vom Server an den Browser zu übertragen. Dies wird eine neue Erfahrung bringen.

Oddpost wurde schließlich durch Yahoo! ersetzt. Erworben, um die Grundlage für eine überarbeitete Version von Yahoo! Mail zu bilden.

Google Maps, Google Suggest, Gmail und ein wichtiger Artikel

Der eigentliche Wandel begann ein paar Jahre später mit Gmail, Google Suggest und Google Kartendienst. Der Einsatz dieser drei Ajax-Technologien sorgt für Aufsehen in der Welt der Webentwicklung. Seine Reaktionsfähigkeit und Interaktivität sind für die Öffentlichkeit neu. Die neue Google-App sorgt schnell für Aufsehen.

Obwohl nicht viele Leute davon wissen, war die Reaktion der Webentwickler-Community riesig. Damals wussten die Leute, dass es in der Entwicklung von Webanwendungen etwas Neues und Aufregendes gab. Doch dieser „Inhalt“ war lange Zeit unklar.

Was die Menschen brauchen, ist ein Artikel, der dies deutlich macht.

Am 18. Februar 2005 schrieb Jesse James Garrett, Mitbegründer und Präsident von Adaptive Path, einen Artikel mit dem Titel „Ajax: Ein neuer Ansatz für Webanwendungen“. In diesem Artikel beschreibt er Trends im Design und der Entwicklung von Webanwendungen wie Gmail und Google Maps, die ständig genutzt werden. Er nennt den Trend „potenziell grundlegende Veränderungen in der Webentwicklung“.

Er gab diesem Muster auch einen Namen, was ein wichtiger Moment war, da sich die Menschen von diesem Moment an auf diesen neuen Trend konzentrierten und jeder (auch Nicht-Experten), der über die neuesten Veränderungen in der Welt der Webentwicklung sprach, alle erwähnen wird Es. In diesem Artikel stellt er die Technologie von Ajax folgendermaßen vor:

Definition von Ajax

Ajax ist keine Technologie. Tatsächlich handelt es sich um mehrere Technologien, jede mit ihren eigenen Eigenschaften, die auf neue und leistungsstarke Weise zusammenkommen. Ajax umfasst:

1. Standardbasiertes Rendering mit XHTML und CSS

2. Dynamische Anzeige und Interaktion mithilfe des Document Object Model

3. Datenaustausch und -manipulation unter Verwendung von XML und JavaScript zusammen

4. Obwohl diese technische Beschreibung etwas veraltet ist, ist das Grundmuster immer noch intakt: HTML und CSS rendern Daten und Stile, DOM und zugehörige Methoden unterstützen Seitenaktualisierungen in Echtzeit, XHR unterstützt die Kommunikation mit dem Server und JavaScript organisiert die Gesamtanzeige.

Die Gesamtwirkung dieses Artikels ist relativ groß. Es kommt selten vor, dass intensiver Hype mit ungenutzter Kreativität und Energie kollidiert und eine Revolution auslöst. Da Ajax von einer neuen Generation von Startups auf der ganzen Welt übernommen wird, rückt es schnell an die Spitze des Webentwicklungsparadigmas. Ajax hat sich von einem vagen Trend zur Suche nach Marketingstrategien zu einem entscheidenden Bestandteil in der Entwicklung modernen Webdesigns entwickelt.
Bibliotheken

Ein wesentlicher Treiber der Ajax-basierten Entwicklung ist die Weiterentwicklung und Verbesserung mehrerer voll ausgestatteter JavaScript-Bibliotheken. Abgesehen von erfahrenen JavaScript-Entwicklern verstehen nur wenige Menschen wirklich die zugrunde liegende Technologie von Ajax. Selbst zu Zeiten von DHTML waren die meisten Browser-Interaktionen und Animationen zwar so konzipiert, dass sie mit geringfügigen Überschreitungen umgehen konnten, doch die Nachfrage und das Talent für Ajax-basierte Websites (die von Grund auf neu geschrieben werden konnten) waren durch die begrenzte Anzahl erfahrener JavaScript-Ingenieure begrenzt . Eine solche Schnittstelle vergrößert die Kluft zwischen den Angeboten weiter. Bibliotheken wie Prototype, Dojo und jQuery tragen dazu bei, diese Lücke in großem Maßstab zu schließen, indem sie gebrauchsfertige Interaktionen und Animationen bereitstellen, Unterschiede zwischen Browsern reduzieren und die Implementierung der wichtigsten Mängel der JavaScript-API verbessern.

Asynchrones JavaScript und mehr JavaScript (Objektnotation)

Die größte Veränderung im Bereich Ajax von der ursprünglichen Post-Ära bis zur Neuzeit ist Mit der Einführung von JSON ist JSON eine JavaScript-basierte Datenübertragung. JSON bietet kleinere Dateigrößen und einfacheren nativen JavaScript-Zugriff (im Gegensatz zu den umständlichen DOM-basierten Methoden und Eigenschaften, die XML verwendet) und wurde schnell von Entwicklern für die Datenübertragung übernommen. JSON ist jetzt in der kürzlich fertiggestellten Version 5 der ECMAScript-Spezifikation enthalten.

JSON+Padding

Eine bemerkenswerte Verbesserung des ursprünglichen JSON-Vorschlags ist JSON+Padding (JSONP). Wie Sie sehen, verfügt das XMLHttpRequest-Objekt über ein strenges Sicherheitsmodell und unterstützt nur die Kommunikation unter Verwendung desselben Domänennamens und Protokolls wie die angeforderte Seite. JSONP schafft einen flexibleren Ansatz für diese ursprungsübergreifende Einschränkung, indem es die JSON-Antwort in eine benutzerdefinierte oder vom System bereitgestellte

Rückruffunktion

einschließt. Diese Methode ermöglicht den sofortigen Datenzugriff nach dem Hinzufügen des JSON-Skripts zum Dokument. Dieses Muster ist mittlerweile weit verbreitet und kann bei vielen größeren Webdiensten übernommen werden, um Mashups und andere Content-Syndizierungen zu unterstützen. Trotz seiner Beliebtheit weist JSONP eine offensichtliche Schwachstelle auf, die leicht von bösartigem Code ausgenutzt werden kann. Da die Skript-Tag-Injektion von einem Dritten die Ausführung sämtlicher Inhalte auf der Hostseite ermöglicht, besteht die Möglichkeit einer böswilligen Kompromittierung, wenn der Datenanbieter kompromittiert wird oder die Hostseite die in die Seite eingefügten Ressourcen nicht kennt. Da Sie nun ein wenig über die Geschichte von Ajax wissen, beginnen wir mit der Erkundung der Techniken, die die Magie Wirklichkeit werden lassen. Obwohl allgemeine JavaScript-API-Bücher in Bibliotheken weit verbreitet sind, ist das Verständnis der zugrunde liegenden Funktionsweise selbst für erfahrene Entwickler immer noch lehrreich.

XMLHttpRequest API und Funktionen

Obwohl andere Techniken verwendet werden können, um Daten vom Server zurückzugeben, bleibt XHR das Herzstück der meisten Ajax-Interaktionen . XHR-Interaktionen bestehen aus zwei Teilen: Anfragen und Antworten. Im Folgenden stellen wir sie einzeln vor.

Sicherheitsmodell

Wie oben erwähnt, verfügt das ursprüngliche XMLHttpRequest-Objekt über ein strenges Sicherheitsmodell. Diese Same-Origin-Richtlinie erlaubt nur die Kommunikation über denselben Host, dasselbe Protokoll und denselben Port wie die angeforderte Seite. Das bedeutet unterschiedliche Domänen (example.com und example2.com), unterschiedliche Hosts (my.example.com und www.example.com), unterschiedliche Protokolle (http://example.com und https://example.com) Kommunikation between ist verboten, was zu Fehlermeldungen führt.

Mit der Entwicklung der zweiten Version des XHR-Objekts wird die Arbeit am neuen domänenübergreifenden Anforderungsprotokoll im W3C abgeschlossen. Ein großer Teil der Implementierungsarbeit wird von Browser-Anbietern abgeschlossen. Domain-Anfragen sind derzeit nur in Internet Explorer 8+, Mozilla Firefox 3.5+, Apple Safari 4+ und Google Chrome verfügbar. Obwohl sich die Entwicklung verlangsamt hat, wird in der Anfrage immer noch ein bestimmter „Origin“-Header gesendet:

Origin: http://example.com

und der Server ist so konfiguriert, dass er einen passenden „Access-Control-Allow“ zurücksendet -Origin“-Header:

Access-Control-Allow-Origin: :http://example.com

Es ist jetzt möglich, XHR-Objekte für die bidirektionale Kommunikation über Domänen hinweg zu verwenden.

Anfrage

Die Anfrageseite verfügt über 4 Methoden:

1. open() initiiert einen Server Verbindung . Kann Parameter annehmen:

1. Methode. Die zu verwendende HTTP-Methode (kann POST oder GET sein)

2. URL. Angeforderte URL

3. asynchron. Optionaler boolescher Parameter, der angibt, ob die Anfrage asynchron ist (der Standardwert dieses Parameters ist True)

4. Benutzer. Ein optionaler Benutzername zur Authentifizierung

5. Passwort. Ein optionales Passwort zur Authentifizierung

2. setRequestHeader() legt den Anforderungsheader mit zwei Parametern fest: dem Header und seinen zugehörigen Werten

3. send() sendet eine Anfrage. Diese Methode benötigt einen optionalen Parameter, der den Hauptteil der POST-Anfrage enthält

4. abort() bricht die Anfrage ab

Antwort Die

-Antwort hat auch mehrere Eigenschaften und Methoden :

1. Status. Der Standard-HTTP-Status der Anfrage (z. B. gibt eine erfolgreiche Anfrage 200 zurück)

2. statusText. Enthält die vollständige vom Webserver zurückgegebene Antwortzeichenfolge, einschließlich des Antworttexts (z. B. 304 Not Modified)

3. getResponseHeader(). Gibt einen bestimmten Header-Inhalt zurück; der Name des Anforderungs-Headers ist sein einziger Parameter

4. getAllResponseHeaders(). Gibt den Text aller Antwortheader

5. responseText zurück. Die Zeichenfolgendarstellung des Antworttextes

6. responseXML. XML-Darstellung des Antworttextes, ein Dokumentfragment

readyState

instanziiert Nach Abschluss hat das XMLHttpRequest-Objekt 5 Zustände, dargestellt durch die folgenden Werte:

• 0: UNSENT. Zeigt an, dass das Objekt erstellt wurde

• 1: GEÖFFNET. Zeigt an, dass die open()-Methode erfolgreich aufgerufen wurde

• 2: HEADERS_RECEIVED. Zeigt an, dass Header der Anfrage empfangen wurden

• 3: LOADING. Zeigt an, dass der Antwortheader heruntergeladen wurde

• 4: FERTIG. Zeigt an, dass die Anfrage abgeschlossen ist, gibt aber nicht an, ob die Anfrage erfolgreich war oder erwartete Werte zurückgibt (fragen Sie die Antwort und Standard-HTTP-Header ab, um den Zustand der Anfrage zu beurteilen)

Ein generisches JavaScript-Beispiel

Bevor wir weiter auf beliebte Bibliotheken eingehen, schauen wir uns ein paar rohe JavaScript-Beispiele an, um die Kerntechnologie in Aktion zu verstehen.

Beispiel-HTML-Dokument

<!doctype html>
<html lang="en"> 
<head>
 <meta charset="utf-8">
 <title>Simple Ajax Example</title>
 <meta name="author" content="Rob Larsen">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="_assets/css/style.css" rel="external nofollow" >
</head>
<body>
 <p id="main">
  <h1>Simple Ajax Example</h1>
  <p><strong id="activate">Click here</strong> 
   and content will be appended after this paragraph</p>
 </p>
 <script src="_assets/js/ajax.js"></script>
</body>
</html>

Das folgende Beispiel veranschaulicht eine einfache GET-Anfrage, die ResponseXML verarbeitet. Dies ist eine typische Ajax-Interaktion aus den Anfängen der Technologie. Es funktioniert in allen modernen Browsern sowie Internet Explorer 7 und 8.

Eine grundlegende Ajax-Funktion

/*
Here's a basic Ajax function
*/
var ajax = function( opts ) {
/*
We have an options argument. 
In addition, we want to have some smart defaults.
*/
 opts = {
  //Is it a Get or Post
  type: opts.type || "POST",
  //What URL are we going to hit?
  url: opts.url || "",
  //What do we do with the data
  onSuccess: opts.onSuccess || function(){},
  //what kind of data do we expect?
  data: opts.data || "xml"
 };
//create a new XMLHttpRequest 
 var xhr = new XMLHttpRequest();
//Open the connection to the server 
 xhr.open(opts.type, opts.url, true);
/*
When the ready state changes
fire this function
*/
 xhr.onreadystatechange = function(){
 //readyState 4 is "done" 
 if ( xhr.readyState == 4 ) {
 /*
 do some simple data processing
 There are two components to the returned object-
 responseXML and responseText. 
 Depending on what we're doing we'll need one or the other.
 */
 switch (opts.data){
  case "json":
   //json is text
   opts.onSuccess(xhr.responseText);
   break;
  case "xml":
   //XML retains the structure/DOM 
   //It's passed in whole. 
   opts.onSuccess(xhr.responseXML);
   break;
  default : 
   //Everything else will get TXT
   opts.onSuccess(xhr.responseText);;
  }   
 }
 };
 //close the connection
 xhr.send(null);
}
//here's our simple function
var ajaxSample = function(e){
//Simple callback adds some text to the page 
 var callback = function( data ) {
 document.getElementById("main").innerHTML += 
  "<p>"
  +data.getElementsByTagName("data")[0].getAttribute("value")
  +"</p>";
}
//And here's our Ajax call 
 ajax({
  type: "GET",
  url: "_assets/data/ajax-1.xml",
  onSuccess: callback,
  data : "xml"
 })
//prevent the default action 
 e.preventDefault();
}
//Wire everything up
document.getElementById("activate").addEventListener("click", ajaxSample, false);

在下面的例子 中可以看到活动的原始 ActiveX 对象。如果没有本机实现，可以在不同版本的 Internet Explorer 中使用 Try... Catch 块来循环遍历对象的潜在引用。这个完整的跨浏览器实现与 Internet Explorer 是兼容的，甚至可以与古老的 Internet Explorer 5 兼容。

 一个跨浏览器 Ajax 脚本

var ajax = function( opts ) {
 opts = {
 type: opts.type || "POST",
 url: opts.url || "",
 onSuccess: opts.onSuccess || function(){},
 data: opts.data || "xml"
 };
/*
Support for the original ActiveX object in older versions of Internet Explorer
This works all the way back to IE5.
*/
 if ( typeof XMLHttpRequest == "undefined" ) {
 XMLHttpRequest = function () {
  try { 
   return new ActiveXObject("Msxml2.XMLHTTP.6.0"); 
  }
  catch (e) {}
  try { 
   return new ActiveXObject("Msxml2.XMLHTTP.3.0"); 
  }
  catch (e) {}
  try { 
   return new ActiveXObject("Msxml2.XMLHTTP"); 
  }
  catch (e) {}
  throw new Error("No XMLHttpRequest.");
 };
 }
 var xhr = new XMLHttpRequest();
 xhr.open(opts.type, opts.url, true);
 xhr.onreadystatechange = function(){
 if ( xhr.readyState == 4 ) {
  switch (opts.data){
  case "json":
   opts.onSuccess(xhr.responseText);
   break;
  case "xml":
   opts.onSuccess(xhr.responseXML);
   break;
  default : 
   opts.onSuccess(xhr.responseText);;
  }   
 }
 };
 xhr.send(null);
}
var ajaxSample = function(e){
 var callback = function( data ) {
 document.getElementById("main").innerHTML += "<p>"
  +data.getElementsByTagName("data")[0].getAttribute("value")
  +"</p>";
 }
 ajax({
 type: "GET",
 url: "_assets/data/ajax-1.xml",
 onSuccess: callback,
 data: "xml"
 })
 e.preventDefault();
}
document.getElementById("activate").addEventListener("click", ajaxSample, false);

下面展示了现今更为常见的模式：采用 JSON 格式的 responseText，并将其解析成本机的 JavaScript 对象。这段代码演示了一个较为简单的 JSON 数据处理方法。为什么众多开发人员都选择使用 JSON 来传输数据，将该清单与操作 XML 数据所需的偶尔间接且冗长的方法进行比较，答案显而易见。

使用 JSON

var ajax = function( opts ) {
 opts = {
 type: opts.type || "POST",
 url: opts.url || "",
 onSuccess: opts.onSuccess || function(){},
 data: opts.data || "xml"
 };
 var xhr = new XMLHttpRequest();
 xhr.open(opts.type, opts.url, true);
 xhr.onreadystatechange = function(){
 if ( xhr.readyState == 4 ) {
  switch (opt.sdata){
  case "json":
   opt.onSuccess(xhr.responseText);
   break;
  case "xml":
   opt.onSuccess(xhr.responseXML);
   break;
  default : 
   opt.onSuccess(xhr.responseText);;
  }   
 }
 };
 xhr.send(null);
}
var jsonSample = function(e){
 var callback = function( data ) {
 //here, the data is actually a string
 //we use JSON.parse to turn it into an object
 data = JSON.parse(data);
 /*
 we can then use regular JavaScript object references
 to get at our data. 
 */
 document.getElementById("main").innerHTML += "<p>"
  + data.sample.txt 
  +"</p>";
 }
 ajax({
 type: "GET",
 url: "_assets/data/json-1.json",
 onSuccess: callback,
 data : "json"
 })
 e.preventDefault();
}
document.getElementById("activate").addEventListener("click", jsonSample, false);

下面例子都使用了 JSON 数据。

提供了一个简单的 JSONP 示例。正如您所看到的，通过使用一个回调参数，可以避免将 XHR 完全地简单附加到脚本中。返回给回调，并在可执行 JavaScript 代码中包装数据对象。

JSONP 数据

var callback = function( data ) {
 document.getElementById("main").innerHTML += "<p>"+ data.sample.txt +"</p>";
}
var jsonpSample = function(e){
//create a script element
 var jsonp = document.createElement("script");
//give it a source with the callback name appended in the query string
 jsonp.src= "_assets/data/jsonp.do?callback=callback";
//add it to the doc
 document.body.appendChild(jsonp);
 e.preventDefault();
}
//wire up the event
document.getElementById("activate").addEventListener("click", jsonpSample, false);

库示例

对于大多数开发人员来说，只有进行学术研究的人才会对 Ajax 请求的本质感兴趣。大多数实际工作是在一个或多个 JavaScript 库中完成。除了修补跨浏览器不兼容性，这些库都提供了构建于基础 API 之上的特性。下列示例展示了 3 个流行库中的 GET 和 POST 示例来介绍不同的 API。

jQuery

让我们从流行 jQuery 库开始举例说明。jQuery 的 Ajax 函数最近进行了重写，将几个高级功能包含在内，这不是术语本文的讨论范围，但是所有 jQuery Ajax 请求的常见功能都以传递给该函数的配置对象的参数形式存在。另外还要注意的是，jQuery 有几个便利的方法，比如 $.post 和$.get，这是常见请求配置的快捷键。
展示了使用 jQuery 获取数据的简要代码。

一个 jQuery GET 请求

/*
callback is a simple function that will be run
when the data is returned from the server
*/
var callback = function( data ) {
/* 
it just adds a little bit of text to the document
data is the JSON object returned by the server. 
*/
 $("#main").append($("<p />").text(data.sample.txt));
}
/*
Wire up the ajax call to this click event
*/
$("#activate").click(
 function(){
//call $.ajax with a configuration object 
 $.ajax({
//it's just a get request
  type: 'get',
//we're looking for this URL 
  url: '_assets/data/json-1.json',
//Our cool callback function
  success: callback,
//it's going to be JSON 
  dataType: "json"
 })
 } 
)

下面演示了如何发布和检索简单 JSON 对象。需要注意的是，这里使用了原生 JSON 对象来分析输入数据。jQuery 文档明确提及需要通过 JSON2.js 脚本增加不受支持的浏览器。

提供一个显式错误句柄使得成功请求和失败请求都能得到优雅的处理。jQuery 的错误状态带有 3 个参数，包括 XHR 对象本身，这支持健壮的错误处理。

一个 jQuery POST

/*
this is the object we're going to post
*/
var myMessages = {
 positive : "Today is a good day",
 negative : "Today stinks",
 meh : "meh"
}
var callback = function( data ) {
 $("#main").append($("<p />").text(data.positive));
}
/*
Setting up a simple error handler.
It doesn't do much. 
It's just nice to illustrate error handling.
*/
var errorHandler = function( xhr, textStatus, errorThrown ){
 throw new Error("There was an error. The error status was " + textStatus );
}
/*
Here's where the action happens.
Attach an event to out simple button.
*/
$("#activate").click(
 function(){
//call $.ajax with a configuration object 
  $.ajax({
   //we're sending data to the server  
   type: 'POST',
   //this is our URL
   url: '_assets/data/post-responder.do',
   /*
   This is our data, JSON stringified
   jQuery expects to use native JSON
   or JSON2.js in unsupported browsers
   */
   data: JSON.stringify(myMessages),
   //Here's where we set up our callback function
   success: callback,
   //The data expected from the server
   dataType: "json",
   //And our simple error handler
   error : errorHandler
   }
  )
 }
);

Dojo

Dojo 不仅仅是下列示例中演示的简单 Ajax 请求/DOM 操作。它实际上是为硬核应用程序开发而构建的。这就是说，以这种方式查看 API 仍然是值得期待的。

注意两个独立的 “Ajax” 函数：xhrGet 和 xhrPost。另外还要注意的是，这里使用了 Dojo JSON 实用函数来分析输入数据。下面 展示了一个 GET 示例。

一个 Dojo GET 请求

var callback = function( data ) {
//note the document.getelementById alias
 dojo.byId("main").innerHTML += "<p>"+ data.sample.txt +"</p>";
}
var getData = function(){
//xhrGet is for get requests
dojo.xhrGet({
 //the URL of the request
 url: "_assets/data/json-1.json",
 //Handle the result as JSON data
 handleAs: "json",
 //The success handler
 load: callback
});
}
// Use connect to attach events
dojo.connect( dojo.byId("activate"), "onclick", getData );

下面展示了一个 Dojo POST，包含一个错误句柄的配置。

Dojo POST

var myMessages = {
 positive : "Today is a good day",
 negative : "Today stinks",
 meh : "meh"
}
var callback = function( data ) {
 dojo.byId("main").innerHTML += "<p>"+ data.positive +"</p>";
}
var errorHandler = function(){
 throw new Error("We dun goofed.")
}
var postData = function(){
 //not surprisingly xhrPost is for POST
 dojo.xhrPost({
  // The URL of the request
  url: "_assets/data/post-responder.do",
  //This will be JSON
  handleAs: "json",
  //Set the headers properly
  headers: { "Content-Type": "application/json; charset=uft-8"},
  //Use Dojo's JSON utility
  postData: dojo.toJson(myMessages),
  // The success handler
  load: callback,
  // The error handler
  error: errorHandler
 });
}
// Use connect to attach events
dojo.connect( dojo.byId("activate"), "onclick", postData );

Yahoo! 用户界面 (YUI)

YUI 库提供一个与前面两个略有不同的模式。首先，YUI 返回整个 XHR 对象，不仅解析数据，还允许更准确地操作返回数据和整个请求的可见性。这也意味着开发人员需要了解 XHR 对象的来龙去脉。另外，这里还展示了 YUI 模块加载程序 use() 的使用，需要注意的是，即使与 Ajax 没有直接联系（除了加载 io 模块之外）。中有一个 YUI 模块列表，还有一个用作参数的回调函数。一旦运行，就可以从 Yahoo! Content Delivery Network (CDN) 下载数据包，Yahoo! Content Delivery Network (CDN) 包含单个基于 CDN 的下载包中所需的所有模块。

一个 YUI GET 请求

// Create a new YUI instance and populate it with the required modules.
YUI().use('node','event', 'json', 'io', function (Y) {
 var callback = function( id, xhr ) {
  var data = Y.JSON.parse(xhr.responseText);
  Y.one('#main').append("<p>" 
   + data.sample.txt 
   +"</p>");
 }
 Y.one("#activate").on('click',
  function(){
   Y.io( '_assets/data/json-1.json', {
   //This is actually the default
   method: 'get',
   on:  {success: callback}
   })
  } 
 )
});

下面中的 POST 示例中呈现的一个有趣的样式风格将所有响应函数进一步分割成 on 对象。

YUI POST

YUI().use('node','event', 'json', 'io', function (Y) {
 var myMessages = {
  positive : "Today is a good day",
  negative : "Today stinks",
  meh : "meh"
 } 
 var callback = function( id, xhr ) {
  var data = Y.JSON.parse(xhr.responseText);
  Y.one('#main').append("<p>" 
   + data.positive 
   +"</p>");
 }
 var errorHandler = function( id, xhr){
  throw new Error("There was an error. The error status was " 
   + xhr.statusText 
   +".")
 }
 Y.one("#activate").on('click',
  function(){
   Y.io( '_assets/data/post-responder.do', {
   method: 'post',
   //Use the Y.JSON utility to convert messages to a string
   data : Y.JSON.stringify(myMessages),
   //All response methods are encapsulated in
   //the on object
   on:  {success: callback,
   failure: errorHandler }
   })
  } 
 )
});

正如您所看到的，基本模式在多数清单中都是一样的。除了支持 ActiveX 控件和 JSONP 示例之外，它们基本上基于同一原理，只是在核心 JavaScript 交互的顶层具有不同的 API 变化。

请注意，除了这里列出的基本交互之外，所有这些库还提供大量特性。尽管您可以做的大多数 Ajax 工作可以通过简单的 GET 和 POST 请求来处理，但让自己熟悉所选择的库中的高级特性非常有用。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

用history让ajax支持前进/后退/刷新

使用Ajax时出现乱码怎么解决

Das obige ist der detaillierte Inhalt vonEine kurze Geschichte und grundlegende Verwendung von Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!