<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. k8s系列---kubectl基础

    kubectl get pods  查看所有pods kubectl  get  services  查看services kubectl replace --filename=myweb-rc.ya ...

  2. Spring（七）核心容器 - 钩子接口

    目录 前言 1.Aware 系列接口 2.InitializingBean 3.BeanPostProcessor 4.BeanFactoryPostProcessor 5.ImportSelecto ...

  3. clr via c# 程序集加载和反射(2)

    查看,clr via c# 程序集加载和反射(1) 8,发现类型的成员: 字段,构造器,方法,属性,事件,嵌套类型都可以作为类型成员.其包含在抽象类MemberInfo中,封装了所有类型都有的一组属性 ...

  4. C# protobuf自动更新cs文件

    网上的教程大都是手动通过protoc编译, 比较难用 给当前工程添加"Google.Protobuf"和"Grpc.Tools"的引用(通过nuget), 然后 ...

  5. SAP S4HANA里委外加工采购功能的变化

    SAP S4HANA里委外加工采购功能的变化 [Part 1:主要变化点] 1.1,采购订单界面上的变化, 1.2, 新的事务代码: ME2ON (Subcontracting Cockpit), 1 ...

  6. mysql设置编码格式--支持中文

    创建table的时候就使用utf8编码 在每次创建表的时候都在最后加上 character set = utf8就可以很好的支持中文 create table xxx ( id int auto_in ...

  7. 7.python虚拟环境详解

    1.为什么创建虚拟环境? 和其他大多数现代编程语言一样,Python对包和模块的下载.存储以及管理有其自己的一套方法,Python的包一般都存在几个特定的地方,大部分系统包会存在sys.prefix指 ...

  8. Charles证书下载报Name lookup failed

    背景 1.charles https抓包需要在手机上安装证书. 2.近期疫情影响,通过openVPN远程办公. 问题现象 按照网上教程配置好charles proxy配置,证书安装的时候,iPhone ...

  9. 硬盘500M，为什么没有500M。10M宽带，为什么网速没有10M？

    在天朝, 硬件厂商用1000代替1024, 通信公司,用 byte来代替bit. 比如 500G的硬盘,应该有 500 * 1024 *1024 *8 = 4.194304*10^9 位 但是按照厂商 ...

  10. 硬件知识整理part2--电阻在反馈网络中的应用

    学而不厌,诲人不倦,不知老之将至.--孔子 电阻作为电路中基本的元器件之一.在电路设计中,我们有时会使用欧姆定律来大致估计一下电阻值的大小,但是大多时候我们是不用去过多考虑电阻值的大小,像我这样大方的 ...