Un bref historique et l'utilisation de base d'Ajax-js tutoriel-php.cn

Cette fois, je vais vous apporter un bref historique et une utilisation de base d'Ajax. Quelles sont les précautions pour comprendre le bref historique et l'utilisation d'Ajax. Voici des cas pratiques, jetons un coup d'œil.

Au cours des dernières années, JavaScript est passé du statut de réflexion secondaire à celui de langage le plus important du Web. S'il y a un facteur qui a conduit à des progrès significatifs dans cette technologie, c'est bien l'émergence du développement d'applications basées sur Ajax.

Développer une technologie sur ce sujet

En bref, Ajax est une technologie permettant de développer un site Web ou une application qui utilise une interface de mise à jour de données en temps réel sans actualisation de la page. Cette fonctionnalité crée une expérience utilisateur plus fluide et plus semblable à celle d’un ordinateur de bureau.

Une brève histoire de l'Ajax

L'histoire de l'Ajax est similaire à celle de nombreux autres succès du jour au lendemain. Même si l'Ajax semble être sorti de nulle part, il existe en fait depuis longtemps. Des années de travail acharné ont réussi à se répandre sur le Web, créant des outils et des modèles sous la bannière Ajax. Tout au long de l'époque DHTML de la bulle Internet d'origine et des âges sombres qui ont suivi les faillites Internet, les développeurs du monde entier ont libéré les super pouvoirs de JavaScript et ont introduit ce nouveau paradigme d'application passionnant sur le Web.

XMLHttpRequest

Le puzzle Ajax le plus ancien et le plus important est l'API XMLHttpRequest (XHR). XHR est une API JavaScript permettant de transmettre des messages de données entre les navigateurs Web et les serveurs Web. Il prend en charge les navigateurs utilisant les requêtes HTTP POST (transmission de données au serveur) ou GET (accès aux données depuis le serveur backend). Cette API est au cœur de la plupart des interactions Ajax et constitue une technologie essentielle dans le développement Web moderne.

C'est aussi le plus beau cadeau que l'équipe Microsoft® Internet Explorer® ait offert à Internet.

