AJAX 基本语法

问题导向清单

问题导向清单
问题解决方案
向服务器发送表单数据用 DOM 获得各个值，然后以 URL 编码格式连接它们。
在不使用 DOM 的情况下编码和发送表单数据使用 FormData 对象。
发送额外的表单值或选择性发送表单数据使用 FormData 对象上的 apped 方法。
发送 JSON 数据使用 JSON.stringify 方法，并设置请求的内容类型为 application/json。
向服务器发送文件给表单添加一个 type 为 file 的 input 元素，并使用 FormData 对象。
跟踪向服务器上传数据的进度使用 XMLHttpRequestUpload 对象。
从服务器接收 HTML 片段读取 responseText 属性。
覆盖服务器发送的 MIME 类型使用 overrideMimeType 方法。
从服务器接收 XML使用 responseXML 属性。
从服务器接收 JSON 数据使用 JSON.parse 方法。

AJAX 原理

AJAX 是基于现有的 Internet 标准，并且联合使用它们：

  • XMLHttpRequest 对象（异步的与服务器交换数据）
  • JavaScript/DOM（信息显示/交互）
  • CSS（给数据定义样式）
  • XML（作为转换数据的格式）

AJAX 应用程序与浏览器和平台无关。

						
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      function loadXMLDoc() {
        var xmlhttp;
        if(window.XMLHttpRequest) {
          //IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
          xmlhttp = new XMLHttpRequest();
        }else {
          //IE6, IE5 浏览器执行代码
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
          if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
          }
        }
        xmlhttp.open("GET", "info.txt", true);
        xmlhttp.send();
      }
    </script>
  </head>
  <body>
    <div id="myDiv">
      <p>使用 AJAX 修改文本内容。</p>
    </div>
    <button type="button" onclick="loadXMLDoc()">修改内容</button>
  </body>
</html>
  • 发生某个事件：button 被点击，button 负责调用名为 loadXMLDoc() 的函数。
  • 创建 XMLHttpRequest 对象：loadXMLDoc() 函数内创建了一个 xmlhttp 对象。

    XMLHttpRequest 是 AJAX 的基础。所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

  • 发送 HttpRequest：xmlhttp.send()。

