아약스 란 무엇입니까? ajax에 대한 자세한 소개

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"

또는 multipart/form-data, JSON, XML 등과 같은 기타 양식과 같이 서버가 구문 분석할 수 있는 형식이어야 합니다.

데이터를 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

DESCRIPTIONSCREPTIONSTENTINSENT

• 클라이언트가 생성되었습니다. open()이 아직 호출되지 않았습니다.

• 1

OPENED

• open()이 호출되었으며 헤더와 상태를 사용할 수 있습니다.

• 3LOADINGDownloading; 부분 데이터를 보유하고 있습니다.4DONE작업이 완료되었습니다.
  (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 文档。

위 내용은 아약스 란 무엇입니까? ajax에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!