C'est vrai. XHR est apparu pour la première fois dans IE 5 en 2000. À l'origine un contrôle Microsoft ® ActiveX ® écrit par Alex Hopmann, XHR a été créé pour fonctionner avec Microsoft Outlook ® Web Access et était destiné à gérer les interactions entre les interfaces frontales de haut niveau (à l'époque) et Microsoft Exchange Server.

Bien que le package de Microsoft ne soit pas vraiment « humble », XHR a évolué bien au-delà de son produit d'origine, étant implémenté dans tous les principaux navigateurs et même adopté comme norme du W3C.

Pionniers

En plus de Microsoft, plusieurs autres entreprises ont commencé à entrer dans le domaine du prototype Ajax. De nombreuses entreprises expérimentent ces technologies, mais deux en particulier méritent d'être mentionnées : l'une parce qu'il s'agit d'une note de bas de page intéressante et souvent citée dans le développement d'Ajax, et l'autre parce que c'est le géant de l'Internet qui a réellement démocratisé ces technologies.

Oddpost

Oddpost est un client de messagerie Web avancé lancé en 2002. Il utilise de nombreux modèles actuellement familiers. En termes de conception et d'interaction, les clients de messagerie de bureau viennent à l'esprit. En interne, Oddpost utilise un concept que les développeurs appellent DataPacks pour transférer de petits morceaux de données du serveur vers le navigateur. Cela apportera une nouvelle expérience.

Oddpost a finalement été remplacé par Yahoo! Acquis pour devenir la base d'une version révisée de Yahoo!

Google Maps, Google Suggest, Gmail et un article important

Le vrai changement a commencé quelques années plus tard avec Gmail, Google Suggest et Google Service de cartes. L’utilisation de ces trois technologies Ajax fait vibrer le monde du développement Web. Sa réactivité et son interactivité sont nouvelles pour le public. La nouvelle application Google crée rapidement le buzz.

Bien que peu de gens le sachent, la réponse de la communauté du développement Web a été énorme. À l’époque, les gens savaient qu’il y avait quelque chose de nouveau et d’excitant dans le développement d’applications Web. Mais pendant longtemps, ce « contenu » est resté flou.

Ce dont les gens ont besoin, c'est d'un article qui clarifie cela.

Le 18 février 2005, Jesse James Garrett, co-fondateur et président d'Adaptive Path, a écrit un article intitulé « Ajax : une nouvelle approche des applications Web ». Dans cet article, il décrit les tendances en matière de conception et de développement d'applications Web, telles que Gmail et Google Maps, que les gens utilisent en permanence. Il qualifie cette tendance de « déclenchant potentiellement des changements fondamentaux dans le développement Web

».

Il a également donné un nom à ce modèle, ce qui a été un moment important car à partir de ce moment les gens ont commencé à se concentrer sur cette nouvelle tendance et tous (même les non-experts) qui parlaient des derniers changements dans le monde du développement web le mentionneront tous. . Dans cet article, il présente la technologie d'Ajax comme ceci :

Définition d'Ajax

Ajax n'est pas une technologie. Il s'agit en fait de plusieurs technologies, chacune avec ses propres caractéristiques, qui s'assemblent de manière nouvelle et puissante. Ajax comprend :

Rendu basé sur des normes utilisant XHTML et CSS
Affichage et interaction dynamiques à l'aide du modèle d'objet de document
Échange et manipulation de données en utilisant XML et JavaScript ensemble
Bien que cette description technique soit quelque peu obsolète, le modèle de base est toujours intact : les données et les styles de rendu HTML et CSS, DOM et les méthodes associées prennent en charge la mise à jour des pages en temps réel, XHR prend en charge la communication avec le serveur et JavaScript organise l'affichage global.

L'un des principaux moteurs du développement basé sur Ajax est l'évolution et l'amélioration de plusieurs bibliothèques JavaScript complètes. Hormis les développeurs JavaScript expérimentés, peu de personnes comprennent réellement la technologie sous-jacente d’Ajax. Ainsi, même à l'époque du DHTML, alors que la plupart des interactions et des animations des navigateurs étaient conçues pour gérer des excédents insignifiants, la demande et le talent pour les sites basés sur Ajax (qu'ils pouvaient écrire à partir de zéro) étaient limités par le nombre limité d'ingénieurs JavaScript expérimentés. Une telle interface) creuse encore davantage l’écart entre l’offre. Des bibliothèques telles que Prototype, Dojo et jQuery contribuent à combler cette lacune à grande échelle en fournissant des interactions et des animations prêtes à l'emploi, en réduisant les différences entre les navigateurs et en améliorant la mise en œuvre des principales lacunes de l'API JavaScript.

JavaScript asynchrone et plus de JavaScript (notation d'objet)

Le plus grand changement dans le domaine de l'Ajax depuis l'ère post originale jusqu'aux temps modernes est Depuis l'introduction de JSON, JSON est une transmission de données basée sur JavaScript. Offrant des fichiers de plus petite taille et un accès JavaScript natif plus facile (par opposition aux méthodes et propriétés maladroites basées sur DOM utilisées par XML), JSON a été rapidement adopté par les développeurs pour le transfert de données. JSON est désormais inclus dans la version 5 récemment achevée de la spécification ECMAScript.

JSON+Padding

Une amélioration notable de la proposition JSON originale est JSON+Padding (JSONP). Comme vous pouvez le constater, l'objet XMLHttpRequest a un modèle de sécurité strict et prend uniquement en charge la communication utilisant le même nom de domaine et le même protocole que la page demandée. JSONP crée une approche plus flexible de cette limitation d'origine croisée en encapsulant la réponse JSON dans une

fonction de rappel

définie par l'utilisateur ou fournie par le système. Cette méthode fournira un accès instantané aux données après avoir ajouté le script JSON au document. Ce modèle est désormais courant et pour de nombreux services Web plus importants, cette pratique peut être adoptée pour prendre en charge les mashups et autres syndications de contenu. Malgré sa popularité, JSONP présente une vulnérabilité évidente qui peut facilement être exploitée par un code malveillant. Étant donné que l'injection de balises de script provenant d'un tiers permet d'exécuter tout le contenu sur la page hôte, le potentiel de compromission malveillante est imaginable si le fournisseur de données est compromis ou si la page hôte n'a pas connaissance des ressources insérées dans la page. Maintenant que vous connaissez un peu l’histoire de l’Ajax, commençons à explorer les techniques qui font de la magie une réalité. Bien que les livres généraux sur l'API JavaScript soient largement disponibles dans les bibliothèques, comprendre comment le fonctionnement sous-jacent reste instructif, même pour les développeurs expérimentés.

API et fonctionnalités XMLHttpRequest

Bien que d'autres techniques puissent être utilisées pour renvoyer des données depuis le serveur, XHR reste au cœur de la plupart des interactions Ajax . Les interactions XHR se composent de deux parties : les demandes et les réponses. Ci-dessous, nous les présenterons un par un.

Modèle de sécurité

Comme mentionné ci-dessus, l'objet XMLHttpRequest d'origine a un modèle de sécurité strict. Cette politique de même origine autorise uniquement la communication en utilisant le même hôte, le même protocole et le même port que la page demandée. Cela signifie différents domaines (exemple.com et exemple2.com), différents hôtes (mon.exemple.com et www.exemple.com), différents protocoles (http://exemple.com et https://exemple.com) Communication entre eux est interdit, ce qui générera des messages d'erreur.

Avec le développement de la deuxième version de l'objet XHR, le nouveau travail sur le protocole de requête inter-domaines sera achevé au sein du W3C. Une grande partie du travail de mise en œuvre est réalisée par les fournisseurs de navigateurs. les demandes de domaine ne sont actuellement disponibles que dans Internet Explorer 8+, Mozilla Firefox 3.5+, Apple Safari 4+ et Google Chrome. Bien que le développement ait ralenti, un en-tête "Origin" spécifique est toujours envoyé dans la requête :

Origin: http://example.com

et le serveur est configuré pour renvoyer un "Access-Control- Allow" correspondant -En-tête "Origin" :

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

Il est désormais possible d'utiliser des objets XHR pour la communication bidirectionnelle entre domaines.

Request

Le côté requête a 4 méthodes :

open() initie un serveur connexion . Peut prendre des paramètres :

méthode. La méthode HTTP à utiliser (peut être POST ou GET)
url. URL demandée
async. Paramètre booléen optionnel indiquant si la requête est asynchrone (la valeur par défaut de ce paramètre est True)
utilisateur. Un nom d'utilisateur facultatif pour l'authentification
mot de passe. Un mot de passe facultatif pour l'authentification

setRequestHeader() définit l'en-tête de la requête, avec deux paramètres : l'en-tête et ses valeurs associées
send() envoie une requête. Cette méthode prend un paramètre facultatif et contient le corps de la requête POST
abort() abandonne la requête

réponse La réponse

a également plusieurs propriétés et méthodes :

statut. Le statut HTTP standard de la requête (par exemple, une requête réussie renverra 200)
statusText. Inclut la chaîne de réponse complète renvoyée par le serveur Web, y compris le texte de la réponse (par exemple, 304 Not Modified)
getResponseHeader(). Renvoie le contenu de l'en-tête spécifique ; le nom de l'en-tête de la requête est son seul paramètre
getAllResponseHeaders(). Renvoie le texte de tous les en-têtes de réponse
responseText. La représentation sous forme de chaîne du texte de réponse
responseXML. Représentation XML du texte de réponse, un fragment de document

readyState

instancié Une fois terminé, l'objet XMLHttpRequest a 5 états, représentés par les valeurs suivantes :

0 : NON ENVOYÉ. Indique que l'objet a été créé
1 : OUVERT. Indique que la méthode open() a été appelée avec succès
2 : HEADERS_RECEIVED. Indique que les en-têtes de la requête ont été reçus
3 : LOADING. Indique que l'en-tête de réponse a été téléchargé
4 : TERMINÉ. Indique que la requête est terminée, mais n'indique pas si la requête a réussi ou renvoie les valeurs attendues (interrogez la réponse et les en-têtes HTTP standard pour évaluer l'état de la requête)

Exemples JavaScript génériques

Avant d'aller plus loin dans les bibliothèques populaires, examinons quelques exemples JavaScript bruts pour comprendre la technologie de base en action.

Exemple de document HTML

<!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>

Copier après la connexion

L'exemple suivant illustre une simple requête GET qui gérera ResponseXML. Il s’agit d’une interaction Ajax typique des premiers jours de la technologie. Il fonctionne dans tous les navigateurs modernes ainsi qu'Internet Explorer 7 et 8.

Une fonction Ajax de base

/*
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);

Copier après la connexion

在下面的例子中可以看到活动的原始 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);

Copier après la connexion

下面展示了现今更为常见的模式：采用 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);

Copier après la connexion

下面例子都使用了 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);

Copier après la connexion

库示例

对于大多数开发人员来说，只有进行学术研究的人才会对 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"
 })
 } 
)

Copier après la connexion

下面演示了如何发布和检索简单 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
   }
  )
 }
);

Copier après la connexion

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

Copier après la connexion

下面展示了一个 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 );

Copier après la connexion

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

Copier après la connexion

下面中的 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 }
   })
  } 
 )
});

Copier après la connexion

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

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

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