GitHub

JavaScript 13 Ajax技术（未完) 

<body>
	<!-- 添加文档主体内容 -->
	<header>
		<nav>JavaScript - Ajax - 读取XML文件</nav>
	</header>
	<hr>
	<div id="id-div-form">
		<form id="id-form"
			  name="name-form"
			  action="#"
			  method="get"
			  target="_blank"
			  accept-charset="utf-8">
			<table>
				<caption>Ajax - 读取XML文件</caption>
				<tr>
					<td class="td-label"><label>源文件</label></td>
					<td>xml-table.xml</td>
				</tr>
				<tr>
					<td class="td-label"><label>Ajax方式</label></td>
					<td><input type="button" value="读取" onclick="on_ajax_load_xml_click();"/></td>
				</tr>
			</table>
		</form>
	</div>
	<div id="id-xml-table"></div>
	<!-- 添加文档主体内容 -->
	<script type="text/javascript">
        var g_xhr;

        function creatXMLHttpRequest() {
            var xhr;
            if (window.ActiveXObject) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            } else if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = null;
            }
            return xhr;
        }

        function on_ajax_load_xml_click() {
            g_xhr = creatXMLHttpRequest();
            if (g_xhr) {
                g_xhr.onreadystatechange = handleStateChange;
                g_xhr.open("GET", "xml-table.xml", true);
                g_xhr.setRequestHeader("CONTENT-TYPE", "application/x-www-form-urlencoded");
                g_xhr.send(null);
            }
        }

        function handleStateChange() {
            if (g_xhr.readyState == 4) {
                if (g_xhr.status == 200) {
                    console.log("The server response: " + g_xhr.responseText);
                    document.getElementById("id-xml-table").innerHTML = g_xhr.responseText;
                    console.log("The server response: " + g_xhr.responseXML);
                    document.getElementById("id-xml-table").innerHTML += g_xhr.responseXML;
                }
            }
        }
	</script>
</body>

POST请求方式
<body>
<!-- 添加文档主体内容 -->
<header>
    <nav>JavaScript - Ajax - POST请求方式</nav>
</header>
<hr>
<div id="id-div-form">
    <form id="id-form"
          name="name-form"
          action="#"
          method="post"
          target="_blank"
          accept-charset="utf-8">
        <table>
            <caption>Ajax - POST请求方式</caption>
            <tr>
                <td class="td-label"><label>用户名</label></td>
                <td><input type="text" id="id-input-username" value=""/></td>
            </tr>
            <tr>
                <td class="td-label"><label>密码</label></td>
                <td><input type="password" id="id-input-pwd" value=""/></td>
            </tr>
            <tr>
                <td class="td-label"><label>Ajax方式</label></td>
                <td>
                    <input type="button"
                           id="id-input-login"
                           value="登陆"
                           onclick="on_login_click(this.id);"/>
                </td>
            </tr>
            <tr>
                <td class="td-label"><label>提示</label></td>
                <td id="id-td-hint"></td>
            </tr>
        </table>
    </form>
</div>
<!-- 添加文档主体内容 -->
<script type="text/javascript">
    var g_xhr;

    function creatXMLHttpRequest() {
        var xhr;
        if (window.ActiveXObject) {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        } else if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = null;
        }
        return xhr;
    }

    function on_login_click(thisid) {
        var param;
        var p_username = document.getElementById("id-input-username").value;
        var p_pwd = document.getElementById("id-input-pwd").value;
        param = "username=" + p_username + "&pwd=" + p_pwd;
        g_xhr = creatXMLHttpRequest();
        if (g_xhr) {
            g_xhr.onreadystatechange = handleStateChange;
            g_xhr.open("POST", "ch13-ajax-post.php", true);
            g_xhr.setRequestHeader("CONTENT-TYPE", "application/x-www-form-urlencoded");
            g_xhr.send(param);
        }
    }

    function handleStateChange() {
        if (g_xhr.readyState == 4) {
            if (g_xhr.status == 200) {
                console.log("The server response: " + g_xhr.responseText);
                document.getElementById("id-td-hint").innerHTML = g_xhr.responseText;
            }
        }
    }
</script>
</body>
posted @ 2019-03-09 20:22  繁华似锦觅安宁  阅读(339)  评论(0)    收藏  举报