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

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

AJAX란 무엇인가요?

• 페이지를 새로 고치지 않고 데이터 요청

• 서버에서 데이터 가져오기

1단계 – 요청 방법

httpRequest.onreadystatechange = nameOfTheFunction;

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

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

• 두 번째 매개변수는 요청할 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 등과 같은 기타 양식과 같이 서버가 구문 분석할 수 있는 형식이어야 합니다.

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

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>

• 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!