转换成数字类型:Number() parseInt() parseFloat() 参与运算
转换成字符串 :tostring() string() +""
转换成布尔类型: !! Boolean()
# 数组
创建数组的两种方式: (1)构造函数创建数组,(2)数组字面量创建数组
取值:数组名[下标] 存值:数组名[下标]=值
# 函数
声明与调用
1,函数声明的时候.函数体并不会执行,只有当函数被调用的时候才会执行.
2,函数一般都用来干一件事情,需要使用动词+名词例如:tellStory,调用函数:函数名();
返回值:函数是用来做一件事情的,如果我们需要这个函数给我们返回一个结果,需要return返回一个值;
函数的三要素: 函数名,参数,返回值.
声明函数的两种方式
命名函数 function 函数名(){} 可以先调用 再声明
匿名函数(函数表达式) function函数也是一种数据类型(复杂数据类型),也可以赋值给一个变量. 先声明 再调用. 匿名函数的好处,不用起名字是如果是只用一次的话.
return
函数名 ()就是调用的结果,其实就是返回值.
函数碰到return就结束了,后面的代码不执行.
函数只有一个返回值,如果需要多个值可以用数组.
# 作用域
预解析
提升函数的声明，不提升调用
先提升var，在提升function
提升变量的声明，不提升赋值
# 对象
是一系列相关地属性的集合,可以方便对变量和函数进行管理.
事物的特征在对象中用属性来表示,事物的行为在对象中用方法来表示.
创建对象的三种方法
通过对象字面量创建对象.优点:简洁,容易写.缺点:复用性差
通过Object构造函数创建了一个空对象.复用性差
自定义构造函数
查看对象类型:
1;typeof 只能判断基本数据类型
2:instanceof 判断对象的具体类型
3:constructor.name也可以获取到对象的具体类型.
构造函数:
是一种特殊的函数,主要用来在创建对象时初始化对象.构造函数用于创建一类对象,首字母要大写,要跟new一起使用才有意义.
new
会新建一个空的对象.这个对象的类型是new后面跟的函数名.
让this指向了这个对象.要个对象加属性和方法,只需要给this加.
返回这个对象.
操作对象的属性
.语法
[]语法 也叫关联数组语法,当属性名是一个字符串存储在变量中的时候,只能用关联数组的方式.
遍历对象 for(var i in obj){console.log(obj[i])}
值类型与引用类型
值类型:简单数据类型,基本数据类型,在存储时,变量中存储的是值本身,因此叫做值类型
引用类型:复杂数据类型,在存储时,变量存储的仅仅是地址(引用),因此叫做引用类型
Json对象
就是Javascript对象的原生格式,唯一的区别是属性名要用""引起来.
arguments对象
在每一个函数里面都自带了这个对象.函数调用的时候会把所有的实参都存起来,是一个伪数组
# 内置对象.
# String
indexof:获取某个字符串第一次出现的位置,如果没有,返回-1
lastindexof:从后面开始查找第一次出现的位置,如果没有,返回-1
trim();去除字符串两边的空格,内部空格不会去除
大小写转换:
toUpperCase：全部转换成大写字母
toLowerCase：全部转换成小写字母
字符串拼接与截取:
可以用concat，用法与数组一样，但是字符串拼串我们一般都用+
slice ：从start开始，end结束，并且取不到end。
substring ：从start开始，end结束，并且取不到end
substr ： ：从start开始，截取length个字符。(推荐)
字符串切割:
split:将字符串分割成数组（很常用）功能和数组的join正好相反。
字符串替换:
replace(searchValue, replaceValue);searchValue:需要替换的值 replaceValue:用来替换的值
# Array对象
array.join()数据转换
数组的增删操作:
array.pop();从数组的后面删除元素,返回删除的那个元素
array.push();从数组后面添加元素,返回新数组的length.
array.unshift();从数组的前面添加元素,返回新数组的长度.
array.shift();从数组的最前面删除元素,返回删除的那个元素
数组的翻转与排序:
array.reverse();翻转数组
array.sort();数组的排序,默认按照字母顺序排序
数组的拼接与截取
contact();数组合并,不会影响原来的数组,会返回一个新数组.
slice:数组切分.复制数组的一部分到一个新数组,并返回这个数组,原来的数组不受影响,包含begin,不包含end
splice:数组拼接.以新元素来替代旧元素.以此来修改数组的内容,常用于删除数组的某些项
start:开始位置删除,deleteCount:删除的个数 items:替换的内容
数组查找元素
indexOf 方法来查找某个元素第一次出现的位置,如果找不到,返回-1;
lastIndexOf()从数组后面开始查找数组中元素出现的位置,如果找不到,返回-1;
清空数组
array.splice(0,array.length);删除数组中的所有元素
array.length=0;直接修改数组的长度
array=[ ];将数组赋值为一个空数组
# Date对象
var date = new Date();//使用构造函数创建一个当前时间的对象
var year =date.fullyear();获取年份
var year =date.month()+1; 获取月份
var year =date.getDate();获取日期
getMilliseconds();//获取毫秒值
getSeconds();//获取秒
getMinutes();//获取分钟
getHours();//获取小时
时间戳:1970年1月1日00:00:00到现在过得时间秒
# Math对象
Math.PI
Math.max/min() ;最大值和最小值
Math.ceil();向上取整 Math.floor()向下取整 Math.round();四舍五入
Math.random();随机数
Math.abs();//求绝对值
Math.pow(num, power);//求num的power次方
Math.sqrt(num);//对num开平方
# 回调函数;把一个函数当成参数进行传递,我们把这个当成参数的函数叫做回调函数.
# 递归函数:自己调用自己的函数叫做递归函数.:要留出口
Document Object Model(Dom):
是操作html和xml的一套api(Application Programer Interface),
节点:dom把页面中所有的东西都封装成了一个个对象,我们把这些对象叫做节点;//标签节点,属性节点,文本节点,注释节点. 元素.标签节点.
console.log()以标签形式.console.dir();以对象的形式打印
# 找对象
通过类名来找 document.getElementsByClassname [0] 返回的永远是一个伪数组
通过标签来找 document.getElementsByTagName[0]
通过ID来找 document.getElementById
# 注册事件
事件源：触发事件的元素 事件名称：触发的事件名称 事件处理函数：触发事件时调用的函数
注册事件的实质:仅仅是对象的onclick绑定了一个函数.
a标签使用return false可以阻止a标签跳转
keyup 拿到最新值
keydown 拿到的是上一次的值
# 表单属性操作
布尔类型的属性 disabled selected checked 只要写了这个属性就生效
常见表单属性 disabled、type、value、checked,selected
自定义属性
getAttribute(name);
setAttribute(name, value);
removeAttribute(name);
# 标签内容
innerText 和innerhtml属性都是用来获取和设置标签的内容.
innerHTML:设置内容的时候，1. 会覆盖原来的内容 2. 标签能生效
innerText设置内容的时候，会对html标签进行转义。1. 会覆盖原来的内容， 2. 把标签当成文本用了。防止xss攻击
innerText 和innerhtml属性都是用来获取和设置标签的内容.
# 解决浏览器兼容性的处理
能力检测(常用)检测某个方法或者某个属性是否可用,如果可用就使用
代理检测 通过navigator,userAgent可以获取到浏览器的版本信息
怪癖检测
# javascript:void(0)的作用
javascript:是伪协议，表示url的内容通过javascript执行。
void(0)表示不作任何操作，这样会防止链接跳转到其他页面。
让页面不跳转，JavaScript:void(0)是最通用的方式。
# 节点:标签节点 文本节点 属性节点 注释节点
# 节点的常用属性:
nodeType:节点类型
nodeName 节点名称
nodeValue:节点值
#孩子节点
childNodes:获取所有的孩子节点(基本不用)
children:获取所有的子元素（用途很广泛）
firstElementChild //第一个子元素 有兼容性问题 可以封装一个兼容性方法
//lastElementChild //最后一个子元素 有兼容性问题 可以封装一个兼容性方法
#兄弟节点
nextSibling:下一个兄弟节点
nextElementSibling:下一个兄弟元素有兼容性问题
previousElementSibling
#父亲节点
parentNode:父节点 没有兼容性问题\
#克隆节点 cloneNode
var newNode = node.cloneNode(deep)参数：deep
- false：默认值：是浅复制，只会复制标签，节点本身，不会复制节点的孩子。
- true:深度复制，会复制标签，还会复制标签的所有内容 常用
#添加节点
appendChild作用：把newChild添加到parent的孩子的最后面。
insertBefore
语法：parent.insertBefore(newChild, refChild);refChild:添加到哪一个节点的前面。
# 创建节点
document.write(基本不用)如果页面已经加载完成了，你还是用document.write写内容的话，会把之前的页面给覆盖掉
innerHTML:创建节点的时候有一个特点，如果原来有内容的话，使用innerHTML会把原先的内容给干掉。 慎用：很容易出现效率问题。
createElement
语法：var element = document.createElement("tagName");
作用：在内存里面创建了一个节点
返回：一个元素
# 删除节点 parent.removeChild(child);
# 样式操作
标签有style属性,,dom对象也会有,而且dom的style属性是一个对象
style这个对象中属性值都是字符串格式
标签中style属性有哪些样式名，在style这个对象中就有对应的属性名。
标签中有一些属性带了-，比如background-color,到了style对象中，变成了驼峰命名法，backgroundColor（因为-在js中不是一个合法的标识符）
DOM中的style属性只能获取和设置行内样式，在类样式中定义的样式通过style获取不到。
Browser Object Model (BOM)
window对象是一个全局对象，也可以说是JavaScript中的顶级对象
像document、alert()、console.log()这些都是window的属性，其实BOM中基本所有的属性和方法都是属性window的。
所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法
window对象下的属性和方法调用的时候可以省略window
# 重谈this关键字
1.this在普通函数中指的是window对象
2.this在方法中，指定的调用这个方法的对象（对象本身）
3.this在构造函数中，this指向新创建的对象
4.this在事件中，指向事件源，即触发事件的对象。
# window.open\.close
语法：window.open(url, [name], [features(参数3：窗口的属性，指定窗口的大小)]);
_self:在当前窗口打开
_blank:在新的窗口打开
返回值：会返回刚刚创建的那个窗口，用于关闭
# window.onload:会在窗体加载完成后执行，通常我们称之为入口函数。
# location对象
location其实对应的就是浏览器中的地址栏。
location.href = “url”;
location.reload(true);//强制刷新，相当于ctrl+F5
# navigator.userAgent：浏览器版本
# history
后退：history.back(); history.go(-1);
前进：history.forward();history.go(1);
# screen对象
console.log(screen.width/height);//屏幕的宽度/高度
console.log(screen.availWidth/availHeight);//浏览器可占用的宽度/高度
定时器
# 延时定时器setTimeOut(callback, time);
参数1：回调函数，时间到了就会执行。
参数2：延时的时间
返回：定时器的id，用于清除
清除延时定时器:clearTimeOut(timerId)
#间歇定时器让定时器每隔一段时间就会执行一次，并且会一直执行，直到清除定时器为止.
语法：var intervalID = setInterval(func, delay);
参数1：重复执行的函数
参数2：每次延迟的毫秒数
返回：定时器的id，用于清除
清除间歇定时器:clearInterval(intervalID)
面向对象
是一种解决问题的思维方式，它的关注点是实现功能的一系列对象
# 面向对象的特性:
1.封装性:将功能的具体实现封装在对象内部，只对外界暴露指定的接口，外界在使用的时候，只需要关注接口如何使用，而不需要关心内部的具体实现！这就是封装！
2.继承性:一个对象没有一些属性和方法，另外一个对象有，拿过来使用，就是继承！
3.多态性:js没有多态性
# 创建对象的方法
1.字面量
2.构造函数
3.自定义构造函数
# 继承的方法:
1.混入式继承
var obj={
name:"wyh",
age:18
}
var obj1={}
for(var k in obj){
obj1[k]=obj[k]
}
console.log(obj1);
2. 对象继承
var obj1=obj;
console.log(obj1);
3.原型继承
3.1 使用混入的方式给原型添加属性和方法
function Dog(){
}
function Person () {}
3.2 直接将要继承的对象当作对象的原型
function Person () {}
var obj1={
name:"",
age:18
}
Person.prototype=obj1;
var obj=new Person();
4.经典继承
var obj1={
name:"",
age:18
}
var obj=new Person();
# 原型链
//使用原型解决构造函数问题
function Person(name, age){
this.name = name;
this.age = age;
}
Person.prototype.sayHi = function(){
console.log("你好");
};
//测试
var p = new Person("张三", 18);
var p1 = new Person("李四", 19);
console.log(p.sayHi == p1.sayHi); //输出true
# 原型的概念:
在构造函数被创建出来的时候，系统会自动的为构造函数创建并且关联一个空对象，这个对象就是原型
# 原型的作用:
原型是一个对象,这个对象中的所有的方法和属性都可以被和他关联的构造韩式所创建出来的所有的对象共享
#原型链:
对象都有原型，原型也是对象，所以原型也有原型，这样子就会形成一个原型组成的链式结构，称作原型链
# 原型的访问形式:构造函数.prototype 对象.__proto__(有兼容性的问题,不推荐使用)
# 原型的使用:
1.原型中一般会放一些需要被共享的内容,方法(行为)居多,属性一般不做共享
2.当使用对象访问某一个属性的时候,会先在对象自身进行查找，如果找到了就直接使用，如果没有找，就会去原型中进行查找
3.当使用对象为某个属性进行赋值操作的时候，不会去原型中查找，只会看对象自身有没有该属性，如果有，就将值修改，如果没有，就给该对象新增该属性！
4.当对构造函数的prototype属性赋值的时候，赋值之前创建的对象，和赋值之后创建的对象的原型会不一致！
# 作用域:
作用域说明的是一个变量可以在什么地方被使用，什么地方不能被使用。
# 词法作用域:
访问的变量，只和当前代码的声明结构有关，和具体的调用，运行没有任何的关系
只要声明的方式确定，那么访问的变量就确定了，这就是词法作用域的效果
# 块级作用域
# 闭包
什么是闭包？闭包的优缺点？
由于在javascript中，只有函数内部的子函数才能读取局部变量，所以说，闭包可以简单理解成“定义在一个函数内部的函数“。所以，在本质上，闭包是将函数内部和函数外部连接起来的桥梁。
# 闭包的用途
一个是前面提到的可以读取函数内部的变量.
一个就是让这些变量的值始终保持在内存中，不会在f1调用后被自动清除。
# 使用闭包的注意点
（1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
（2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
# 数组的高级方法
//forEach
//map 有返回值,数组
//every 所有的都要满足返回
//some 有一个满足返回
//filter
es6的相关规范
# let,const都可以用来声明变量,他们声明的变量都有块级作用域,不存在变量提升,const声明的变量不允许修改;
# 模板字符串
var obj = { name: "22", age: 20}var str = `我叫${obj.name}，我今年${obj.age}`;
# 箭头函数var func = (参数列表) => { 函数体 }
1. 参数列表如果只有一个参数，小括号可以省略
2. 函数体如果只有一句话，那么花括号可以省略
3. 函数体如果只有一句话并且这个句话是return语句的话， 花括号和return关键字都可以省略
注意事项
1.不能作为构造函数使用
2.没有自己的this,访问this的时候,会去外层作用域中查找
3.没有自己的arguments,访问arguments的时候,会去外层作用域中查找
# rest参数function test(...arr){}和arugments的区别：
1. rest参数是一个真数组，而arguments是伪数组
2. rest参数获取的可以是部分参数，而arguments获取的是全部的参数rest参数前面还可以声明其他的形参，但是rest参数必须是最后一个参数！
# promise
var p = new Promise(function(resolve, reject){
//如果执行的操作成功了，就通过resolve将当前promise标记为已完成（solved）
//resolve(data);
//如果执行的操作失败了，就通过reject将当前promise标记为已失败（rejected
//rejecte(data);
})
//想要在当前promise成功之后做一些事情
p.then(function(data){
})
//想要在当前promise失败之后做一些事情
p.catch(function(data){
})
//一组promise中只需要一个catch
# class创建对象
class Person{
//如果自己不写constructor js会默认生成一个空的constructor
//如果自己写了，会将空的constructor覆盖掉
constructor(){
//这个constructor其实就类似于我们之前自己写的构造函数
//this指的就是实例对象
this.key = value;
this.key1 = value1;
}
//要给对象添加方法，我们可以直接在class中进行书写
//这个写法，最终的方法其实是加入到当前类构造函数的原型中
func(){
}
//将test作为一个静态成员，也就是加给Person构造函数
//调用的时候直接 Person.test
static test(){
}
}
# class的继承
class Person{
constructor(){
this.name = "";
this.age = "";
}
func(){
}
}
class Student extends Person{
constructor(){
//在自己的constructor中必须先调用super 父类的构造函数
super();
}
}
# 属性和方法的简写
var name = "";
var obj = {name, //方法eat(){}};
结构赋值var arr = [1, [2, 3]]var [num1, [num2, num3]] = arr;var obj = { name: "", age: 18}var {name1: name, age1: age} = obj;
# export的用法
export default function(){}import anything from "不带.js文件路径"
export var num = 123;export function func(){}import {num, func} from "不带.js文件路径"
export var num = 123;export function func(){}import * as tools from "不带.js文件路径"
# webpack
是支持es6的模块的写法的，但是当前的浏览器不支持所以想要将用es6方式写的模块代码在浏览器运行起来，要先使用webpack进行打包
webpack将es6转换成es5
babel
es6的一个编译器，这个东西有自己的独立的运行功能 可以下载 babel-cli,来进行es6的代码转换工作！
babel+webpack
需要的内容
npm install babel-loader babel-core -D
配置loader (webpack.config.js)
module:{ l
oaders: [
{test: /.js$/,loader: 'babel-loader'}
]}
配置.babelrc (因为babel-core需要使用到这个配置文件)presets： babel在进行代码转换的时候，需要遵守一些规则，这些规则有现成的，babel-preset-es2015babel-preset-stage-0babel-preset-stage-1babel-preset-stage-2babel-preset-stage-3
上面的这些都不需要再用了，只需要一个即可babel-preset-env
需要先下载
npm install babel-preset-env -D
{ presets: [ "env" ]}
{ "presets": [ ["env", { "targets": { "browsers": ["last 2 versions", "safari >= 7"] } }] ]}``4. 执行webpack 进行打包即可！## webpack本地安装之后如何执行webpack官方推荐本地安装```shellnpm install webpack -D
本地安装之后如何运行
package.json中的scripts我们可以在package.json中的scripts属性中配置一些相应的shell命令
想要运行这些配置好的命令的时候，只需要 npm run 指令的名称
运行命令的时候，npm会自动启动一个shell，将这些命令内容作为shell脚本来使用， 这个shell的path中会自动加入我们当前项目中的 ./node_modules/.bin/
如果想要在本地安装后执行webpack
{ scripts: { "dev": "webpack" }}
直接`npm run dev
3.1 ajax问题
# 什么是ajax，为什么要使用Ajax（请谈一下你对Ajax的认识）
AJAX是“Asynchronous JavaScript and XML”的缩写。他是指一种创建交互式网页应用的网页开发技术。
# AJAX的工作原理
Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
Ajax其核心有JavaScript、XMLHTTPRequest、DOM对象组成，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。
# ajax请求和响应报文包括哪些东西?
请求主要包括请求行，请求头，请求体。
响应报文主要包括状态行，响应头，响应体。
Ajax包含下列技术：
基于web标准（standards-based presentation）XHTML+CSS的表示；
使用 DOM（Document Object Model）进行动态显示及交互；
使用 XML 和 XSLT 进行数据交换及相关操作；
使用 XMLHttpRequest 进行异步数据查询、检索；
使用 JavaScript 将所有的东西绑定在一起。
# 为什么要用ajax：
Ajax应用程序的优势在于：
通过异步模式，提升了用户体验
优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。
Ajax可以实现动态不刷新（局部刷新）,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。
# 请介绍一下XMLHTTPREQUEST对象？
Ajax的核心是JavaScript对象XmlHttpReques,一种支持异步请求的技术。XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。通过XMLHttpRequest对象，Web开发人员可以在页面加载以后进行页面的局部更新。
# Ajax技术体系的组成部分有哪些？
HTML，css，dom，xml，xmlHttpRequest，javascript
# AJAX应用和传统Web应用有什么不同？
在传统的Javascript编程中，如果想得到服务器端数据库或文件上的信息，或者发送客户端信息到服务器，需要建立一个HTML form然后GET或者POST数据到服务器端。用户需要点击”Submit”按钮来发送或者接受数据信息，然后等待服务器响应请求，页面重新加载。
因为服务器每次都会返回一个新的页面， 所以传统的web应用有可能很慢而且用户交互不友好。
使用AJAX技术， 就可以使Javascript通过XMLHttpRequest对象直接与服务器进行交互。通过HTTP Request， 一个web页面可以发送一个请求到web服务器并且接受web服务器返回的信息(不用重新加载页面)，展示给用户的还是同一个页面，用户感觉页面刷新，也看不到到Javascript后台进行的发送请求和接受响应。
# AJAX请求总共有多少种CALLBACK
Ajax请求总共有八种Callback
onSuccess
onFailure
onUninitialized
onLoading
onLoaded
onInteractive
onComplete
onException
# Ajax和javascript的区别？
javascript是一种在浏览器端执行的脚本语言，Ajax是一种创建交互式网页应用的开发技术 ，它是利用了一系列相关的技术其中就包括javascript。
在一般的web开发中，javascript是在浏览器端执行的，我们可以用javascript控制浏览器的行为和内容.在 Ajax应用中信息是如何在浏览器和服务器之间传递的通过XML数据或者字符串.
# 在浏览器端如何得到服务器端响应的XML数据
XMLHttpRequest对象的responseXMl属性
# XMLHttpRequest对象在IE和Firefox中创建方式有没有不同？
有，IE中通过new ActiveXObject()得到，Firefox中通过new XMLHttpRequest()得到
# 介绍一下XMLHttpRequest对象的常用方法和属性.
open(“method”,”URL”) 建立对服务器的调用，第一个参数是HTTP请求方式，可以为GET，POST或任何服务器所支持的您想调用的方式。
第二个参数是请求页面的URL。
send()方法，发送具体请求，为空时表示没有别的参数需要上传
abort()方法，停止当前请求
readyState属性请求的状态有5个可取值 0=未初始化 1=正在加载 2=已加载，3=交互中，4=完成
responseText 属性服务器的响应，表示为一个串
reponseXML 属性服务器的响应，在浏览器端得到服务器端相应的XML数据
status 服务器的HTTP状态码，200对应ok 400对应not found
# 什么是XMLExtensible Markup Language
XML是扩展标记语言，能够用一系列简单的标记描述数据
# xml的解析方式
常用的用dom解析和sax解析。dom解析是一次性读取xml文件并将其构造为DOM对象供程序使用，优点是操作方便，但是比较耗内存。Sax是按事件驱动的方式解析的，占用内存少，但是编程复杂。
# ajax的缺点
1、ajax不支持浏览器back按钮。
2、安全问题 AJAX暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。
5、不容易调试。
JSON
# 什么是 JSON ？
JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 是轻量级的文本数据交换格式
JSON 独立于语言 *
JSON 具有自我描述性，更易理解
JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。
JSON - 转换为 JavaScript 对象
JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。
由于这种相似性，无需解析器，JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象。
JSONP
# jsonp的原理
跨域请求被禁止的根本原因，在于同源策略，浏览器限制的其实是XMLHttpRequest对象，但是，通过在html中书写的某些标签的src属性。发送的类似的这种跨域的资源请求，是被浏览器允许的，所以我们可以利用这个特性，间接的实现跨域数据的ajax请求！
jsonp发送请求，其实就是动态的创建了一个script标签，让script帮忙进行ajax请求，请求回来的数据，是一个函数调用的语句，由于使用script标签请求的，所以这个请求回来的函数调用会直接被执行！ 我们提前在全局声明好这个函数，当请求成功的时候，数据就会自动传入这个函数，我们就可以在这个函数中做需要的操作了！
# http协议
协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则,HTTP协议，即超文本传输协议(Hypertext transfer protocol)。是一种详细规定了浏览器和服务器之间互相通信的规则，HTTP协议分为请求 和响应 两个部分组成
# 请求与请求报文
# 发送get请求
1,创建一个xXMLHttpRequest对象.
2.设置请求行请求的地址,需要在URL后面拼上参数列表 xhr.open("get","请求的地址name=hucc")
3设置请求头.浏览器会给get请求添加默认的请求头.
4.设置请求体 xhr.send(null);
# 发送post请求
post请求,设置请求行时,参数列表不能拼接到url后面
post必须设置请求头中的content-type为application/x-www-form-urlencoded
post请求需要将参数列表设置到请求体中.
# 获取响应
onreadystatechange事件
readystate:记录了XMLHttpRequest对象的当前状态
# 数据交互
ajax兼容性问题:IE5/6
# 同步与异步
同步: 指的就是事情要一件一件做。等做完前一件才能做后一件任务
异步: 不受当前任务的影响，两件事情同时进行，做一件事情时，不影响另一件事情的进行。
# formData管理表单数据
使用特点
实例化一个formData对象， new formData(form); form就是表单元素
formData对象可以直接作为 xhr.send(formData)的参数。注意此时数据是以二进制的形式进行传输。
formData有一个append方法，可以添加参数。formData.append("id", "1111");
这种方式只能以post形式传递，不需要设置请求头，浏览器会自动为我们设置一个合适的请求头。
# 同源
1995年,同源政策有Netscape公司引入浏览器.目前所有浏览器.目前,所有浏览器都实行这个政策.
# 同源策略:是指协议相同,域名相同,端口相同.
# 目的:为了保证用户信息的安全,防止恶意的网站窃取数据. 防止CSRF(跨站请求伪造).
# 限制范围:
如果非同源,1,Cookie.LocalStorage和IndexDB无法读取.
2,DOM无法获得.AJAX请求不能发送.
# 跨域
# JSONP(JSON with Padding):
script 标签是不受同源策略的限制的，它可以载入任意地方的 JavaScript 文件，而并不要求同源。类似的还有img和link标签
#cors(CRoss-origin resource sharing)
跨域资源共享可以向不同域名的服务器发出HTTP请求。前提是- 浏览器支持这个功能服务器必须允许这种跨域。
1. 浏览器会根据同源策略 查看是否是跨域请求，如果同源，直接发送ajax请求。
2. 如果非同源，说明是跨域请求，浏览器会自动发送一条请求（预检请求 ），并不会携带数据，服务器接受到请求之后，会返回请求头信息，浏览器查看返回的请求头信息中是否设置了header('Access-Control-Allow-Origin:请求源域名或者*');
3. 如果没有设置，说明服务器不允许使用cors跨域，那么浏览器不会发送真正的ajax请求。
4. 如果返回的响应头中设置了header('Access-Control-Allow-Origin:请求源域名或者*');,浏览器会跟请求头中的Origin: http://www.study.com进行对比，如果满足要求，则发送真正的ajax请求，否则不发送。
5. 结论：跨域行为是浏览器行为，是浏览器阻止了ajax行为。服务器与服务器之间是不存在跨域的问题的
# jsonp与cors的对比
jsonp兼容性好，老版本浏览器也支持，但是jsonp仅支持get请求，发送的数据量有限。使用麻烦
cors需要浏览器支持cors功能才行。但是使用简单，只要服务端设置允许跨域，对于客户端来说，跟普通的get、post请求并没有什么区别。
跨域的安全性问题：很多同学会觉得跨域能带来安全性问题，其实并不会，因为跨域是需要服务端配合的 ，也就是说不论jsonp还是cors，如果没有服务端的允许，浏览器是没法做到跨域的。
# 文件上传
以前，文件上传需要借助表单进行上传，但是表单上传是同步的，也就是说文件上传时，页面需要提交和
刷新，用户体验不友好，xhr2.0中的formData对象支持文件的异步上传。
显示文件进度信息
1. 需要注册 xhr.upload.onprogress = function(e){} 事件，用于监听文件上传的进度.注意：
需要在send之前注册。
2. 上传的进度信息会存储事件对象e中
3. e.loaded表示已上传的大小 e.total表示整个文件的大小
