집 >웹 프론트엔드 >JS 튜토리얼 >Ajax의 간략한 역사와 기본 사용법

Ajax의 간략한 역사와 기본 사용법

php中世界最好的语言원래의: 2018-03-31 13:33:311239검색

이번에는 Ajax의 간략한 역사와 기본적인 사용법을 알려드리겠습니다. Ajax의 간략한 역사와 사용법을 이해하기 위한 Notes가 무엇인지 살펴보겠습니다.

지난 몇 년 동안 JavaScript는 부차적인 존재에서 웹에서 가장 중요한 언어로 변했습니다. 이 기술의 획기적인 발전을 이끈 한 가지 요소가 있다면 그것은 바로 Ajax 기반 애플리케이션 개발의 출현입니다.

이 주제에 대한 기술 개발

간단히 말하면 Ajax는 페이지를 새로 고칠 필요 없이 실시간 데이터를 사용하여 인터페이스를 업데이트할 수 있는 웹 사이트나 애플리케이션을 지원하는 개발 기술입니다. 이 기능은 더욱 부드럽고 데스크탑과 유사한 사용자 경험을 제공합니다.

Ajax의 간략한 역사

Ajax의 역사는 하룻밤 사이에 성공을 거둔 다른 많은 기술의 역사와 유사합니다. Ajax는 갑자기 나타난 것처럼 보이지만 실제로는 오랫동안 존재해 왔습니다. 수년간의 노력으로 웹 전체에 걸쳐 Ajax 배너 아래 도구와 패턴이 만들어졌습니다. 원래 닷컴 버블의 DHTML 시대와 닷컴 파산 이후의 암흑기 동안 전 세계 개발자들은 JavaScript의 초능력을 활용하고 이 새롭고 흥미로운 애플리케이션 패러다임을 웹에 가져왔습니다.

XMLHttpRequest

최초이자 가장 중요한 Ajax 퍼즐은 XMLHttpRequest(XHR) API입니다. XHR은 웹 브라우저와 웹 서버 간에 데이터 메시지를 전송하기 위한 JavaScript API입니다. HTTP POST(서버로 데이터 전송) 또는 GET 요청(백엔드 서버에서 데이터 액세스)을 사용하는 브라우저를 지원합니다. 이 API는 대부분의 Ajax 상호작용의 핵심이며 현대 웹 개발에 필수적인 기술입니다.

이것은 Microsoft® Internet Explorer® 팀이 인터넷에 기여한 최고의 선물이기도 합니다.

사실이에요. XHR은 2000년 IE 5에서 처음 등장했습니다. 원래 Alex Hopmann이 작성한 Microsoft ® ActiveX ® 컨트롤인 XHR은 Microsoft Outlook ® Web Access와 함께 작동하도록 만들어졌으며 (당시) 고급 프런트 엔드 인터페이스와 Microsoft Exchange Server 간의 상호 작용을 처리하기 위해 고안되었습니다.

Microsoft의 패키지가 정확히 "겸손한" 것은 아니었지만 XHR은 초기 제품의 범위를 훨씬 뛰어넘어 발전하여 나중에 모든 주요 브라우저에서 구현되고 심지어 W3C 표준으로 채택되었습니다.

Pioneers

Microsoft 외에도 Ajax 프로토타입 분야에 진출하기 시작한 기업들이 있습니다. 많은 기업이 이러한 기술을 실험하고 있지만 특히 두 가지를 언급할 가치가 있습니다. 하나는 Ajax 개발에 대해 흥미롭고 자주 인용되는 각주이기 때문이고, 다른 하나는 이러한 기술을 실제로 민주화한 인터넷 거대 기업이기 때문입니다.

Oddpost

Oddpost는 2002년에 출시된 고급 웹 기반 이메일 클라이언트입니다. 현재 친숙한 많은 패턴을 활용합니다. 디자인과 상호 작용 측면에서는 데스크톱 메일 클라이언트가 떠오릅니다. 내부적으로 Oddpost는 개발자가 DataPacks라고 부르는 개념을 사용하여 서버에서 브라우저로 작은 데이터 덩어리를 전송합니다. 이것은 새로운 경험을 가져올 것입니다.

Oddpost가 마침내 Yahoo!에서 사용되었습니다! Yahoo! Mail 개정판의 기반이 되었습니다.

Google 지도, Google Suggest, Gmail 및 중요한 기사

실질적인 변화는 몇 년 후 Gmail, Google Suggest 및 Google 지도 서비스에서 시작되었습니다. 이 세 가지 Ajax 기술의 사용은 웹 개발 세계를 떠들썩하게 만들었습니다. 반응성과 상호작용성은 대중에게 새로운 것입니다. 새로운 Google 앱이 빠르게 화제를 모으고 있습니다.

아는 사람이 많지 않지만 웹 개발 커뮤니티의 반응은 매우 폭력적이었습니다. 당시 사람들은 웹 애플리케이션 개발에 뭔가 새롭고 흥미로운 것이 있다는 것을 알고 있었습니다. 그러나 오랫동안 이 '내용'은 불분명했습니다.

사람들에게 필요한 것은 이를 명확히 하는 기사입니다.

