大概入了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">密码:&nbsp;&nbsp;&nbsp;</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例子的更多相关文章

  1. dom编程艺术章12

    function addLoadEvent(func){//添加事件函数 var oldonload = window.onload; if(typeof window.onload != 'func ...

  2. struts2框架下的一个简单的ajax例子

    举个例子 jsp页面: <%@ page language="java" import="java.util.*" pageEncoding=" ...

  3. JavaScript DOM编程艺术（第2版）的简单总结

    介绍 JavaScript DOM编程艺术(第2版)主要讲述了 JavaScript.DOM 和 HTML5 的基础知识,着重讲述了 DOM 编程,并通过几个实例演示了具有专业水准的网页开发. 下面介 ...

  4. JavaScript DOM编程艺术第一章：JavaScript简史

    本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助, ...

  5. 《JavaScript Dom 编程艺术》读书笔记-第4章

    我的前端入门第一本书是<JavaScript Dom 编程艺术>,网上查找资料发现前端的入门推荐书籍最受好评的就是这本和<JavaScript 高级程序设计>了.之所以先选这本 ...

  6. 《javascript dom编程艺术》笔记（一）——优雅降级、向后兼容、多个函数绑定onload函数

    刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...

  7. Javascript DOM 编程艺术（第二版）读书笔记——基本语法

    Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...

  8. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  9. JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析

    先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...

随机推荐

  1. 2_PY基本数据类型

    python的数据类型和R差不多,但是需要注意的是字符访问方式与R不一样,另外,python中的“真”和“假”是True False(首字母大写). 1.字符串 字符串和R的定义差不多比如: data ...

  2. java--遇到NoSuchMethodError通用解决思路

    https://www.cnblogs.com/xiaoMzjm/p/4566672.html 最近接手新项目,项目一跑,NoSuchMethodError蹦出来了,好不容易解决了,换一个电脑,NoS ...

  3. 爬取网络图片到C盘存储的PermissionError: [Errno 13] Permission denied

    C盘根目录下不能拷进去文件,但可以新建文件夹的,“发生错误,操作被阻止,客户端没有所需的特权. 因为是系统目录,不要在里面拷贝文件,最好建立一个目录再放在里面. 硬要拷贝的话,可以使用管理员权限打开e ...

  4. c++ 调用 wmi 获取数据

    #define _WIN32_DCOM #include <iostream> using namespace std; #include <comdef.h> #includ ...

  5. Linux基础入门-文件系统操作与磁盘管理

    一.简单文件系统操作: df (-h) 查看磁盘容量: rootfs作为系统启动时内核载入内存之后,在挂载真正的磁盘之前的一个临时文件系统: /dev/sda2 对应主机硬盘的分区,后面的a表示第几块 ...

  6. DDS生成正弦波

    DDS生成正弦波 `timescale 1ns / 1ps ////////////////////////////////////////////////////////////////////// ...

  7. python基础知识15---三元表达式、列表推导式、生成器表达式、递归、匿名函数、内置函数

    阅读目录 一 三元表达式.列表推导式.生成器表达式 二 递归与二分法 三 匿名函数 四 内置函数 五 阶段性练习 一. 三元表达式.列表推导式.生成器表达式 1 三元表达式 name=input('姓 ...

  8. RDLC报表系列--------报表分页显示标题

    RDLC表格标题分页后,标题不显示网上的办法也不少.怎奈我试过很多,只有这个可以解决.留下代码以后使用 将报表以 XML的方式打开,搜索找到“详细信息” 在这个位置 报表分页标题设置<Tabli ...

  9. [转]C# 4.7.2 安装

    遇到提示 “无法建立到信任根颁发机构的证书链” 下载地址:https://files.cnblogs.com/files/z5337/NetFramework%E8%AF%81%E4%B9%A6.ra ...

  10. 持续更新scrapy的错误，ValueError: Missing scheme in request url:

    只需要将 for href in response.xpath('XX').extract(): yield Request(hrefs) 修改为下面,就可以显示出来 for href in resp ...