记录下今天所学的Ajax基础
javascript code
window.onload = initAll;
var varAjax;
function initAll() {
document.getElementById("goAjax").onclick = initGoAjax;
}
function initGoAjax() {
if (window.XMLHttpRequest) { //浏览器是否支持如果支持就创建
varAjax = new XMLHttpRequest;
}
else {
varAjax = new ActiveXObject("Micorsoft.XMLHTTP"); //使用ActiveXObject创建
}
varAjax.onreadystatechange = getAjax; //<span style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px;">指定当readyState属性改变时的事件处理句柄</span>
varAjax.open("GET", "us-states.xml?g="+Math.random(), true); //添加一个唯一ID使获取的文件不是缓存的文件 其实应该添加GUID
varAjax.send(null);
return false;
}
function getAjax() {
if (varAjax.readyState == 4 && varAjax.status == 200) { //当前的请求状态和当前的请求状态码
if (varAjax.responseXML && varAjax.responseXML.childNodes.length > 0) {
var outMsg = getText(varAjax.responseXML.getElementsByTagName("choices")[0]);
document.getElementById("AjaxDiv").innerHTML = outMsg;
}
else
document.getElementById("AjaxDiv").innerHTML = varAjax.responseText;
}
}
function getText(inVal) {
if (inVal.textContent) {
return inVal.textContent;
}
else
return inVal.text;
}
html code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Ajax.aspx.cs" Inherits="Ajax" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/Ajax.js"></script>
<link href="css/Ajax.css" rel="stylesheet" />
</head>
<body>
<p>
<a id="makeTextRequest" href="gAddress.txt">Request a text file</a><br>
<a id="makeXMLRequest" href="us-states.xml">Request an XML file</a>
</p>
<div id="updateArea"></div>
</body>
</html>