DOM编程艺术章12：一个简单的Ajax例子
大概入了JavaScript的门，现在要回过头恶补Ajax和json了，随手翻到dom编程艺术发现有一个适合回忆的例子，先抄录下来，引入对Ajax作用的大概印象，再去掰开了研究。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<form method="POST" action="submit.html">
<fieldset>
<div>
<label for="name">用户名：</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="password">密码: </label>
<input type="password" id="password" name="password">
</div>
<button type="submit" id="send">提交</button>
<button type="reset">重置</button>
</fieldset>
</form>
<p id="holder"></p>
<script async>
function submitWithAjax(){
var form1 = document.getElementsByTagName("form")[0];//获取第一个表单元素
var request = new XMLHttpRequest();//创建一个XHR对象，就不兼容IE了哈
var dataParts = [];//创建存储数据的数组
var element;
var holder = document.getElementById("holder");
// console.log(form1.elements.length);fieldset也算一个
for(var i = 0;i<form1.elements.length;i++){
element = form1.elements[i];
dataParts[i] = element.name + '=' + encodeURIComponent(element.value);
//收集名字和其编码后的值，保存起来
}
console.log(dataParts);
var data = dataParts.join("&");//把要发送的数据用&连接起来
// console.log(data);
request.open("POST",form1.getAttribute("action"),true);//使用POST请求
request.setRequestHeader('Content-type',"application/x-www-form-urlencoded");//必需，表明请求中包含URL编码的表单
request.onreadystatechanged = function(){
if(request.readyState == 4){
if(request.status == 200 || request.status == 0){
var matches = request.responseText.match(/<p>([\s\S]+)<\/p>/);
//match方法以正则表达式为参数，返回包含各种匹配结果的数组
//match[0]是responseText中与整个模式匹配的部分，即包括<p>,</p>在内的部分，
// 而[1]是其内部的部分（与捕获组中的模式匹配的部分）
if(matches.length > 0){//捕获（匹配）成功
holder.innerHTML = matches[1];
}else{
holder.innerHTML = "<p>出错了!</p>";
}
}else{
holder.innerHTML = "<p>"+request.responseText+"</p>";
}
}
};
request.send(data);
};
var send = document.getElementById("send");
window.onload= submitWithAjax;
// form1.onsubmit = function(){
// if(submitwithajax()) return false;} </script>
</body>
</html>
DOM编程艺术章12：一个简单的Ajax例子的更多相关文章
- dom编程艺术章12
function addLoadEvent(func){//添加事件函数 var oldonload = window.onload; if(typeof window.onload != 'func ...
- struts2框架下的一个简单的ajax例子
举个例子 jsp页面: <%@ page language="java" import="java.util.*" pageEncoding=" ...
- JavaScript DOM编程艺术（第2版）的简单总结
介绍 JavaScript DOM编程艺术(第2版)主要讲述了 JavaScript.DOM 和 HTML5 的基础知识,着重讲述了 DOM 编程,并通过几个实例演示了具有专业水准的网页开发. 下面介 ...
- JavaScript DOM编程艺术第一章：JavaScript简史
本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助, ...
- 《JavaScript Dom 编程艺术》读书笔记-第4章
我的前端入门第一本书是<JavaScript Dom 编程艺术>,网上查找资料发现前端的入门推荐书籍最受好评的就是这本和<JavaScript 高级程序设计>了.之所以先选这本 ...
- 《javascript dom编程艺术》笔记（一）——优雅降级、向后兼容、多个函数绑定onload函数
刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...
- Javascript DOM 编程艺术（第二版）读书笔记——基本语法
Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...
- 读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析
先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...
随机推荐
- vue---条件与循环语句
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name=& ...
- vue的渐进式理解
链接:https://www.zhihu.com/question/51907207/answer/136559185 渐进式代表的含义是:主张最少. 每个框架都不可避免会有自己的一些特点,从而会对使 ...
- CentOS6/7快捷使用gcc5
Centos6/7自带的gcc为4.x版本,可通过devtoolset工具集安装gcc5.x版本 1. 添加yum源 1)CentOS6 [hhorak-devtoolset--rebuild-boo ...
- Technical
CAN FD (CAN with Flexible Data-Rate) is an extension to the original CAN bus protocol specified in I ...
- 单机安装EFK（一）
官方文档:https://www.elastic.co/guide/en/elasticsearch/reference/current/getting-started-install.html#ge ...
- python列表生成式
在Python编程中,list列表应用的比较广泛,而列表生成式是一个非常强大但是使用很简单的功能. 比如要生成1到100的数组列表[1,2,3,4......,97,98,99,100],可以使用li ...
- 无需脑图 无需思维导图 看Word大纲视图
大纲视图可以帮助我们大纲视图可帮助您管理文档的结构和标题,就像现在的脑图,经过我的使用后,可以说Word的分级功能非常强大,只恨当时理解的不够,误会了Word. 当我们决定写一个文档的时候,第一步 ...
- 微服务与Spring Cloud资料
Microservices Using Spring Boot and Spring Cloud 微服务注册中心 Eureka 架构深入解读 50+ 顶级开源 Kubernetes 工具列表 Apol ...
- Linux期中架构
1 在构建完模板后 开启虚拟机后 需要再重启一次 以解决网卡不能看见的问题 ########################################add begin 2018-05 ...
- three.js:使用createMultiMaterialObject创建的多材质对象无法使用光线跟踪Raycaster选中
创建多材质对象: var loader = new THREE.DDSLoader(); var map = loader.load('../assets/textures/Mountains_arg ...