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 ...
随机推荐
- iOS9下的Map Kit View下的使用
最近有个任务是关于地理位置上的标注开发,经过一些资料的查找和对比,现总结一些经验,给读者也是给自己. iOS9下的Map Kit View实际是以前MapKit,只不过换了一个名字,实际是指同一个UI ...
- 智和网管平台SugarNMS 2019年度IT综合监控突破性成果概览
一元复始,万象更新,欢辞旧岁,喜迎新年. 智和信通,精益求精,携手并进,迎战鼠年! 2020年1月10日,北京智和信通技术有限公司(以下简称“智和信通”)以“2020携手并进”为主题的年度庆典暨201 ...
- .net代码实现上千次ping的实现
先上代码: 多线程实现ping校验: public void PingCameraNew(List<CameraMongoDto> assetlist) { ThreadPool.SetM ...
- JavaScrip流程控制之switch选择，for循环
swith根据表达式的值来case ,break执行跳转语句 <!DOCTYPE html> <html lang="en"> <head> & ...
- 「Flink」RocksDB介绍以及Flink对RocksDB的支持
RocksDB介绍 RocksDB简介 RocksDB是基于C++语言编写的嵌入式KV存储引擎,它不是一个分布式的DB,而是一个高效.高性能.单点的数据库引擎.它是由Facebook基于Google开 ...
- C++中static关键字的用法
运行一个完整的程序.我们可将整个存储区分为四块: (1)栈区:就比如局部变量,对应的函数参数等这些,调用完之后相应的内存会自己释放掉,很让人省心. (2)堆区:堆来堆去的.得要人动手.所以得我们自己手 ...
- Go String
在 Go 语言中, 字符串是基础数据类型之一, 关键字为 string. 变量声明 字符串变量的声明如下: // 声明一个字符串类型的变量 s, 未赋予初始值时默认为零值"" va ...
- 使用jdbc实现ActiveMQ持久化
步骤一:创建一个数据库 步骤二:配置activemq.xml配置文件 1.在persistenceAdapter加入如下配置 <!--createTablesOnStartup 启动是否创建表 ...
- jQuery---事件解绑与事件触发
事件解绑与事件触发 $("p").off("click"); $("#btn").on("click", functio ...
- jQuery---委托事件原理
jQuery事件发展历程 事件发展历程:从简单事件,到bind,到委托事件,到on事件绑定 //简单事件,给自己注册的事件 $("div").click(function () { ...