python全栈开发day50-jquery之ajax、XmlHttpRquest
一、昨日内容回顾
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的更多相关文章
- python 全栈开发，Day99(作业讲解,DRF版本,DRF分页,DRF序列化进阶)
昨日内容回顾 1. 为什么要做前后端分离? - 前后端交给不同的人来编写,职责划分明确. - API (IOS,安卓,PC,微信小程序...) - vue.js等框架编写前端时,会比之前写jQuery ...
- python全栈开发目录
python全栈开发目录 Linux系列 python基础 前端~HTML~CSS~JavaScript~JQuery~Vue web框架们~Django~Flask~Tornado 数据库们~MyS ...
- Python全栈开发【面向对象进阶】
Python全栈开发[面向对象进阶] 本节内容: isinstance(obj,cls)和issubclass(sub,super) 反射 __setattr__,__delattr__,__geta ...
- Python全栈开发【面向对象】
Python全栈开发[面向对象] 本节内容: 三大编程范式 面向对象设计与面向对象编程 类和对象 静态属性.类方法.静态方法 类组合 继承 多态 封装 三大编程范式 三大编程范式: 1.面向过程编程 ...
- Python全栈开发【模块】
Python全栈开发[模块] 本节内容: 模块介绍 time random os sys json & picle shelve XML hashlib ConfigParser loggin ...
- Python全栈开发【基础四】
Python全栈开发[基础四] 本节内容: 匿名函数(lambda) 函数式编程(map,filter,reduce) 文件处理 迭代器 三元表达式 列表解析与生成器表达式 生成器 匿名函数 lamb ...
- Python全栈开发【基础三】
Python全栈开发[基础三] 本节内容: 函数(全局与局部变量) 递归 内置函数 函数 一.定义和使用 函数最重要的是减少代码的重用性和增强代码可读性 def 函数名(参数): ... 函数体 . ...
- Python全栈开发【基础二】
Python全栈开发[基础二] 本节内容: Python 运算符(算术运算.比较运算.赋值运算.逻辑运算.成员运算) 基本数据类型(数字.布尔值.字符串.列表.元组.字典) 其他(编码,range,f ...
- Python全栈开发【基础一】
Python全栈开发[第一篇] 本节内容: Python 的种类 Python 的环境 Python 入门(解释器.编码.变量.input输入.if流程控制与缩进.while循环) if流程控制与wh ...
- python 全栈开发之路 day1
python 全栈开发之路 day1 本节内容 计算机发展介绍 计算机硬件组成 计算机基本原理 计算机 计算机(computer)俗称电脑,是一种用于高速计算的电子计算机器,可以进行数值计算,又可 ...
随机推荐
- 七、uboot 代码流程分析---C环境建立
7.1 start.S 修改 在上一节中的流程中,发现初始化的过程并没由设置看门狗,也未进行中断屏蔽 如果看门狗不禁用,会导致系统反复重启,因此需要在初始化的时候禁用看门狗:中断屏蔽保证启动过程中不出 ...
- angularjs指令中scope参数 true、false、{} 的区别详解
scope 有三个参数 true.false.{} scope 默认是 false,当 scope设置为true时,会从父作用域继承并创建一个新的作用域对象, 按照true .false的反向思维,我 ...
- 《深入理解java虚拟机》 第七章虚拟机类加载机制
第七章 虚拟机类加载机制 7.1概述 虚拟机把描述类的数据从Class文件加载到内存,并对数据进行检验.转换解析和初始化,最终形成可以被虚拟机直接使用的java类型,这就是虚拟机的类加载机制. 在 ...
- luogu P1641 [SCOI2010]生成字符串
传送门 代码极短 \(O(n^2)\)dp是设\(f_{i,j,k}\)表示前\(i\)位,放了\(j\)个1,后面还可以接着放\(k\)个0的方案,转移的话,如果放0,\(k\)就要减1,反之放了1 ...
- Java获取资源路径——（八）
获取文件资源有两种方式: 第一种是: 获取Java项目根目录开始制定文件夹下指定文件,不用类加载器(目录开始要加/) // 获取工程路径 System.out.println(System.getP ...
- 常用的4个eclipse插件安装过程及使用方法
最近整合了4个常用eclipse插件安装过程,分别是PMD.checkstyle.findbugs.sourcemonitor插件.因为我这里没有外网,所以所有的插件不是最新版,建议有网的童鞋自行在外 ...
- spring+activemq配置文件内容及实现原理
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- 利用mycat实现基于mysql5.5主从复制的读写分离
整体步骤: 1.准备好两台服务器,一台作为主数据库服务器,一台作为从服务器,并安装好mysql数据库,此处略 2.配置好主从同步 3.下载JDK配置mycat依赖的JAVA环境,mycat采用java ...
- Centos socket TCP代码
一.功能描述: 能够在Centos中创建TCP socket,实现Client给Server发送消息,Server能够Client发送消息. 二.代码如下: ①client代码: #include & ...
- linux网络设备驱动
Linux网络设备驱动 Linux网络驱动程序的体系结构可划分为4个层次.Linux内核源代码中提供了网络设备接口及以网络子系统的上层的代码,移植特定网络硬件的驱动程序的主要工作就是完成设备驱动功能层 ...