Please enable JavaScript.
Coggle requires JavaScript to display documents.
javaScript 2 - Coggle Diagram
javaScript 2
Ajax
Ajax能够向服务器请求额外的数据而无须刷新页面
XMLHttpRequest对象
创建异步对象:var xmlHttp=new XMLHttpRequest()
给异步对象绑定事件:onreadystatechange:当异步对象发起请求,获取数据都会触发这个事件,这个事件需要指定一个函数,在函数中处理状态的变化。
例如xmlHttp.onreadystatechange=function(){处理请求的状态 if(xmlHttp.readyState==4&&xmlHttp.status==200){//可以处理服务器的数据,更新当前页面}
var data=xmlHttp.responseText;
document.getElementById("name".value=data;)
}
对象的属性:readyState属性,从0到4的变化
0:创建异步对象时:new XMLHttpResquest()
1:初始化异步对象xmlHttp.open()
参数:open(请求方式:get/post,"服务器端的访问地址"),同步或异步请求(默认是true,)
2,发送请求xmlHttp.send()
获取服务器端返回的数据,使用异步对象的属性:responseText
3.从服务器端获取数据,此时3是异步对象内部使用,获取了原始数据
4:异步对象把接收的数据处理完成后,此时开发人员在4的时候处理数据,更新当前页面
status属性
表示网络请求的状况:200,404,500
当status==200时,网络请求成功
GET请求
POST请求
XMLHttpRequest2级
FormData
表单数据的序列化
超时设定
timeout属性
overrideMimeType()方法
重写 XHR 响应的 MIME 类型
进度事件
load事件
prograss事件
会在浏览器接收新数据期间周期性地触发
异步的js和xml
事件
事件流
事件流描述的是从页面接收事件的顺序
事件冒泡
IE的事件流叫事件冒泡,事件开始时由最具体的元素(文档中嵌套层次最深
的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)
事件捕获
事件捕获的思想
是不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件
DOM事件流
事件捕获阶段、处于目标阶段和事件冒泡阶段
事件处理程序
响应某个事件的函数就叫事件处理程序(或事件侦听器)
HTML事件处理程序
DOM0级事件处理程序
将一个函数赋值给一个事件处理程序属性。
DOM2级事件处理程序
处理指定和删除事件处理程序的操作
addEventListener();removeEventListener()
事件就是用户或浏览器自生执行的某种动作
事件对象
event
事件类型
文本事件
键盘事件
keydown,keypress,keyup
滚轮事件
mousewheel,DOMMouseScroll
合成事件
鼠标事件
click,dblclick,mousedown,mouseenter,mouseleave,mousemove,mouseout,mouseover,mouseup
焦点事件
blur,focus
UI事件
load,unload,abort,error,select,resize,scroll
变动
变动事件是为 XML
或 HTML DOM 设计的,
高级技巧
高级函数
安全的类型检测
作用域安全的构造函数
惰性载入函数
函数绑定
函数柯里化
防篡改对象
不可扩展对象
密封的对象
冻结的对象
高级定时器
重复的定时器
setInterval()
Yielding Processes
函数节流
自定义事件
拖放
修缮拖动功能
添加自定义事件
JSON
JSON (JavaScript Object Notation)是一个轻量级的数据格式,可以简化表示复杂数据结构的工作量。关于 JSON,最重要的是要理解它是一种数据格式,不是一种编程语言。
但 JSON 并不从属于 JavaScript。而且,并不是只有 JavaScript 才使用 JSON
语法
简单值
JSON和JS对象的格式一样,只是JSON 字符串属性名必须使用双引号
最简单的 JSON 数据形式就是简单值
JSON的值不能是函数
JSON值有六种:字符串,数值,布尔值,null,对象,数组
对象
没有声明变量,没有末尾的分号,用{}
数组
JSON 数组采用的就是 JavaScript 中的数组字面量形式,用【】
JSON 数组也没有变量和分号
解析与序列化
JSON对象
JSON.stringify()(把javascript对象序列化为JSON字符串),JSON.parse()把JSON字符串解析为原生的JavaScript值
并返回
序列化选项
过滤结果
如果过滤器参数是数组,那么 JSON.stringify()的结果中将只包含数组中列出的属性。
字符串缩进
JSON.stringify()方法的第三个参数用于控制结果中的缩进和空白符
toJSON方法
返回其自身的 JSON 数据格式
解析选项
JS的对象只有自己认识,其他语言不认识;
JSON就是一个特殊格式的字符串,这个字符串可以被任何语言识别,并可以转换成任何语言的对象,JSON在开发中主要用来数据的交互
DOM扩展
选择符API
querySelector()
返回与该模式匹配的第一个元素
querySelectorAll()
matchesSelector()
元素遍历
childElementCount,firstElementChild,lastElementChild,previousElementSibling,nextElementSibling
HTML5
与类相关的补充
getElementByClassName()
使用这个方法可以更方便地为带有某些类的元素添加事件处理程序,从而不必再局限于使用 ID 或标
签名。
classList属性
HTML5 新增了一种操作类名的方式,可以让操作更简单也更安全
方法:add(value),contains(value),remove(value),toggle(value)
焦点管理
document.activeElement属性
元素获取焦点的方式
页面加载
用户输入
focus()