아약스 란 무엇입니까? ajax에 대한 자세한 소개-JS 튜토리얼-php.cn

Ajax 자체는 기술이 아니지만 2005년 Jesse James Garrett이 개척했으며 HTML 또는 XHTML, Cascading Style Sheets, JavaScript, Document Object Model, XML을 포함한 많은 기존 기술을 적용하는 "새로운" 방법으로 설명되었습니다. , XSLT, 그리고 가장 중요한 것은 XMLHttpRequest 객체입니다.

이러한 기술을 Ajax 모델에 결합하면 웹 앱은 전체 탐색 인터페이스를 새로 고치는 대신 사용자 인터페이스를 빠르고 점진적으로 업데이트할 수 있으므로 애플리케이션이 더 빨라지고 사용자 경험이 향상됩니다.

ajax에서 x는 xml을 의미하지만, 더 가볍고 javascript의 일부라는 장점 때문에 json이 더 많이 사용됩니다. ajax 모델의 json과 xml은 모두 데이터 정보를 패키지하는 데 사용됩니다.

AJAX란 무엇인가요?

AJAX는 Asynchronous JavaScript And XML의 약자입니다. 간단히 말해서 XMLHttpRequest객체를 사용하여 JSON, XML, HTML 및 텍스트 파일을 비롯한 다양한 방법으로 정보를 보내고 받을 수 있습니다. AJAX의 가장 매력적인 기능은 "비동기"입니다. 즉, 페이지를 새로 고치지 않고도 서버와 통신하고 데이터를 교환하여 페이지를 업데이트할 수 있습니다.

ajax의 두 가지 주요 기능:

페이지를 새로 고치지 않고 데이터 요청
서버에서 데이터 가져오기

1단계 – 요청 방법

서버를 요청하려면 자바스크립트를 사용하려면 필요한 기능을 갖춘 객체를 인스턴스화해야 합니다. 이것이 XMLHttpRequest의 출처입니다. 원래 Internet Explorer는 XMLHTTP라는 ActiveX 개체를 구현했습니다. 그 이후로 Mozilla, Safari 및 기타 브라우저 제조업체에서는 이 메서드와 Microsoft의 것과 유사한 ActiveX 개체 기능을 지원하기 위해 XMLHttpRequest 개체를 연속적으로 구현했습니다. 동시에 Microsoft는 XMLHttpRequest도 구현했습니다.

// 이전 호환성 코드는 더 이상 필요하지 않습니다.

if (window.window.ActiveXObject) { // IE 6 이하

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

}

참고: 위 코드는 설명용일 뿐이며 XMLHttp의 인스턴스만 생성합니다. 더 실제적인 예를 보려면 3단계로 건너뛸 수 있습니다.

요청 후 요청 결과를 받아야 합니다. 이 단계에서는 다음과 같이 onreadystatechangeproperty 메서드를 구성하여 응답 JavaScript 메서드를 처리하도록 XMLHttp 요청 개체에 지시해야 합니다.

httpRequest.onreadystatechange = nameOfTheFunction;

로그인 후 복사

또는

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

로그인 후 복사

응답을 수락하는 방법을 선언한 후 요청을 시작해야 합니다. HTTP 요청 객체를 호출하여 open() 및 send() 메소드는 다음과 같습니다:

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

로그인 후 복사

open()의 첫 번째 매개변수는 HTTP 요청 메소드입니다 – GET, POST, HEAD 또는 서버에서 지원하는 기타 메소드 . 모두 대문자로 된 메소드 이름은 HTTP 표준입니다. 그렇지 않으면 일부 브라우저(예: Firefox)가 요청을 발행하지 않을 수 있습니다. http 요청 방법에 대한 자세한 내용을 보려면 W3C 사양을 클릭하세요.

두 번째 매개변수는 요청할 URL입니다. 보안상의 이유로 기본적으로 도메인 간 URL 요청을 할 수 없습니다. 모든 페이지가 동일한 도메인 이름 아래 있는지 확인하십시오. 그렇지 않으면 open() 메소드를 호출할 때 "권한 거부" 오류가 발생합니다. 일반적인 교차 도메인 문제는 웹 사이트의 도메인 이름이 domain.tld인데 www.domain.tld를 사용하여 페이지에 액세스하려고 하는 것입니다. 원본 간 요청을 실제로 수행하려면 HTTP 액세스 제어를 확인하세요.
선택적인 세 번째 매개변수는 이 요청이 동기인지 비동기인지를 설정합니다. true(기본값)이면 JavaScript가 계속 실행되며, 사용자가 페이지를 조작하는 동안 서버에서 데이터를 반환합니다. 이것이 바로 AJAX입니다.
send() 메소드의 매개변수는 서버(POST)로 전송하려는 모든 데이터가 될 수 있습니다. 양식 데이터는 쿼리 문자열:
```
"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"
```
로그인 후 복사

