前言
本人发布的一系列资料都是学习备份使用，以及方便日后复习，随着技术的不断提升，每个文章都会持续添加内容，或者是扩展文章，本是秉承着分享的心态，互相学习，互相提升，也希望提出更好的意见，以及学习思路，欢迎留言，欢迎评论，谢谢！！
第一章 JavaScript简介
JavaScript的起源
JavaScript诞生于1995年，它的出现主要是用于处理网页中的前端验证。所谓的前端验证，就是指检查用户输入的内容是否符合一定的规则。比如：用户名的长度，密码的长度，邮箱的格式等。但是，有的同学可能会有疑问，这些验证，后端不也可以进行验证吗？确实，后端程序的确可以进行这些验证，但你要清楚，在1995年那个年代，网速是非常慢的，向后端发送一个请求，浏览器很久才能得到响应，那这无疑是一种非常不好的用户体验。
为了解决前端验证的问题，当时的浏览器巨头NetScape（网景）公司就开发出一种脚本语言，起初命名为LiveScript，后来由于SUN公司的介入更名为了JavaScript。但是你要清楚，Java和JavaScript是没有什么关系的，只不过当时Java非常流行，为了蹭热度，才将LiveScript更名为JavaScript，它们的关系就像雷锋和雷峰塔的关系一样，没啥关系。
但是，浏览器开发商不止网景一家，还有一个大家都知道的公司，微软公司，它们的主打产品是IE（Internet Explorer）浏览器，当网景公司的Netscape Navigator浏览器推出JavaScript语言时，微软就急了啊，好家伙，人网景都推出了专门用于前端验证的语言，不仅大大减少了后端程序的压力，还提高了用户的体验。我微软这么大的公司不也得整一个，在1996年，微软公司在其最新的IE3浏览器中引入了自己对JavaScript的实现JScript。
于是在市面上存在两个版本的JavaScript，一个网景公司的JavaScript和微软的JScript，虽然当时浏览器的巨头是网景，但是网景的浏览器是收费的，虽然微软的IE浏览器在全球的市场份额远远不及网景，但是微软的拳头产品是Windows操作系统，每一个操作系统都自带一个IE浏览器并且免费，那么，未来的发展大家可能也想到了，网景让微软给干倒闭了，1998年11月，网景被美国在线（AOL）收购。
老大哥就是老大哥，为了抢先获得规则制定权，网景最先将JavaScript作为草案提交给欧洲计算机制造商协会，也就是ECMA组织，希望能将JavaScript做成行业标准，最终在网景、SUN以及微软等公司的参与下，由一众程序员和相关组织人员组成的第39技术委员会也就是TC39发布了ECMA-262标准，这个标准定义了名为ECMAScript的全新脚本语言，为啥又来了个ECMAScript？
因为Java是SUN的商标，SUN授权了NetScape可以叫JavaScript，但是ECMA没有SUN的授权就不能叫JavaScript，哪怕NetScape成员特别希望ECMA把它叫做JavaScript，但是ECMA也有成员并不希望这个标准就叫JavaScript，总之经过几轮磋商和博弈，ECMAScript这个名字就定下来。
我们可以简单看一下历史事件发展表：
静态网页和动态网页
动态网页
我们有了html超文本标记语言实现了网站页面展现，展现文字、表格、图片、超链接等，有了css样式表实现了页面的美化，这些技术实现了静态网页。
日常展现是已经足够了，但是如果我们要做个注册功能呢？如论坛，我们注册个论坛来发文章，聊天。这就带来一个问题，信息如何根据不同的使用者，展现不同的内容呢？再如我注册登录和你注册登录，我们在网站上显示的登录名称就不同。这html+css就无能为力了，它们无法实现，那谁能办到呢？这时javascript就派上用场了。它能实现浏览器用户和后台服务器进行交互。注册、登录、添加商品到购物车、下订单对它而言都是小菜一碟。有了javascript的加入，实现页面和后台系统的交互，实现用户信息的注册，实现用户的登录，实现个性化的数据展现，功能强大不老少。业界把这样的网页称为动态网页，把这样的网站称为动态网站。
简而言之，静态网站只能看，不同浏览者看到内容一致不能变化；动态网站可以读写数据，内容根据不同浏览者展示不同的信息。
网页是如何和后端交互的呢？
动态网站的软件架构是怎样的呢？
用户访问页面，页面触发事件创建XHR对象，进行ajax请求，请求访问服务器端，请求被web中间件拦截并进行处理，由控制层框架springmvc中的controller进行接收，controller请求业务层spring框架的service服务，service请求持久层mybatis框架的mapper映射，mapper访问数据库。操作完数据库，返回结果，mybatis封装成java对象传回service，service把java对象传回controller，controller把java对象又转换为json字符串，然后传回浏览器，浏览器传回给调用者XHR，XHR调用回调方法callback，callback进行json字符串的解析，从中拿到要展现的数据，通过javascript处理，最终回显到页面上。
可以看到这个调用过程是非常复杂的，跨越网络，跨域多个服务器，很多技术应用其中，而这一切的始作俑者是谁呢？谁让这一切成为可能，它就是javascript，它实现了用户的请求和响应，实现了数据的动态展现，使早期静态的网站走向了动态的网站。
JS概述
什么是JS
JavaScript 是 web 前端开发者必学的三种语言之一：
- HTML 定义网页的内容 H5
- CSS 规定网页的布局 CSS3
- JavaScript 实现网站的交互 ES6
JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它们根本没有关系，java是强语言几乎无所不能，而javascript是脚本语言，只局限于浏览器。
JavaScript遵循ECMA国际组织颁布的ECMAScript标准。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript 的第六版，简称为ES6。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。很多js相关技术都遵循这个标准，如目前最受欢迎的Vue。
微软出了符合规范类似javascript的称为js，但一般开发者忽略它们的差异，全称就习惯叫javascript，简称就习惯叫js。
全称JavaScript，是一种弱类型语言，同其他语言一样，有它自身的语法，数据类型，表达式，算术运算符等。
JS是一门 基于对象 和 事件驱动 的 脚本语言 ，通常用来提高网页与用户的交互性。
名词解释
基于对象：它不仅可以创建对象,也能使用现有的对象。JS没有类的概念，也没有编译的过程。是一边解释一边执行。
事件驱动：在JS中，大部分情况下都是通过事件触发驱动函数执行的，从而实现特定的功能。（比如点击div将内容替换为时间、当鼠标滑过元素，元素就有翻转的动态。）
脚本语言：在网络前端开发环境下，用于嵌入在客户端浏览器中的一段小程序。
特点和优势
特点：
(1)JS是一门直译式的语言，直接执行的就是源代码.
是一边解释一边执行，没有编译的过程（不像Java需要提前编译为class文件再运行）.
(2)JS是一门弱类型的语言,没有严格的数据类型.
优势：
(1)良好的交互性
(2)一定的安全性(JS被强制的要求,不能访问浏览器以外的东西,只能访问浏览器和浏览器内部的资源)
(3)跨平台性(Java语言具有跨平台性,是因为有虚拟机)
只要有浏览器的地方都能执行JS
入门案例
<head>
<title>hello</title>
<meta charset="utf-8"/>
<script>/* JS代码 */
alert(100);
function fn(){
alert("111");
}
</script>
</head>
<body>
<a href="#" onclick="fn();">鼠标点击事件...</a>
</body>
HTML中引入JS
通过script标签引入JS代码
<head>
<meta charset="utf-8"/>
<script>/* JS代码 */
function fn(){
alert("JS的第1种引入方式");
}
</script>
</head>
<body>
<div id="div1" onclick="fn();">Hello JavaScript</div>
</body>
通过script标签引入外部的JS文件
创建1.js文件
function fn(){
alert("JS的第2种引入方式");
}
在html中引入文件
<head>
<meta charset="utf-8"/>
<script src="1.js"> </script>
</head>
<body>
<div id="div1" onclick="fn();">Hello JavaScript</div>
</body>
注意：不要同时通过一个script标签引入JS代码和JS文件，会导致代码不会执行！比如：
<script src="demo1.js">
alert("哈哈哈哈。。。");//代码不会执行！！
</script>
JS语法
注释
单行注释： //注释内容
多行注释： /* 注释内容 */
基本数据类型
包括:number/string/boolean/null/undefined
(1) 数值类型-number
在JS中，数值类型只有一种，就是浮点型。
在JS中，需要时会自动的进行数据类型的转换，比如：在显示和处理的时候，浮点型和整型会自动的转换。
2.4+3.6=6;
Infinity ： 正无穷大
-Infinity ： 负无穷大
NaN : Not a Number 非数字， 和任何值都不相等，包括它本身
(2) 字符串类型-string
在JS中，字符串是基本数据类型。
在JS中，字符串直接量是通过单引号或者双引号引起来。
var str1 = "Hello…";
var str2 = 'CGB2103…';;
alert(str1);
(3) 布尔类型-boolean
值为true或者是false；
var s1 = false;
console.log(s1);
(4) undefined
值只有一个就是undefined。表示变量没有初始化值。
比如：
a) var num; alert(num);//声明了变量但是没有为变量赋值，该变量的值就是undefined。
b) 或者访问一个对象上不存在的属性时，也是undefined。
c) 或者访问数组中一个没有的元素的位置时，该位置处的值也是undefined.
(5) null
值也只有一个，就是null。表示空值或者不存在的对象。
复杂数据类型
函数、数组、对象（自定义对象、内置对象、DOM对象、BOM对象…）
JS的变量
js是弱类型语言，所有类型的变量都是用var关键字定义。并且参数的类型可以随时转换。
javascript没有类似采用静态语言类型，如java的变量类型是编译期就确定的；而它采用了动态类型，也就是说在编译期类型不确定，运行时会动态根据变量的赋值来决定它的类型，这点比较灵活。这也是双刃剑，编译期就难以检查出其赋值的错误。
练习:变量交换
(1) 在JS中是通过 var 关键字来声明一个变量
var a=1; alert(a);
var x=true; alert(x);
var y=10.8; alert(y);
(2) 在JS中声明的变量是不区分类型的， 可以指向任意的数据类型。
var a = 1;
a=true;
a=100;
alert(a);//100
function x(){
var m = 10;
alert("局部变量:"+m);
alert("全局变量:"+a);
}
alert("局部变量2:"+m);//局部变量失效,报错
JS的运算符
JS中的运算符和Java中的运算符大致相同
算术运算符: +，-，*，/，%，++，–
赋值运算符: =，+=，-=，*=，/=，%=
比较运算符: ==，!=, =，!, > ，< ，>=，<=
位运算符: & ， |
逻辑运算符: &&，||
前置逻辑运算符: ! (not)
三元运算符: ? :
常见运算符测试
var a = 3;
var b = 1;
console.log(a+b);//4
a+=4;
console.log(a+b);//8
//a+=4;
console.log(a==b); //true
console.log(a==="3"); //false 如果两边比较的值不是同一种数据类型，===直接返回false，如果是同一种数据类型，==和===没有区别！
console.log("1"=="1"); //true //由于JS中字符串是基本数据类型，比较字符串相等通过 == 进行！
var a = 1;
alert(a++);//1
alert(++a);//3
alert(++a+a+++a);//4+4+5
alert(a>3?10:8);
var b = 10;
alert(a>b?a:b);//求两个数里的大数
var c = 8;
var d = a>b?(a>c?a:c):(b>c?b:c);
alert(d);//三个数里的大值
typeof运算符: 用于返回变量或者表达式 的数据类型
var i = 3;
console.log(typeof i);//number
i=true;
console.log(typeof i);//boolean
i="hello";
console.log(typeof i);//string
console.log(typeof 123+"abc");//numberabc
console.log(typeof (123+"abc"));//string
JS语句
JS中的语句和Java中的语句用法也大致相同
if…else语句
var i = 3;
if(i==4){
alert(“yes”);
}else{
alert(“no”);//no
}
例子: 接收用户输入的成绩，判断成绩所属的等级
80~100(包括80，也包括100) 优秀
60~80(包括60，但不包括80) 中等
0~60(包括0，但不包括60) 不及格
其他值 输入有误
// prompt函数可以弹框提示用户输入成绩, 并返回用户输入的内容
var score = prompt("请输入您的成绩：");
console.log( score );
if( score >= 80 && score <=100 ){
alert("您的成绩属于：优秀！");
}else if( score >= 60 && score < 80 ){
alert("您的成绩属于：中等！");
}else if( score >= 0 && score < 60 ){
alert("您的成绩属于：不及格！");
}else{
alert("您输入的成绩不合法，请重新输入！");
}
switch…case语句
var day = 3;
switch( day ){
case 1:
alert("今天是星期一");
break;
case 2:
alert("今天是星期二");
break;
case 3:
alert("今天是星期三");
break;
case 4:
alert("今天是星期四");
break;
case 5:
alert("今天是星期五");
break;
}
循环语句
for(var i=0;i<5;i++){
alert( i );
console.log(i);
}
var i=0;
while(i<5){
alert(i);
i++;
}
var sum = 0;
for( var i=1; i<=100; i++ ){
sum += i; //sum = sum+i;
}
console.log(sum );
//没有增强for循环
注意： JS中的语句，判断条件可以不是boolean类型，因为JS中会自动进行数据类型的转换。
JS数组
JS数组用于在单个的变量中存储多个值(其实就是一个容器)。
JS中的数组可以存储例如：数值、字符串、布尔值、undefined、null、对象、函数等
JS数组的声明方式
var arr1 = new Array();//声明一个空数组
var arr2 = new Array("abc", "hello", true);//声明一个具有初始值的数组
alert(arr2.length);//3
var arr4 = [];//声明一个空数组
alert(arr4.length);//0
arr4 = ["abc", "hello", true];//声明一个具有初始值的数组
alert(arr4);
数组需要注意的细节
(1)JS数组中可以存放任意的数据类型
(2)JS中的数组长度可以被改变
var arr1 = [];//声明一个空数组
console.log( arr1.length ); //此时数组长度为 0
arr1.length = 10;
console.log( arr1.length ); //此时数组长度为 10
arr1[99] = "abc";
console.log( arr1.length ); //此时数组长度为 100
arr1.length = 0;
console.log( arr1.length ); //此时数组长度为 0
数组的常见操作
length属性 -- 获取数组的长度，还可以改变数组的长度
var a = [1,2,3];
alert(a.length);
var arr = [123, "abc", false, new Object() ]
//遍历数组
for( var i=0; i< arr.length; i++ ){
console.log( arr[i] );
}
//for..in
for(var i in a){
console.log("i:::"+i);
}
//循环接收用户输入，将数据存储在数组中，直至输入‘exit’结束
c();
function c(){
var a=[];
for(;;){
var x=prompt("请输入整数:");
a[a.length]=x;
if(x=="exit"){
break;
}
}
console.log(a);
}
JS函数
函数就是一个具有功能的代码块, 可以反复调用
函数就是包裹在花括号中的代码块，前面使用了关键词 function
方式一：通过function关键字声明函数
声明：function 函数名称([参数列表]){ 函数体 }
调用: 函数名称([参数列表]);
案例：
function a(){ //无参函数定义
var a = [1,2,3,4,5]; //定义数组
var sum =0; //定义变量
for (var i = 0; i <a.length; i++) {
if(a[i]%2==0){
sum+=a[i];
}
}
alert(sum);
}
a();//函数调用
function b(x,y){//定义含参函数
alert(x+y);
}
b(1,"2");//函数调用
b(1,2);//函数调用
方式二：通过函数直接量声明函数
声明：var 函数名称 = function([参数列表]){ 函数体 }
调用: 函数名称([参数列表]);
案例：
// fn2(); //这种方式定义的函数还未加载就调用,会报错.方式1没问题
var fn2 = function(){ //定义无参函数
alert(100);
}
fn2(); //函数调用
var fn3 = function(x,y){ //定义含参函数
alert(x*y);
}
fn3(0.32,100);//函数调用
fn2("王海涛");参数个数不匹配，王海涛undefined
var e = function(x,y){ //定义有返回值含参函数
return x-y;
}
alert("函数返回值:::"+ e(1.1,10.9) ); //函数调用
注意: 在JS中调用函数时, 传递的参数个数如果与声明的参数个数不相同, 也不会报错。
但是最好按声明的个数来传递, 因为个数不符, 可能会引发一些问题！！！
JS对象
利用function关键字声明对象，用new关键字创建对象。
内置对象
String/Array/Number/Math/JSON…
Window对象–代表浏览器中一个打开的窗口,了解一下即可，很多被UI替代
window.onload() 在浏览器加载完整个html后立即执行!
window.alert("text") 提示信息会话框
window.confirm("text") 确认会话框
window.prompt("text") 键盘输入会话框
window.event 事件对象
window.document 文档对象
Document对象–代表整个HTML文档，可用来访问页面中的所有元素
document.write() 动态向页面写入内容
document.getElementById(id) 获得指定id值的元素
document.getElementsByName(name) 获得指定Name值的元素
学会简单使用，后期被jQuery封装，在后期被Vue框架封装
自定义对象
(1)方式一：
声明对象：function Person(){}
创建对象：var p1 = new Person();
设置属性：p1.name = “张飞”; p1.age = 18;
设置方法：p1.run = function(){ alert(this.name+" : "+this.age); }
访问p1对象：
/* 自定义对象*/
function Person(){ } /* 定义对象*/
var p1 = new Person(); /* 创建对象*/
p1.name="张三";
p1.age=20;
console.log(p1);
p1.say = function(){ /* 定义函数*/
console.log("haha");
}
p1.say(); /* 函数调用*/
上面展示了js的强大！js的牛掰之处就在于，它的属性可以边写边创建，非常灵活，而java不行，必须先定义。
上面展示了js的强大！js的牛掰之处就在于，它的属性可以边写边创建，非常灵活，而java不行，必须先定义。
(2)方式二:
var p2 = {
"pname":"李四",
"page":100,
"psay":function(){
/* this使用p2里定义的 */
console.log(this.pname+this.page);
}
}
console.log(p2);
p2.psay(); /* 函数调用*/
DOM树的作用
组成
- ECMAScript描述了javascript语言的语法和基本对象
- 文档对象模型DOM（Document Object Model）与HTML网页API接口
- 浏览器对象模型BOM（Browser Object Model），与浏览器进行交互的API接口
核心对象有：window浏览器窗口，navigator浏览器信息，location浏览器当前地址信息，history浏览器历史信息，screen用户屏幕信息。
DOM非常重要，实际开发更多通过js操作DOM对象实现对html页面的操作，BOM也用，比较少用。所以学习重点放在DOM上。
DOM树结构
DOM 是一项 W3C (World Wide Web Consortium) 标准，DOM（Document Object Model）文档对象模型为JS操作html文档所提供的一套API，通过这套API可以很方便的对html元素进行访问及增删改查操作。
Document对象
--获取对象: window.document
--调用方法:
getElementById("元素的id的属性的值")--返回1个元素
getElementsByName("元素的name属性的值")--返回多个元素(用数组)
getElementsByClassName("元素的class属性的值")--返回多个元素(用数组)
getElementsByTagName("元素的标签名的值")--返回多个元素(用数组)
write()--向文档写 HTML 表达式 或 JavaScript 代码
title--返回网页的标题
id--设置或返回元素的id
innerHTML--设置或返回元素的内容
dom.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM解析</title>
<!-- js -->
<script>
function a(){
/* 按id获取,返回1个 */
var x = document.getElementById("div1");
x.innerHTML="<h1>你好div</h1>";
/* 按name属性值获取,返回多个*/
var y = document.getElementsByName("div2");
console.log(y);//NodeList
y[0].innerHTML="hello js...";
/* 按class属性值获取,返回多个*/
var z = document.getElementsByClassName("span1");
console.log(z);//HTMLCollection
z[0].innerText="<p>我变了</p>"
/* 按照标签名获取,返回多个 */
var m = document.getElementsByTagName("div");
console.log(m);//HTMLCollection
m[1].style.fontSize=30+"px";
}
</script>
</head>
<body>
<div id="div1" onclick="a();">我是div1</div>
<div name="div2" onclick="a();">我是div2</div>
<span class="span1">我是span1</span>
<span class="span1">我是span2</span>
<a name="div2" id="a1">我是a</a>
<!-- js事件: -->
<a href="#" onclick="method();">单击触发js</a>
<a href="#" ondblclick="method2();">双击触发js</a>
<a href="#" onmouseenter="method3();">滑过触发js</a>
<a href="#" onmouseleave="method4();">滑走触发js</a>
<button onkeydown="alert(1);">点我</button>
</body>
</html>
总结
获取页面元素的4种方式:
- getElementsByTagName 标签名称，得到数组
- getElementsByName name属性，得到数组
- getElementsByClassName class属性，得到数组
- getElementById id属性，单个值
注：dom树在描述标签时除id方式，其它都是以数组形式体现，哪怕是一个元素
json
概念
ajax往往要完整应用还会配合一个技术：JSON，那什么是JSON呢？
JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON(JavaScript Object Notation，JS 对象简谱) 起名不咋地，非常拗口，我们就记住它是一种轻量级的数据交换格式即可。它基于 ECMAScript (js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。是xml的终结者，成为主流开发方式（ajax异步请求，json返回）。
作用
JSON 是存储和交换文本信息的语法。当数据在浏览器与服务器之间进行交换时，这些数据只能是文本。JSON 属于文本，并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器。我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。以这样的方式，我们能够把数据作为 JavaScript 对象来处理，无需复杂的解析和转译。
语法
JSON数据:
var a =' "firstName" : "John" '
JSON 对象:
var a = '{ "firstName":"John" , "lastName":"Doe" }'
JSON 数组:
var a = '[{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" }]';
转换工具
使用JS里的内置对象JSON.用来把以 JSON 格式写的字符串 和 原生 JavaScript 对象互转.
给服务器发送数据: 将JS对象转成JSON字符串 JSON.stringify(Js对象)
接受服务器的数据: JSON字符串转成JS对象 JSON.parse("json字符串")
测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>json</title>
<script>
//json用来在浏览器和服务器之间做数据传输,轻量级,格式简单明了.
//JSON是js的内置对象,用来把json类型的字符串和js对象互转
//json类型的字符串---{ "k1":"v1", "k2":"v2", "k3":"v3" }
function jschuan(){
var jsonchuan = '{ "k1":"v1", "k2":"v2", "k3":"v3" }';
document.getElementById("h").innerHTML=jsonchuan;
}
function chuan2js(){
var text='{ "k1":"v1", "k2":"v2", "k3":"v3" }';
console.log(text);
//从服务器收到的数据都是字符串,转成js对象,用js语法解析属性/方法
var jsobj = JSON.parse(text);//串转js对象,就可以写js代码解析数据
console.log(jsobj);
document.getElementById("d").innerHTML=jsobj.k2;
}
function js2chuan(){
var obj = {"k1":"v1", "k2":"v2", "k3":"v3"};
console.log(obj);
//把浏览器的数据发给服务器,服务器只要json串
var text = JSON.stringify(obj);//js对象转成串
document.getElementById("p1").innerHTML=text;
console.log(text);
console.log(text.length);
}
</script>
</head>
<body>
<p id="p1" onclick="js2chuan();">我是p</p>
<div id="d" onclick="chuan2js();">我是div</div>
<h1 id="h" onclick="jschuan();">我是h1哦</h1>
</body>
</html>
ajax
概述
AJAX = Asynchronous JavaScript And XML. AJAX 并非编程语言。
Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不需要重新加载整个页面。
原理
核心对象XMLHttpRequest
所有现代浏览器都支持 XMLHttpRequest 对象。
XMLHttpRequest 对象用于同幕后服务器交换数据。这意味着可以更新网页的部分，而不需要重新加载整个页面。
AJAX
AJAX概述
传统的web交互是用户触发一个http请求服务器，然后服务器收到之后，在做出响应到用户，并且返回一个新的页面，每当服务器处理客户端提交的请求时，客户都只能空闲等待，并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据，都要返回一个完整的HTML页，而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间，这导致了用户界面的响应比本地应用慢得多。
AJAX 的出现,刚好解决了传统方法的缺陷，AJAX 是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
AJAX的XMLHttpRequest对象
AJAX 的核心是 XMLHttpRequest 对象。 所有现代浏览器都支持 XMLHttpRequest 对象。
XMLHttpRequest 对象用于幕后同服务器交换数据，这意味着可以更新网页的部分，而不需要重新加载整个页面。
所有现代浏览器（Chrom、IE7+、Firefox、Safari 以及 Opera）都有内建的 XMLHttpRequest 对象。
创建 XMLHttpRequest 的语法是：
variable = new XMLHttpRequest();
老版本的 Internet Explorer（IE5 和 IE6）使用 ActiveX 对象：
variable = new ActiveXObject("Microsoft.XMLHTTP");
为了应对所有浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，创建 XMLHttpRequest 对象，如果不支持，则创建 ActiveX 对象：
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
但是需要注意的是，出于安全原因，现代浏览器不允许跨域访问，这意味着尝试加载的网页和 XML 文件都必须位于相同服务器上。
AJAX的XMLHttpRequest对象方法
6.3.4、AJAX的XMLHttpRequest对象属性
AJAX的GET请求
工程结构：
users.json
[
{"name":"孙悟空","age":18,"gender":"男"},
{"name":"猪八戒","age":19,"gender":"男"},
{"name":"唐僧","age":20,"gender":"男"},
{"name":"沙和尚","age":21,"gender":"男"}
]
index.html
//步骤一：创建异步对象
var ajax = new XMLHttpRequest();
//步骤二：设置请求的url参数，参数一是请求的类型，参数二是请求的url
ajax.open("get", "users.json");
//步骤三：发送请求
ajax.send();
//步骤四：注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 && ajax.status == 200) {
//步骤五：如果能够进到这个判断，说明数据完美的回来了，并且请求的页面是存在的
console.log(ajax.responseText);//输入响应的内容
}
};
控制台：
AJAX的POST请求
工程结构：
users.json
[
{"name":"孙悟空","age":18,"gender":"男"},
{"name":"猪八戒","age":19,"gender":"男"},
{"name":"唐僧","age":20,"gender":"男"},
{"name":"沙和尚","age":21,"gender":"男"}
]
index.html
//步骤一：创建异步对象
var ajax = new XMLHttpRequest();
//步骤二：设置请求的类型及url，注意：post请求一定要添加请求头才行不然会报错
ajax.open("post", "users.json");
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//步骤三：发送请求
ajax.send();
//步骤四：注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function () {
//步骤五：如果能够进到这个判断，说明数据完美的回来了，并且请求的页面是存在的
if (ajax.readyState == 4 && ajax.status == 200) {
console.log(ajax.responseText);//输入响应的内容
}
};
控制台：
AJAX的请求整合
工程结构：
users.json
[
{"name":"孙悟空","age":18,"gender":"男"},
{"name":"猪八戒","age":19,"gender":"男"},
{"name":"唐僧","age":20,"gender":"男"},
{"name":"沙和尚","age":21,"gender":"男"}
]
index.html
var Ajax = {
get: function (url, fn) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {
fn.call(this, xhr.responseText);
}
};
xhr.send();
},
post: function (url, data, fn) {
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
fn.call(this, xhr.responseText);
}
};
xhr.send(data);
}
};
// 演示GET请求
Ajax.get("users.json", function (response) {
console.log(response);
});
// 演示POST请求
Ajax.post("users.json", "", function (response) {
console.log(response);
});
控制台：
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