2005년 2월 18일, Adaptive Path의 공동 창립자이자 사장인 Jesse James Garrett은 "Ajax: 웹 애플리케이션에 대한 새로운 접근 방식"이라는 제목의 기사를 썼습니다. 이 기사에서 그는 사람들이 항상 사용하는 Gmail 및 Google 지도와 같은 웹 애플리케이션 디자인 및 개발 동향에 대해 설명합니다. 그는 이러한 추세가 "웹 개발에 근본적인 변화를 촉발할 가능성이 있다"고 부릅니다.

그는 또한 이 패턴에 이름을 붙였는데, 이는 이 순간부터 사람들이 이 새로운 트렌드에 집중하기 시작했고 모든 사람(비전문가라도)이 웹 개발 세계의 최신 변화에 대해 이야기할 때 언급했기 때문에 중요한 순간이었습니다. 이 기사에서 그는 Ajax의 기술을 다음과 같이 소개합니다.

Definition of Ajax

Ajax는 기술이 아닙니다. 실제로는 각각 고유한 특성을 지닌 여러 기술이 새롭고 강력한 방식으로 결합된 것입니다. Ajax에는 다음이 포함됩니다.

XHTML 및 CSS를 사용한 표준 기반 렌더링
문서 개체 모델을 사용한 동적 표시 및 상호 작용
XML 및 XSLT를 사용한 데이터 교환 및 조작
XMLHttpRequest 검색을 사용한 비동기 데이터
이들을 하나로 묶는 JavaScript

이 기술 설명은 다소 오래되었지만 기본 패턴은 그대로 유지됩니다. HTML 및 CSS 렌더링 데이터 및 스타일, DOM 및 관련 메서드는 실시간 페이지 업데이트를 지원하고, XHR은 통신을 지원합니다. 서버와 함께 사용하면 JavaScript가 전체 디스플레이를 정렬합니다.

이 글의 전체적인 영향력은 상대적으로 큽니다. 강렬한 과대광고가 아직 개발되지 않은 창의성과 에너지와 만나 혁명을 일으키는 흔치 않은 경우입니다. Ajax는 전 세계의 신세대 스타트업에 채택되면서 웹 개발 패러다임의 최전선으로 빠르게 이동하고 있습니다. Ajax는 마케팅 전략을 추구하는 모호한 트렌드에서 현대 웹 디자인 개발의 중요한 구성 요소가 되었습니다.

Libraries

Ajax 기반 개발의 핵심 동인은 모든 기능을 갖춘 여러 JavaScript 라이브러리의 발전과 개선입니다. 숙련된 JavaScript 개발자 외에 Ajax의 기본 기술을 진정으로 이해하는 사람은 거의 없습니다. 따라서 DHTML 시대에도 대부분의 브라우저 상호 작용과 애니메이션은 사소한 과잉을 처리하기 위해 고안되었지만 Ajax 기반 사이트(처음부터 작성할 수 있음)에 대한 수요와 재능은 경험이 풍부한 JavaScript 엔지니어의 제한된 수에 의해 제한되었습니다. 이러한 인터페이스)는 공급 간 격차를 더욱 확대합니다. Prototype, Dojo 및 jQuery와 같은 라이브러리는 바로 사용할 수 있는 상호 작용 및 애니메이션을 제공하고, 브라우저 간 차이를 줄이고, 핵심 JavaScript API 단점의 구현을 개선하여 대규모로 이러한 격차를 메우는 데 도움이 됩니다.

Asynchronous JavaScript and more JavaScript (Object Notation)

오리지널 포스트 시대부터 현대까지 Ajax 분야에서 가장 큰 변화는 JavaScript 기반의 데이터 전송 방식인 JSON의 도입입니다. XML에서 사용되는 투박한 DOM 기반 방법 및 속성과 달리 더 작은 파일 크기와 더 쉬운 기본 JavaScript 액세스를 제공하는 JSON은 개발자가 데이터 전송을 위해 빠르게 채택했습니다. 이제 JSON은 최근 완성된 ECMAScript 사양 버전 5에 포함되었습니다.

JSON+Padding

원본 JSON 제안에 대한 중요한 개선 사항은 JSONP(JSON+Padding)입니다. 보시다시피 XMLHttpRequest 개체는 엄격한 보안 모델을 가지며 요청된 페이지와 동일한 도메인 이름 및 프로토콜을 사용하는 통신만 지원합니다. JSONP는 JSON 응답을 사용자 정의 또는 시스템 제공 콜백 함수로 래핑하여 이러한 교차 출처 제한에 대한 보다 유연한 접근 방식을 만듭니다. 이 방법은 JSON 스크립트를 문서에 추가한 후 즉각적인 데이터 액세스를 제공합니다. 이 패턴은 이제 일반적이며 많은 대규모 웹 서비스의 경우 매시업 및 기타 콘텐츠 신디케이션을 지원하기 위해 이 방식을 채택할 수 있습니다.