데이터를 POST하려면 요청의 MIME 유형을 설정해야 할 수도 있습니다. 예를 들어 양식 데이터를 쿼리 데이터로 보내기 위해 send()를 호출하기 전에 다음 코드를 삽입합니다.

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

로그인 후 복사

2단계 – 서버 응답

요청을 처리할 때 응답을 처리하기 위한 JavaScript 메서드를 제공했습니다.

httpRequest.onreadystatechange = nameOfTheFunction;

로그인 후 복사

이 방법의 용도는 무엇인가요? 먼저 요청 상태를 확인해야 합니다. 값이 XMLHttpRequest.DONE(4)이면 모든 서버 응답이 수락되었음을 의미합니다.

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

로그인 후 복사

가능한 모든 ReadyState 값은 다음과 같이 XMLHTTPRequest.readyState에서 볼 수 있습니다.

또는 (execute request) ute4 (완료) 또는 (요청 완료 및 응답은 ReadyRequest 완료된 응답이 제자리에 있습니다)

valueSTATE
클라이언트가 생성되었습니다. open()이 아직 호출되지 않았습니다.
1
open()이 호출되었으며 헤더와 상태를 사용할 수 있습니다.
3LOADINGDownloading; 부분 데이터를 보유하고 있습니다.4DONE작업이 완료되었습니다.
(Source)
接下来，检查HTTP响应的 response code 。查看 W3C看到可能的值。下面例子我们用response code是不是等于200来判断ajax请求是否成功。
```
<code>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. }</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> <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></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() {  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);  } }</code>
```
로그인 후 복사
Step 4 – 使用 XML 响应
在前面的例子里，在获取到响应之后，我们用request 对象responseText 属性获得 test.html 文件内容。现在让我们尝试获取responseXML 属性。
首先，让我们创建一个有效的XML文档，留着待会我们请求。(test.xml)如下:
```
<code><?xml version="1.0" ?> <root>    I'm a test. </root></code>
```
로그인 후 복사
在这个脚本里，我们只要修改请求行为：
```
<code>... onclick="makeRequest('test.xml')"> ...</code>
```
로그인 후 복사
然后在alertContents()里，我们需要把 alert(httpRequest.responseText); 换为：
```
<code>var xmldoc = httpRequest.responseXML; var root_node = xmldoc.getElementsByTagName('root').item(0); 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:  <input type="text" id="ajaxTextbox" /> </label>  Make a request </code>
```
로그인 후 복사
我们也给事件处理方法里面加一行获取文本框内容，并把它和服务器端脚本的url一起传递给 makeRequest() 方法：
```
<code>  document.getElementById("ajaxButton").onclick = function() {      var userName = document.getElementById("ajaxTextbox").value;      makeRequest('test.php',userName);  };</code>
```
로그인 후 복사
我们需要修改makeRequest()方法来接受用户数据并且传递到服务端。我们将把方法从 GET 改为 POST，把我们的数据包装成参数放到httpRequest.send()：
```
<code>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));  }</code>
```
로그인 후 복사
如果服务端只返回一个字符串， alertContents() 方法可以和Step 3 一样。然而，服务端不仅返回计算后的字符串，还返回了原来的用户名。所以如果我们在输入框里面输入 “Jane”，服务端的返回将会像这样：
{"userData":"Jane","computedString":"Hi, Jane!"}
要在alertContents()使用数据，我们不能直接alert responseText, 我们必须转换数据然后 alert computedString属性:
```
<code>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.');    }  } }</code>
```
로그인 후 복사
test.php 文件如下：
```
<code>$name = (isset($_POST['userName'])) ? $_POST['userName'] : 'no name'; $computedString = "Hi, " . $name; $array = ['userName' => $name, 'computedString' => $computedString]; echo json_encode($array);</code>
```
로그인 후 복사
查看更多DOM方法, 请查看 Mozilla's DOM implementation 文档。