一、昨日内容回顾

　　　　1.jquery位置信息

　　　　　　width() ..,innetWidth() .outWidth()

　　　　　　offset().top left

　　　　　　scrollTop

　　　　2.事件流 DOM2级　　　　　

　　　　　　（1）捕获阶段 （2）处于目标阶段 （3）冒泡
　　　　　　stopPropagation()
　　　　　　preventDefault()

　　　　3.常见事件　　　　　

//解决双击事件与单击事件冲突
click
dblclick
mouseover
mouseout
mouseenter
mouseleave
表单的实施监听内容输入
js中的oninput
form表单的submit jquery中的事件名
form表单的onsubmit 是js中的事件名
阻止默认事件 event.preventDefault()

　　　　4.常见事件对象属性

　　　　　　　event.target event.currentTarget

　　　　5.事件绑定

　　　　　　　bind()　　　

　　　　6.事件委托　　　　　　

事件代理，后来添加的元素要将事件绑定到页面存在的父辈元素中
$('.father').on('click','li',fn)
on()

　　　　7.设计模式，架构模式

　　　　　　　　mvc mtv mvvm

　　　　8.express的简单介绍

　　　　　　　　https://www.cnblogs.com/mq0036/p/5243312.html

　　　　9.nodejs服务器语言

二、今日内容总结

　　　　http://www.cnblogs.com/majj/p/9134922.html

　　　　1.jquery XmlHttpRequest

　　　　　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <button id="btn">请求</button>

    <script type="text/javascript" src="../jquery.js"></script>

    <script>

        //创建XMLHttpRequest对象

        var xhr = new XMLHttpRequest();

        console.log(xhr.readyState);

        //2.状态机 检测状态 0 1 2 3 4

        xhr.onreadystatechange=function(){

            console.log(xhr.readyState);

            console.log(xhr.status);

            if(xhr.readyState==4){

                console.log('请求成功！');

                var content = xhr.responseText;

                $('body').html(content);

            }

        }

        $('#btn').click(function(){

            xhr.open('get','http://localhost:8800/',true);

            // xhr.open('get','http://localhost:8800/course',true);

            xhr.send();

        });

    </script>

</body>

</html>

实例

　　　　2.jquery $.ajax({ })

三、预习和扩展

　　　1. DOM0和DOM2的简单区别，同样的操作DOM0会产生覆盖现象，DOM2不会。　　　

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

    <button id="btn">点击</button>

    <script type="text/javascript">

        oBtn = document.getElementById('btn');

        oBtn.onclick=function(){

            console.log('I m a DOM0 First!');

        }

        // 这个会覆盖第一个

                oBtn.onclick=function(){

            console.log('I m a DOM0 Second!');

        }

        oBtn.addEventListener('click',function(){

            console.log('I m a DOM2 First!');

        })

        oBtn.addEventListener('click',function(){

            console.log('I m a DOM2 Second!');

        })

    </script>

</body>

</html>

HTML

　　　2. HTTP中application/x-www-form-urlencoded字符说明

　　　　https://blog.csdn.net/qq_28702545/article/details/51719199

　　　　　

