<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>

JavaScript 13 Ajax技术（未完)的更多相关文章

  1. 13. Ajax技术

    在传统的Web应用模式中,页面中用户的每一次操作都将触发一次返回Web服务器的HTTP请求,服务器进行相应的处理后,返回一个HTML页面的客户端.而在Ajax应用中,页面中的用户的操作将通过Ajax引 ...

  2. JavaScript设计模式:读书笔记(未完)

    该篇随我读书的进度持续更新阅读书目:<JavaScript设计模式> 2016/3/30 2016/3/31 2016/4/8 2016/3/30: 模式是一种可复用的解决方案,可用于解决 ...

  3. 利用原生Javascript实现计算器（未完待续）

    这里,将记录我升级四则运算v1.2的整个过程. 环境检测,杨说检测环境也是可以高兴到手舞足蹈的一件事. 为了实现自动化,Testing,查阅相关资料,我这里使用了node(这里为了npm).yoema ...

  4. JavaScript之Ajax技术

  5. javascript有用小功能总结(未完待续)

    1)javascript让页面标题滚动效果 代码如下: <title>您好,欢迎访问我的博客</title> <script type="text/javasc ...

  6. 第18天 ajax技术和javascript加强（json）

    第18天    ajax技术和javascript加强(json) 复习: B/S架构实现文件上传的思路? 使用a标签实现文件下载功能,有什么问题? 使用Servlet实现文件下载的思路? 今日任务 ...

  7. Web应用程序开发，基于Ajax技术的JavaScript树形控件

    感谢http://www.cnblogs.com/dgrew/p/3181769.html#undefined 在Web应用程序开发领域,基于Ajax技术的JavaScript树形控件已经被广泛使用, ...

  8. Go web编程学习笔记——未完待续

    1. 1).GOPATH设置 先设置自己的GOPATH,可以在本机中运行$PATH进行查看: userdeMacBook-Pro:~ user$ $GOPATH -bash: /Users/user/ ...

  9. 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法（转载） IEnumerable,ICollection,IList接口问题 不吹不擂，你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理

    服务器文档下载zip格式   刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...

随机推荐

  1. 修改定时清理 /tmp 目录下的文件

    初衷 默认系统是超过 30 天不访问的文件自动清除的,但是有时候硬盘用得紧可以考虑修改周期 设置方法 编辑配置文件:vim /etc/cron.daily/tmpwatch #! /bin/sh fl ...

  2. 论文翻译：Speech Enhancement Based on the General Transfer Function GSC and Postfiltering

    论文地址:基于通用传递函数GSC和后置滤波的语音增强 博客作者:凌逆战 博客地址:https://www.cnblogs.com/LXP-Never/p/12232341.html 摘要 在语音增强应 ...

  3. docker容器互联，实现目录、服务共享

    一.需求 docker使服务之间实现容器隔离,比如Javaweb项目前端.后端.数据库.数据库后台,分别把它们部署在不同的容器里面,实现隔离.但服务和服务之间也有互访的需求,这就涉及到容器网络和容器互 ...

  4. [译]Android Studio 3.6 新特性概览

    设计 设计编辑器 设计编辑器(比如布局编辑器和导航编辑器)现在提供了一个拆分视图模式,能够同时查看 UI 界面的 Design 视图和 Code 视图.拆分视图取代并改进了早期的预览窗口,并且可以对每 ...

  5. codewars--js--Large Factorials--阶乘+大数阶乘

    问题描述: In mathematics, the factorial of integer n is written as n!. It is equal to the product of n a ...

  6. java8 常用代码

    1. 使用java8 提取出 list 中 bean 的某一属性 public static void main(String[] args) { List<Student> stuLis ...

  7. 掌握这13个MySQL索引知识点，让你面试通过率翻倍

    数据库索引有关的知识,说实在的,真的是很复杂,本来想好好看看这方面的东西,然后写篇文章详细谈谈的,后来发现索引的知识太难太深,要谈得全面又详细真的很难,所以最后还是把自己学到的和想到的变成下面一个个的 ...

  8. 重构与动态为angularjs栏位赋值或获取值

    先来看下面一段html: 这个ng-model名称带有一定的规律带有序号. 先来实现数据绑定,从数据取到数据后,为ng-model绑定相对应的值: var c = response.data $sco ...

  9. Session注销后，浏览器后退仍显示Session信息

    初学JavaWeb,在一次测试登录功能的时候,发现了登进去后,点击退出按钮注销session,浏览器按后退能够显示session信息,并且点击登录还能够不输入密码登录(前端页面没写JS限制输入后登录) ...

  10. win2012 挂载硬盘即增加新硬盘方法

    这篇文章主要介绍了win2012 挂载硬盘即增加新硬盘方法,需要的朋友可以参考下 点击左下角的服务器管理图标 点击右上角的“工具”,再选择“计算机管理” 再点击“磁盘管理” 在磁盘1的按钮处单击右键, ...