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 ...
随机推荐
- es5实现一个class
es5实现一个class https://juejin.im/post/5ac1c5bf518825558949f898#heading-9
- 【GET TIPS】Chrome所见即所得的截图技巧
精简的前言: 对,我就是想说下事情的来龙去脉.您要不想听,就把耳朵捂起来23333. 想截个新冠肺炎病毒,全国确诊人数今日增长的图,以确定非湖北地区不再明显增长. 但由于网页需要的内容分布在两页,需要 ...
- Hibernate框架预览以及基础介绍
前言 从本节我们开始进入到对于Hibernate框架的学习,当前Hibernate框架还未正式发布6.0稳定版本,所以这里我们以5.4.12Final版本进行讲解. Hibernate框架 Hiber ...
- Python爬虫beautifulsoup4常用的解析方法总结（新手必看）
今天小编就为大家分享一篇关于Python爬虫beautifulsoup4常用的解析方法总结,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧摘要 如何用beau ...
- PMP--1.6 项目经理
本节都是理论的东西,可以在管理没有思路的或者管理陷入困境的时候当做提升或解决问题的思路来看. 一.项目经理 1. 项目经理.职能经理与运营经理的区别 (1)职能经理专注于对某个职能领域或业务部门的管理 ...
- 如何知道一个路由器的 BSSID ？
使用 Mac 连接上这个路由器,然后使用 option 按 wifi 按钮,可以在详情页里找到. 有些路由中继的设置需要使用 BSSID ,比如 pandorabox openwrt
- opencv —— threshold、adaptiveThreshold 固定阈值 & 自适应阈值 进行图像二值化处理
阈值化 在对图像进行处理操作的过程中,我们常常需要对图像中的像素做出取舍与决策,直接剔除一些低于或高于一定值的像素. 阈值分割可以视为最简单的图像分割方法.比如基于图像中物体与背景之间的灰度差异,可以 ...
- JAVA面向对象 - 抽象类、接口
抽象类 用abstract关键字来修饰一个类时,这个类就叫抽象类,用abstract关键字来修饰一个方式时,这个方法就是抽象方法.当一个类继承的父类是抽象类的话,需要我们把抽象类中的所有抽象方法全部实 ...
- SpringBoot项目自定义浏览器选项卡左上角图标(favicon.ico)-sunziren
favicon.ico是浏览器选项卡左上角的图标,可以放在静态资源路径下或者类路径下面.静态资源路径下的favicon.ico优先级高于类路径下的favicon.ico. 可以使用在线转换网站http ...
- MAC安装MacPorts 卡在“正在运行软件包脚本”的解决办法
MAC安装MacPorts 卡在"正在运行软件包脚本"的解决办法 点击右上角强制结束掉"安装器" 打开terminal, 输入命令"ps -ef | ...