JSONP의 인기에도 불구하고 악성 코드 침입을 용이하게 하는 명백한 취약점이 있습니다. 제3자의 스크립트 태그 삽입을 통해 모든 콘텐츠가 호스트 페이지에서 실행될 수 있으므로 데이터 공급자가 손상되거나 호스트 페이지가 페이지에 삽입된 리소스를 인식하지 못하는 경우 악의적인 손상이 발생할 가능성이 있습니다.

이제 Ajax의 역사에 대해 조금 알았으니, 마법을 현실로 만드는 기술을 탐구해 봅시다. 하지만 일반 JavaScript API 서적은 라이브러리에서 널리 사용 가능하므로 기본 작동 방식을 이해하는 것은 숙련된 개발자에게도 여전히 유익합니다.

XMLHttpRequest API 및 기능

다른 기술을 사용하여 서버에서 데이터를 반환할 수 있지만 XHR은 여전히 대부분의 Ajax 상호 작용의 핵심입니다. XHR 상호 작용은 요청과 응답이라는 두 부분으로 구성됩니다. 아래에서 하나씩 소개하겠습니다.

보안 모델

위에서 언급했듯이 원본 XMLHttpRequest 객체에는 엄격한 보안 모델이 있습니다. 이 동일 출처 정책은 요청된 페이지와 동일한 호스트, 프로토콜 및 포트를 사용한 통신만 허용합니다. 이는 서로 다른 도메인(example.com 및 example2.com), 서로 다른 호스트(my.example.com 및 www.example.com), 서로 다른 프로토콜(http://example.com 및 https://example.com)을 의미합니다. between은 금지되어 있으며 오류 메시지가 생성됩니다.

XHR 개체의 두 번째 버전이 개발됨에 따라 W3C에서 새로운 도메인 간 요청 프로토콜 작업이 완료됩니다. 현재 브라우저 공급업체에서는 많은 양의 구현 작업을 완료합니다. Internet Explorer 8 이상 및 Mozilla에서만 사용할 수 있습니다. Firefox 3.5 이상, Apple Safari 4 이상 및 Google Chrome에서 사용할 수 있습니다. 개발 속도가 느려졌지만 특정 "Origin" 헤더는 여전히 요청에 전송됩니다.

Origin: http://example.comOrigin: http://example.com

并将服务器配置为发送回一个匹配的 “Access-Control-Allow-Origin” 报头：

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

서버는 일치하는 " Access-Control-Allow-Origin" 헤더:

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

이제 도메인 간 양방향 통신을 위해 XHR 개체를 사용할 수 있습니다. .

Request

요청 측에는 4가지 메서드가 있습니다.

메서드. 사용할 HTTP 메소드(POST 또는 GET 가능)
url. 요청된 URL
async. 요청이 비동기인지 여부를 나타내는 선택적 부울 매개변수(이 매개변수의 기본값은 True)
user. 인증

setRequestHeader() 두 개의 매개변수(헤더 및 관련 값)를 사용하여 요청 헤더를 설정합니다.
send() 요청을 보냅니다. 이 메소드는 POST 요청의 본문을 포함하는 선택적 매개변수를 사용합니다.

abort() 요청 중단

응답

응답에는 여러 가지

도 있습니다.
상태. 요청의 표준 HTTP 상태(예: 성공적인 요청은 200을 반환함)
statusText. 응답 텍스트(예: 304 Not Modified)
getResponseHeader()를 포함하여 웹 서버에서 반환한 전체 응답 문자열을 포함합니다. 특정 헤더 콘텐츠를 반환합니다. 요청 헤더 이름은 유일한 매개 변수
getAllResponseHeaders()입니다. 모든 응답 헤더
responseText의 텍스트를 반환합니다. 응답 텍스트

responseXML의 문자열 표현입니다. 응답 텍스트의 XML 표현, DOM 및 모든 관련 DOM 메소드를 포함하는 문서 조각

readyState

인스턴스가 완료된 후 XMLHttpRequest 객체는 다음 값으로 표시되는 5가지 상태를 갖습니다.
0 : 전송되지 않았습니다. 개체가 생성되었음을 나타냅니다.
1: OPENED. open() 메소드가 성공적으로 호출되었음을 나타냅니다.
2: HEADERS_RECEIVED. 요청의 헤더가 수신되었음을 나타냅니다.
3: LOADING. 응답 헤더가 다운로드되었음을 나타냅니다
4: DONE. 요청이 완료되었음을 나타내지만 요청이 성공했는지 또는 예상 값을 반환하는지 여부는 나타내지 않습니다. (요청 상태를 측정하기 위해 응답 및 표준 HTTP 헤더를 쿼리합니다.)

일반 JavaScript 예

인기 있는 라이브러리를 더 진행하기 전에 먼저 몇 가지 원본 JavaScript 예제를 통해 사용되는 핵심 기술을 이해하세요.

샘플 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>

다음 예에서는 responseXML을 처리할 간단한 GET 요청을 보여줍니다. 이는 기술 초기의 전형적인 Ajax 상호작용입니다. Internet Explorer 7 및 8뿐만 아니라 모든 최신 브라우저에서 작동합니다.

기본 Ajax 기능

/*
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中文网其它相关文章！

Ajax의 간략한 역사와 기본 사용법

관련 기사