<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. Linux 邮件服务

    三个要点 1.smtp协议 2.搭建本地邮件服务器 3.使用外部邮件服务器 实现邮件功能 1.smtp协议           SMTP(Simple Mail Transfer Protocol)即 ...

  2. java String hashCode遇到的坑

    在进行数据交换时,如果主键不是整型,需要对字符串,或联合主键拼接为字符串,进行hash,再进行取模分片,使用的是String自带的hashCode()方法,本来是件很方便的事,但是有些字符串取hash ...

  3. Web渗透测试漏洞手册及修复建议

    Web渗透测试漏洞手册及修复建议 0x0 配置管理 0x01 HTTP方法测试 漏洞介绍: 目标服务器启用了不安全的传输方法,如PUT.DELETE等,这些方法表示可能在服务器上使用了 WebDAV, ...

  4. 将jsp页面转化为图片或pdf（一）（qq:1324981084）

    java高级架构师全套vip教学视频,需要的加我qq1324981084 在项目中遇见了将jsp页面转化为pdf的问题,试过itext,但是itext需要标准的html代码,我的页面中的一些属性是it ...

  5. 【HDU - 1260 】Tickets （简单dp）

    Tickets 搬中文 Descriptions: 现在有n个人要买电影票,如果知道每个人单独买票花费的时间,还有和前一个人一起买花费的时间,问最少花多长时间可以全部买完票. Input 给出 N(1 ...

  6. Spring Bean自动装配有哪些方式？

    Spring 容器能够自动装配 Bean .也就是说,可以通过检查 BeanFactory 的内容让 Spring 自动解析 Bean 的协作者. 自动装配的不同模式: no - 这是默认设置,表示没 ...

  7. 在ServletFilter层返回多字段提示给前端

    0.背景:在由于不想在小项目中引入SpringSecurity这种重量级安全框架,我自定义了一个LoginFilter来处理认证+授权逻辑.对于认证或授权失败的情况,最初是在filter中抛出异常,并 ...

  8. PHP操作mysql（mysqli + PDO）

    [Mysqli面向对象方式操作数据库] 添加.修改.删除数据 $mysqli ','test'); $mysqli->query('set names utf8'); //添加数据 $resul ...

  9. 回炉重造之重读Windows核心编程-006-线程

    线程也是有两部分组成的: 线程的内核对象,操作系统用来管理线程和统计线程信息的地方. 线程堆栈,用于维护现场在执行代码的时候用到的所有函数参数和局部变量. 进程是线程的容器,如果进程中有一个以上的线程 ...

  10. 在香蕉派的树莓派系统上配置 Syncthing 自启动

    在香蕉派的树莓派系统上配置 Syncthing 自启动 —— 魏刘宏 2020 年 1 月 19 日 首先做个名词解释,” 香蕉派” 是国内一款山寨树莓派的硬件产品,” 树莓派系统” 指的是”rasp ...