python全栈开发day50-jquery之ajax、XmlHttpRquest的更多相关文章

  1. python 全栈开发，Day99(作业讲解,DRF版本,DRF分页,DRF序列化进阶)

    昨日内容回顾 1. 为什么要做前后端分离? - 前后端交给不同的人来编写,职责划分明确. - API (IOS,安卓,PC,微信小程序...) - vue.js等框架编写前端时,会比之前写jQuery ...

  2. python全栈开发目录

    python全栈开发目录 Linux系列 python基础 前端~HTML~CSS~JavaScript~JQuery~Vue web框架们~Django~Flask~Tornado 数据库们~MyS ...

  3. Python全栈开发【面向对象进阶】

    Python全栈开发[面向对象进阶] 本节内容: isinstance(obj,cls)和issubclass(sub,super) 反射 __setattr__,__delattr__,__geta ...

  4. Python全栈开发【面向对象】

    Python全栈开发[面向对象] 本节内容: 三大编程范式 面向对象设计与面向对象编程 类和对象 静态属性.类方法.静态方法 类组合 继承 多态 封装 三大编程范式 三大编程范式: 1.面向过程编程 ...

  5. Python全栈开发【模块】

    Python全栈开发[模块] 本节内容: 模块介绍 time random os sys json & picle shelve XML hashlib ConfigParser loggin ...

  6. Python全栈开发【基础四】

    Python全栈开发[基础四] 本节内容: 匿名函数(lambda) 函数式编程(map,filter,reduce) 文件处理 迭代器 三元表达式 列表解析与生成器表达式 生成器 匿名函数 lamb ...

  7. Python全栈开发【基础三】

    Python全栈开发[基础三]  本节内容: 函数(全局与局部变量) 递归 内置函数 函数 一.定义和使用 函数最重要的是减少代码的重用性和增强代码可读性 def 函数名(参数): ... 函数体 . ...

  8. Python全栈开发【基础二】

    Python全栈开发[基础二] 本节内容: Python 运算符(算术运算.比较运算.赋值运算.逻辑运算.成员运算) 基本数据类型(数字.布尔值.字符串.列表.元组.字典) 其他(编码,range,f ...

  9. Python全栈开发【基础一】

    Python全栈开发[第一篇] 本节内容: Python 的种类 Python 的环境 Python 入门(解释器.编码.变量.input输入.if流程控制与缩进.while循环) if流程控制与wh ...

  10. python 全栈开发之路 day1

    python 全栈开发之路 day1   本节内容 计算机发展介绍 计算机硬件组成 计算机基本原理 计算机 计算机(computer)俗称电脑,是一种用于高速计算的电子计算机器,可以进行数值计算,又可 ...

随机推荐

  1. 致敬Python 2.7! 致敬unicode函数!

    致敬Python 2.7! 致敬unicode函数! 终于下定决心放弃python 2.7, 拥抱Python 3.x的阵营了. 因为老是被中文编码虐待, 受够了. 同时也把机器里的widows XP ...

  2. Elaticsearch 集群

    elasticsearch开源的搜索引擎:  ElasticSearch 个基于Lucene的搜索服务器:可以使用多节点的备份:集群设置: (类似是个数据库型.有索引有什么的).(lucene apa ...

  3. CSS之清除浮动(span/clearfix)

    一.问题描述 web网页设计中,在div元素中有时候常伴有图文结合的post组件.为了使得文本在图像周围环绕,那么需要对图像区域使用float浮动.如果不做清除浮动,则会出现如下结果: 图像比文本高, ...

  4. [SDOI2010]古代猪文 （欧拉，卢卡斯，中国剩余）

    [SDOI2010]古代猪文 \(solution:\) 这道题感觉综合性极强,用到了许多数论中的知识: 质因子,约数,组合数 欧拉定理 卢卡斯定理 中国剩余定理 首先我们读题,发现题目需要我们枚举k ...

  5. cetus系列~ cetus+mha

    一 简介:mha+cetus高可用架构二 环境  1 mysql 5.7 并行复制+GTID  2 cetus最新版  3 mha0.57二 安装  1 安装mha-rpm包  2 做免密认证  3 ...

  6. 解决ping 127.0.0.1 一般故障 问题

    ​故障如下图: 绕了好一大圈才发现是goupi防火墙搞的鬼,弄得我一些软件一直运行不了!!!!! 废话不多说,关了防火墙就行了:操作步骤如下图示 ​ 关闭之后,美滋滋: ​ ​

  7. 【libreoffice】libreoffice实现office转pdf、html、jpg等格式数据

    其实libreoffice有好多功能,完全可以替代office 1.windows下将word转为pdf 1  安装libreoffice 到官网下载后安装即可.https://donate.libr ...

  8. 【转】Python之文件读写

    [转]Python之文件读写 本节内容: I/O操作概述 文件读写实现原理与操作步骤 文件打开模式 Python文件操作步骤示例 Python文件读取相关方法 文件读写与字符编码 一.I/O操作概述 ...

  9. VS2013+Win10+opencv3.0配置（包括opencv2.4.10版本）

    在win下配置opencv3.0.0还是比较简单的,这里简单说一下配置过程:参考链接:http://blog.csdn.net/u010009145/article/details/50756751 ...

  10. [转]数据对齐对CPU的影响

    [转]http://www.cnblogs.com/wuzhenbo/archive/2012/06/05/2537465.html 1.前言 在IBM开发社区上发现一篇叫'Data alignmen ...