ajax 常用函数和属性

function callServer() {
// Get the city and state from the web form
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
// Only go on if there are values for both fields
if ((city == null) || (city == "")) return;
if ((state == null) || (state == "")) return;
// Build the URL to connect to
var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);
// Open a connection to the server
xmlHttp.open("GET", url, true);
// Setup a function for the server to run when it's done
xmlHttp.onreadystatechange = updatePage;
// Send the request
xmlHttp.send(null);
}

<script language="javascript" type="text/javascript">
var request = false;
try {
  request = new XMLHttpRequest();
} catch (trymicrosoft) {
   try {
       request = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (othermicrosoft) {
         try {
              request = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (failed) {
              request = false;
         }
    }
}
if (!request)
   alert("Error initializing XMLHttpRequest!");
</script>

● open()：建立到服务器的新请求。
● send()：向服务器发送请求。
● abort()：退出当前请求。
● readyState：提供当前 HTML 的就绪状态。
● responseText：服务器返回的请求响应文本。

readyState

● 0：请求未初始化（还没有调用open()）。
● 1：请求已经建立，但是还没有发送（还没有调用send()）。
● 2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
● 3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
● 4：响应已完成；您可以获取并使用服务器的响应了。

HTTP 状态代码

● 401：未经授权
● 403：禁止
● 404：没找到
● 200：一切正常

不常用

● 301：永久移动
● 302：找到（请求被重新定向到另外一个 URL/URI 上）
● 305：使用代理（请求必须使用一个代理来访问所请求的资源）

HTTP 就绪状态和HTTP有效状态代码（1）

function updatePage() {
   if (request.readyState == 4) {
      if (request.status == 200) {
          var response = request.responseText.split("|");
          document.getElementById("order").value = response[0];
          document.getElementById("address").innerHTML =
          response[1].replace(/\n/g, "<br />");
      } else
          alert("status is " + request.status);
   }
}

HTTP 就绪状态和HTTP有效状态代码（2）

function updatePage() {
  if (request.readyState == 4) {
     if (request.status == 200) {
         var response = request.responseText.split("|");
         document.getElementById("order").value = response[0];
         document.getElementById("address").innerHTML =
         response[1].replace(/\n/g, "<br />");
     } else if (request.status == 404) {
         alert ("Requested URL is not found.");
     } else if (request.status == 403) {
         alert("Access denied.");
     } else
         alert("status is " + request.status);
     }
  }
}

DOM 节点的属性主要有：

● nodeName 报告节点的名称（详见下述）。
● nodeValue 提供节点的 “值”（详见后述）。
● parentNode 返回节点的父节点。记住，每个元素、属性和文本都有一个父节点。
● childNodes 是节点的孩子节点列表。对于 HTML，该列表仅对元素有意义，文本节点和属性节点都没有孩子。
● firstChild 仅仅是 childNodes 列表中第一个节点的快捷方式。
● lastChild 是另一种快捷方式，表示 childNodes 列表中的最后一个节点。
● previousSibling 返回当前节点之前的节点。换句话说，它返回当前节点的父节点的 childNodes 列表中位于该节点前面的那个节点（如果感到迷惑，重新读前面一句）。
● nextSibling 类似于 previousSibling 属性，返回父节点的 childNodes 列表中的下一个节点。
● attributes 仅用于元素节点，返回元素的属性列表。

DOM节点方法：

● insertBefore(newChild, referenceNode) 将 newChild 节点插入到 referenceNode 之前。记住，应该对 newChild 的目标父节点调用该方法。
● replaceChild(newChild, oldChild) 用 newChild 节点替换 oldChild 节点。
● removeChild(oldChild) 从运行该方法的节点中删除 oldChild 节点。
● appendChild(newChild) 将 newChild 添加到运行该函数的节点之中。newChild 被添加到目标节点孩子列表中的末端。
● hasChildNodes() 在调用该方法的节点有孩子时则返回 true，否则返回 false。
● hasAttributes() 在调用该方法的节点有属性时则返回 true，否则返回 false。