<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. 前端html,css考点

    1, 内联元素,块级元素相关知识点 参考链接:https://edu.aliyun.com/a/103378 (1)置换元素 概念:浏览器根据元素的标签和属性,来决定元素的具体显示内容.<img ...

  2. 【HDU - 1176 】免费馅饼 （逆dp）

    免费馅饼  Descriptions: 都说天上不会掉馅饼,但有一天gameboy正走在回家的小径上,忽然天上掉下大把大把的馅饼.说来gameboy的人品实在是太好了,这馅饼别处都不掉,就掉落在他身旁 ...

  3. echarts gl 3d地图，click事件失效，解决办法

    问题 比如点击四川,进行下钻,需要获取点击区域的name属性,根据name进而异步获取四川的地图的json,如下图所示: echart和gl版本 Loaded claygl, version 1.2. ...

  4. React Native运行出现Could not find "iPhone X" simulator

    打开项目文件夹下 node_modules/react-native/local-cli/runIOS/findMatchingSimulator.js 查找 if (!version.startsW ...

  5. 源码浅析：InnoDB聚集索引如何定位到数据的物理位置，并从磁盘读取

    索引结构概述: MyISAM索引文件和数据文件是分离的,索引文件仅保存数据记录的地址.这与Oracle的索引结构相似,比较好理解.那么,常用的Innodb聚集索引结构是怎样的呢? InnoDB的数据文 ...

  6. DK1.5-JDK11各个新特性

    摘要: 参考文献: https://blog.csdn.net/lsxf_xin/article/details/79712537 JDK各个版本的新特性 要了解一门语言,最好的方式就是要能从基础的版 ...

  7. 这 100 道 Python 题，拿去刷！！！

    2020年,学 Python 还有价值吗? 根据 2020 年 2 月的 TIOBE 编程语言排行榜显示,Python仍然稳居第三位. 此排行榜排名基于互联网上有经验的程序员. 课程和第三方厂商的数量 ...

  8. CentOS安装图解及配置

    CentOS-7-x86_64-Minimal安装图解 界面说明: Install CentOS 7 安装CentOS 7 Test this media & install CentOS   ...

  9. 【daily】Java枚举 - fastjson对enum的处理

    目的 1.枚举值转换成完全的json: 2.对象中的枚举成员完全转换成json: 3.枚举类的全部值转换成json: 枚举定义 public enum SongsEnum { SAFE_AND_SOU ...

  10. select下拉框相关操作(更新中。。。)

    背景 记录一些关于html标签的操作,基本上都是jquery操作 select下拉框 根据value查找对应option,然后执行选中操作 $("#selectId").find( ...