Web全栈技术指南-2.4 Ajax - 书目录

Web全栈技术指南-2.4 Ajax

2.4 Ajax

(注:本节内容涉及简单地PHP服务器端编程,若要动手实验,请参考PHP一节来运行PHP程序)

Ajax即Asynchronous JavaScript and XML,是一种Web浏览器端的局部页面更新技术。它可以在不重新加载整个Web页面的情况下,使用服务器的数据更新局部Web页面。Ajax依赖若干其他技术:它使用JavaScript向服务器请求数据;通过操纵DOM来更新页面。

一个Ajax的例子如下:

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>AJAX</title>
  </head>
  <body>
    <button id="btn">现在几点?</button>
    <div id="result"></div>
    <script>
      var btn = document.getElementById('btn');
      var result = document.getElementById('result');

      btn.onclick = function() {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'time.php');
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            if (xhr.status === 200)
              result.innerHTML = xhr.responseText;
            else
              alert('Error: ' + xhr.status);
          }
        };
        xhr.send(null);
      };
    </script>
  </body>
</html>

time.php:

<?php echo date('H:i:s') ?>

Ajax依赖XMLHttpRequest对象向服务器请求数据。

xhr.open('GET', 'time.php');

这行代码向服务器发出一个异步的GET请求,请求的资源(URI)是time.php。因为请求是异步的,所以不会马上返回结果,需要我们注册onreadystatechange事件来获得结果:

xhr.onreadystatechange = function () {
  //...
};

在HTTP请求进行的过程中,xhr的readyState的值会发生若干次改变,依次是:

  • 1 (OPENED),当open方法成功调用后
  • 2 (HEADERS_RECEIVED),当HTTP应答头部(header)接收完成时
  • 3 (LOADING),当应答消息主体(message body)开始加载时
  • 4 (DONE),当请求完成时(也可能是由于错误而终止)

我们在请求成功完成时把结果(通过responseText得到)显示出来;如果出错则显示一个错误警告:

if (xhr.readyState === 4) {
  if (xhr.status === 200)
    result.innerHTML = xhr.responseText;
  else
    alert('Error: ' + xhr.status);
}

xhr的send方法真正开始进行HTTP请求。

另外,XMLHttpRequest发出的HTTP请求不必是异步的,获得的结果也不必是XML(本例中它就是一段普通文本)——实际上JSON用得更广泛。更多关于XMLHttpRequest的更多信息可参考:https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest

需要说明的是,AJAX技术受到同源(same-origin)条件限制:简单地说,假设一个HTML文档的URL是http://www.example.com/path/to/doc.html,那么它的XMLHttpRequest对象发出的HTTP请求的URL就只限于http://www.example.com/*,其中*是一个通配符,代表任何字符序列,也可以为空。同源是浏览器出于安全原因加上的一个限制。更多关于同源以及如何“跨源”的信息可参考: https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy

更多关于Ajax的信息可参考:https://developer.mozilla.org/zh-CN/docs/AJAX

results matching “

    No results matching “

    134021

     

    转载链接:https://getfullstack.com/web_client/ajax.html