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 ...
随机推荐
- Unity 编辑器开发SceneView GUI控制
前几天项目需要就做了个类似于Collider EditCollider的功能 下面是我做的效果 基础代码如下: public class ExportCFGInputWindow : EditorWi ...
- JMeter函数助手中Random函数详解
1.__Random函数的生成 The minimum value allowed for a range of values:一个范围内允许的最小值 The maximum value allowe ...
- python len函数(41)
在python中除了print函数之外,len函数和type函数应该算是使用最频繁的API了,操作都比较简单. 一.len函数简介 返回对象的长度(项目数)参数可以是序列(例如字符串str.元组tup ...
- npm安装Vue.js
我之前是有安装过npm的 使用淘宝 NPM 镜像 $ npm install -g cnpm --registry=https://registry.npm.taobao.org 查看nmp版本 $ ...
- JS中this的几种情况
1.给元素的某个事件行为绑定方法,事件触发,方法执行,此时方法中的this一般都是当前元素本身: <div id="div"></div> div.oncl ...
- OpenLayers动态测量距离和面积，并可自定义测量的线样式
全局操作变量 /** * @description 标注弹出框 */ HtmlPopup = null; /** * @description 临时图层类数据源 */ VectorSource = n ...
- redis 5.0.7 源码阅读——双向链表
redis中双向链表相关的文件为:adlist.h与adlist.c 一.数据结构 redis里定义的双向链表,与普通双向链表大致相同 单个节点: typedef struct listNode { ...
- 学习 Vim 命令总结
学习 Vim 命令总结 可以使用 vscode-vim 扩展,但是要注意一些ctrl+字母的快捷键会无效,必须去掉冲突的快捷键 esc 回到普通模式 i 普通模式进入插入模式 : 进入命令模式 :wa ...
- WebStorm2018破解教程
话不多说,直接上教程: 1,下载压缩包,并解压缩,下载地址如下: 链接:谁点谁知道提取码:9am8 2,双击压缩包中的WebStorm-2018.2.1.exe文件,进行安装. 3,安装完成之后,将压 ...
- 【redis】基于redis实现分布式并发锁
基于redis实现分布式并发锁(注解实现) 说明 前提, 应用服务是分布式或多服务, 而这些"多"有共同的"redis"; (2017-12-04) 笑哭, 写 ...