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>
JavaScript 13 Ajax技术（未完)的更多相关文章
- 13. Ajax技术
在传统的Web应用模式中,页面中用户的每一次操作都将触发一次返回Web服务器的HTTP请求,服务器进行相应的处理后,返回一个HTML页面的客户端.而在Ajax应用中,页面中的用户的操作将通过Ajax引 ...
- JavaScript设计模式:读书笔记(未完)
该篇随我读书的进度持续更新阅读书目:<JavaScript设计模式> 2016/3/30 2016/3/31 2016/4/8 2016/3/30: 模式是一种可复用的解决方案,可用于解决 ...
- 利用原生Javascript实现计算器（未完待续）
这里,将记录我升级四则运算v1.2的整个过程. 环境检测,杨说检测环境也是可以高兴到手舞足蹈的一件事. 为了实现自动化,Testing,查阅相关资料,我这里使用了node(这里为了npm).yoema ...
- JavaScript之Ajax技术
- javascript有用小功能总结(未完待续)
1)javascript让页面标题滚动效果 代码如下: <title>您好,欢迎访问我的博客</title> <script type="text/javasc ...
- 第18天 ajax技术和javascript加强（json）
第18天 ajax技术和javascript加强(json) 复习: B/S架构实现文件上传的思路? 使用a标签实现文件下载功能,有什么问题? 使用Servlet实现文件下载的思路? 今日任务 ...
- Web应用程序开发，基于Ajax技术的JavaScript树形控件
感谢http://www.cnblogs.com/dgrew/p/3181769.html#undefined 在Web应用程序开发领域,基于Ajax技术的JavaScript树形控件已经被广泛使用, ...
- Go web编程学习笔记——未完待续
1. 1).GOPATH设置 先设置自己的GOPATH,可以在本机中运行$PATH进行查看: userdeMacBook-Pro:~ user$ $GOPATH -bash: /Users/user/ ...
- 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法（转载） IEnumerable,ICollection,IList接口问题 不吹不擂，你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理
服务器文档下载zip格式 刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...
随机推荐
- python 分析慢查询日志生成报告
python分析Mysql慢查询.通过Python调用开源分析工具pt-query-digest生成json结果,Python脚本解析json生成html报告. #!/usr/bin/env pyth ...
- vsftp管理用户
[root@localhost vsftpd]# cat auto_createftp.py #!/usr/bin/env python #_*_coding:utf-8_*_ #date:20180 ...
- Spring MVC系列之JDBC Demo（SpringBoot）（七）
前言 前面我们了解了Spring MVC的基本使用,其实和.NET或.NET Core MVC无异,只是语法不同而已罢了,本节我们将和和数据库打交道,从最基础的JDBC讲解起,文中若有错误之处,还望指 ...
- 用 Python 分析今年考研形势
还有5天,就到了考研初试的时间了. ! 尽管今年研招网内部,已经做了优化改善,还是抵挡不住考生们的报名热情(网站崩溃). 2017年考研人数增长至201万人, 2018年则达到238万人, 201 ...
- jni 文件切割合并
最近学习c++,看到很多常用的例子,比如文件切割,切割后后缀可以自定义,别人就无法从表面的一个文件看出是什么,也无法查看到原文件信息,只有合并后才能识别这庐山真面目 实现也比较粗暴,首先在应用层定义好 ...
- Mac下appium-doctor提示错误汇总
一. 提示 [Error: Could not detect Mac OS X Version from sw_vers output: '10.12'] 解决方法: 1.终端执 ...
- 【已解决2】pyinstaller UnicodeDecodeError: ‘utf-8’ codec can’t decode byte 0xce in position 110: invalid continuation byte
python打包exe解码错误问题 最近做了一个小项目,其中把自己写的python打包成exe文件.我用的是pyinstaller. 只需要打包主程序py文件就ok. 在打包过程中,遇到一 ...
- Android中动态改变Listview中字体的颜色
效果如下: 账目显示用的是Listview,要实现的功能为使其根据所在Item是“收入”还是“支出”来把数字设置成绿色或红色 方法是自定义适配器,并重写其中getView()函数,实现如下: //自定 ...
- python生日贺卡制作以及细节问题的解决最后把python项目发布为exe可执行程序过程
自己今天第一次做一个python生日贺卡: 效果图 参考之前有位大佬的作品,自己稍微的改造了一下下 首先:上程序 Birthday.py """ ----------- ...
- eclipse maven jdk1.8 还原站点项目红感叹号总是小结
问题背景有三 maven 默认是jdk1.5jdk1.8 目录文件夹不全操作: 在项目上右击-> build path-->config build path-->libraries ...