Ajax中的XMLHttpRequest

记录下今天所学的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>

Ajax的基础理解一些还需继续努力

Ajax中的XMLHttpRequest

相关文章