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 ...
随机推荐
- 广西Ukey登录需求
1.前端控制浏览器用户安装证书[1.检测,2,提示用户强制安装] JITComVCTK_S.exe 2.前端调用接口获取认证原文 3.对前端认证原文处理,提交请求到后端 摘算法处理后的认证原文 认证原 ...
- MySQL中的幻读，你真的理解吗？
昨天接到阿里的电话面试,对方问了一个在MySQL当中,什么是幻读.当时一脸懵逼,凭着印象和对方胡扯了几句.面试结束后,赶紧去查资料,才发现之前对幻读的理解完全错误.下面,我们就聊聊幻读. 要说幻读,就 ...
- 【爬虫】 爬虫请求json数据，返回乱码问题的解决
from django.http import JsonResponse from rest_framework.utils import json from utils import request ...
- springcloud vue.js 微服务 分布式 activiti工作流 前后分离 shiro权限 集成代码生成器
1.代码生成器: [正反双向](单表.主表.明细表.树形表,快速开发利器)freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本.处理类.service等完整模块2. ...
- Ream--(objc)写事务精简方案
Ream--(objc)写事务精简方案 地址: REALM-- Realm官方提供的的写事务有两种方式: A[realm beginWriteTransaction]; // ... [realm c ...
- centos docker redis 安装
1.下载redis镜像 docker pull redis 2.下载redis.conf文件 https://redis.io/topics/config 这边查找自己服务器redis对应的版本文件 ...
- jni和线程
JNI官方规范中文版——在程序中集成JVM需要注意的JNI特征 翻译 我们已经讨论了JNI在写本地代码和向本地应用程序中集成JVM时的特征.本章接下来的部分分介绍其它的JNI特征. 8.1 JNI和线 ...
- Java基础之三、类的特性和接口
类的派生.多态.抽象类.接口 1:派生-extends 派生就是继承已有类非私有的字段和方法等创建新的类,还可以添加.重写字段和方法: 在类的派生中,构造函数不可以被继承: 派生源的类-父类/基类/超 ...
- 嵌入式设备sqlite库移植和使用
1]官网下载sqlite-autoconf-3300100.tar.gz,网址https://www.sqlite.org/download.html,2]解压:tar zxvf sqlite-aut ...
- 折腾vue--vue自定义组件（三）
1.创建组件 demo.vue,内容如下: <template> <div> <input type="button" :value="n ...