创建 XMLHttpRequest 对象

						
var xmlhttp;
if(window.XMLHttpRequest) {
  //所有现代浏览器 IE7+、Firefox、Chrome、Safari 以及 Opera 均内建 XMLHttpRequest 对象
  xmlhttp = new XMLHttpRequest();
} else {
  //老版本的 IE5 和 IE6 使用 ActiveX 对象
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

AJAX 向服务器发送请求

XMLHttpRequest 对象用于和服务器交换数据。使用 XMLHttpRequest 对象的 open() 和 send() 方法将请求发送到服务。

XMLHttpRequest 对象的方法
方法说明
open(method, url, async) 规定请求的类型、URL、是否异步处理请求。
  • method: 请求的类型(GET or POST)。
  • url: 文件在服务器上的位置。
  • async: true(异步) or false(同步)。
send(string) 将请求发送到服务器。

string: 仅用于 POST 请求。

GET 请求

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

					
xmlhttp.open("GET", "demo_get.php", true);
xmlhttp.send();

//添加信息
xmlhttp.open("GET", "demo_get.php?name=wanghao&id=1&score=100", true);
xmlhttp.send();

POST 请求

在以下情况中，需要使用 POST 请求：

					
xmlhttp.open("POST", "demo_post.php", true);
xmlhttp.send();

xmlhttp.open("POST", "demo_post.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("name=wanghao&id=1&score=100");
方法说明
setRequestHeader(header, value) 向请求添加 HTTP 头。
  • header: 规定头的名称。
  • value: 规定头的值。

url 服务器上的文件

open() 方法的 url 参数是服务器上文件的地址。该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。

true(异步) or false(同步)

AJAX(Asynchronous JavaScript and XML) 指的是异步 JavaScript 和 XML。XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true。对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。

通过 AJAX，JavaScript 无需等待服务器的响应，而是：

当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

					
xmlhttp.onreadystatechange = function() {
  if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
  }
}

如需使用 async=false，请将 open() 方法中的第三个参数改为 false：

					
xmlhttp.open("GET", "demo.php", false);

不推荐使用 async=false，但是对于一些小型的请求，也是可以的。JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。async=false 时，不要编写 onreadystatechange() 函数，把代码放到 send() 语句后面即可：

					
xmlhttp.open("GET", "demo.php", false);
xmlhttp.send();                           //等服务器响应就绪才会接着往下执行
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;

服务器响应

如需获得来自服务器的响应，使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

XMLHttpRequest 对象的属性
属性说明
responseText 获得字符串形式的响应数据。

如果来自服务器的响应并非 XML，请使用 responseText 属性。responseText 属性返回字符串形式的响应。
responseXML获得 XML 形式的响应数据。

responseXML 属性

如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，需要使用 responseXML 属性。

请求 cd_catalog.xml 文件，并解析响应：

cd_catalog.xml

					
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      function loadXMLDoc() {
        var xmlhttp;
        var txt, artist_arr, i;
        if(window.XMLHttpRequest) {
          //IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
          xmlhttp = new XMLHttpRequest();
        }else {
          //IE6, IE5 浏览器执行代码
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
          if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            xmlDoc = xmlhttp.responseXML;
            txt = "";
            artist_arr = xmlDoc.getElementsByTagName("ARTIST");
            for(int i = 0; i < artist_arr.length; i++) {
              txt = txt + artist_arr[i].chlidNodes[0].nodeValue + "<br>";
            }
            document.getElementById("myDiv").innerHTML = txt;
          }
        }
        xmlhttp.open("GET", "cd_catalog.xml", true);
        xmlhttp.send();
      }
    </script>
  </head>
  <body>
    <p>我收藏的 CD 有：</p>
    <div id="myDiv"></div>
    <button type="button" onclick="loadXMLDoc()">点击查看</button>
  </body>
</html>

onreadystatechange 事件

当请求被发送到服务器时，需要执行一些基于响应的任务。每当 readyState(就绪状态) 改变时，就会触发 onreadystatechange(处于就绪状态改变中) 事件。readyState 属性存有 XMLHttpRequest 的状态信息。

XMLHttpRequest 对象的属性
属性说明
onreadystatechange每当 readyState 属性改变时，就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
  • 0: 请求未初始化。
  • 1: 服务器连接已建立。
  • 2: 请求已接收。
  • 3: 请求处理中。
  • 4: 请求已完成，且响应已就绪。
status(状态码)
  • 200: "OK"
  • 404: 未找到页面。

在 onreadystatechange 事件中，规定当服务器响应已做好被处理的准备时所执行的任务。当 readyState 等于 4 且状态为 200 时，表示响应已就绪。

					
xmlhttp.onreadystatechange = function() {
  if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
  }
}

注意：onreadystatechange 事件被触发 4 次(0-4), 分别是：0-1、1-2、2-3、3-4，对应着 readyState 的每个变化。

使用回调函数

回调函数是一种以参数形式传递给另一个函数的函数。如果网站上存在多个 AJAX 任务，那么应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）。

				
<script>		
var xmlhttp;		
function loadXMLDoc(url, cfunc) {
  if(window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  } else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = cfunc;
  xmlhttp.open("GET", url, true);
  xmlhttp.send();
}
function myFunc() {
  loadXMLDoc("demo.php", function() {
      if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
      }
    }
  )
}
</script>
<body>
  <div id="myDiv"></div>
  <button type="button" onclick="myFunc()">点击修改</button>
</body>

AJAX ASP/PHP

AJAX 用于创造动态性更强的应用程序。

					
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>

    </script>
  </head>
  <body>
  </body>
</html>