【无标题】

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	
<script>
	alert("aaaa");
	</script>
</head>

<body>
	<script>
	alert("asdad");
	</script>
</body>
</html>

（由整个代码由上至下的顺序执行）

（2）外部脚本

放置在 .js后缀的文件中，在HTML的<script>标签的src属性中引用

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	

</head>

<body>
	<script src="test1.js"></script>
</body>
</html>

优点：

分离了 HTML 和代码
使 HTML 和 JavaScript 更易于阅读和维护
已缓存的 JavaScript 文件可加速页面加载

1.2.JS的输出

（1）页面输出

document.write("xxxx");

(2)控制台输出

//test1.js
// JavaScript Document
console.log("输出日志");
console.info("输出信息");
console.error("输出错误");
console.warn("输出警告");

（3）弹出窗口输出

alert("警告框，弹出时点击确定才能继续")；

confirm("确认框，弹出时点击确定返回true，点击取消返回false")；

prompt("提示框，当提示框弹出时，用户输入值后单击“确定”或点击“取消”来继续进行。如果单击“确定”，该框返回输入值。如果用户单击“取消”，该框返回 NULL。")

1.3.JS的注释

//单行注释
/*
多
行
注
释
*/

第二部分---JS基础语法

2.1.标识符规范以及关键字

标识符规范：

第一个字符必须是一个字母、下划线（ _ ）或一个美元符号（ $ ）。
其它字符可以是字母、下划线、美元符号或数字。
按照惯例，ECMAScript 标识符采用驼峰命名法。
标识符不能是关键字

关键字：

2.2.变量定义及作用范围

（1）变量的声明

用var关键字来声明变量

var ss = 564;

也可以用逗号隔开用一个var声明多个变量并赋值：

var a = 1,b = 2,c = 3;

（2）变量的范围

全局变量：

全局（在函数之外）声明的变量拥有全局作用域，可以在 JavaScript 程序中的任何位置访问

局部变量：

在函数中声明，只能在当前函数内访问

（3）块作用域---var与let

在块{}内用var声明的变量可以在块外访问

而在块内用let声明的变量只能在{}范围内访问

（4）const定义变量

在块作用域中使用与let相似

const定义时必须同时声明且赋值

const定义对象时可以更改对象的属性值

const定义的数组可以更改和增加值，但不能重新赋值

2.3.数据类型

（1）数据类型：

字符串型（String）：使用 单引号 或 双引号 括起来
数组型
对象型
数值型（Number）
布尔型（Boolean）：真（true）和假（false）两种数值
undefined型（Undefined）：使用 var 声明变量但未对其加以初始化时，这个变量的值就是 undefined
null型（Null）：类型为对象，值与undefined相等

（在js中数组属于对象类型）

（2）数据类型之间的转换

转换为string类型：

tostring()方法（null和undefined两个值不可用）

// JavaScript Document
var a = 123;
a = a.toString();
alert(typeof(a));

string()方法

// JavaScript Document
var a = 123;
a = String(a);
alert(typeof(a));

在后面加 +""

// JavaScript Document
var a = 123;
a = a+"";
alert(typeof(a));

转化为number类型：

使用Number()方法

字符串转数字

// JavaScript Document
var a = "123";
a = Number(a);
alert(typeof(a));
//纯数字的字符串转化为纯数字


var b = "123abc"
b = Number(b);
alert(b)；
//如果字符串中有非数字的内容，则转换为NaN(好像会报错)


var c = " ";
c = Number(c);
alert(typeof(c)+c);
//空串或者空格字符串转化为0

使用parseInt和parseFloat：

把字符串分别转化为整数和浮点数

Boolean转数字

var a = true,b = false;
a = Number(a);
b = Number(b);
alert(typeof(a)+a+typeof(b)+b);
//true转化为1，false转化为0

null转数字：为0

undefined转数字：为NaN

转化为Boolean类型：

使用Boolean()函数
- 数字 —> 布尔
  - 除了0和NaN，其余的都是true
- 字符串 —> 布尔
  - 除了空串，其余的都是true
- null和undefined都会转换为false
- 对象也会转换为true

数组转字符串：join

字符串转数组：split

2.4.函数

（1）函数的创建

普通创建：

//函数的创建
//1。用函数声明来创建
function a (){
	alert(123);
}
a();
//2.用函数表达式来创建
var b = function(){
	alert(456);
}
b();

箭头函数：

标准格式：

hello = () => {
  return "Hello World!";
}

（2）函数的调用

当事件发生时（当用户点击按钮时）
当 JavaScript 代码调用时
自动的（自调用）
立即调用
函数在声明后立刻执行：
```
(function () {
  console.log("Chirp, chirp!");
})();
```
这是一个匿名函数表达式，立即执行并输出 Chirp, chirp!。

（3）函数的参数

arguments：

每个函数中都有一个名为arguments的内置对象

对象中是一个包含了该函数所有参数的数组。

如果函数参数较多并且不确定参数具体数量和值的情况下使用arguments对象

（4）函数的call方法

person2对象执行person的fullname方法

person.fullName.call(person2);

如果fullname方法有参数引入：

person.fullName.call(person1, "Seattle", "USA");

2.5.对象

（1）对象的创建

//对象的创建
//一般方法创建单个对象
var people = {
	name : "asd",
	age : 18
};


//创建多个对象：检查所有的people的类型都是Object类型对象，并不能指定
function createPeople(name,age){
var xx = new Object();
	xx.name = name;
	xx.age = age;
	return xx;
}
var people1 = createPeople(wwj,18);


//构造函数创建对象
function people(name,age){
	this.name = name;
	this.age = age;
}
var people2 = new people(wwj,18);
//people2的类型为people类型

（2）自有属性和原型属性

自有属性：

Bird 构造函数定义了两个属性：name 和 numLegs：

function Bird(name) {
  this.name = name;
  this.numLegs = 2;
}

let duck = new Bird("Donald");
let canary = new Bird("Tweety");

name 和 numLegs 被叫做自身属性，因为它们是直接在实例对象上定义的。这就意味着 duck 和 canary 这两个对象分别拥有这些属性的独立副本。

原型属性：
property（原型）

以上述为例

Bird.prototype

是专属于Bird的一个原型对象，它可以在所有的Bird的实例之间共享给它设置一个属性值如

Bird.prototype.numLegs = 2;

相当于给所有Bird的实例设置了属性和属性值

也可以将prototype直接设置为一个新对象：

Bird.prototype = {
  numLegs: 2, 
  eat: function() {
    console.log("nom nom nom");
  },
  describe: function() {
    console.log("My name is " + this.name);
  }
};

相关：

hasOwnProperty：

查看参数中的属性是否为该对象实例的自有属性，如果是则返回true，不是则返回false

对象实例.hasOwnProperty(属性名);

设置constructor

手动设置一个新对象的原型有一个重要的副作用。它清除了 constructor 属性！此属性可以用来检查是哪个构造函数创建了实例，这时候会发现用constructor来检查该对象是由哪个构造函数创建的结果是错误的，但是用instanceof来检查该对象实例结果则是正确的，

duck instanceof Bird;

所以总的来说，在手动更改或设置prototype之后，要在其中设置constructor属性，并赋上属性值为原构造函数。

继承

给子类型（或者子类）设置 prototype。这样一来，Bird 就是 Animal 的一个实例了。

Bird.prototype = Object.create(Animal.prototype);

请记住，prototype 类似于创建对象的“配方”。从某种意义上来说，Bird 对象的配方包含了 Animal 的所有关键“成分”。

let duck = new Bird("Donald");
duck.eat();

duck 继承了Animal 的所有属性，其中包括了 eat 方法

删除对象的属性：delete

delete 对象.属性名;

检查属性和遍历所有属性：

in与for in

in：与hasOwnProperty类似，只检查自有属性

'属性名' in 对象名;

for in：

for (let user in users) {
  console.log(user);
}

2.6.类

2.7.循环

2.8.正则表达

第三部分---JS常用对象

3.1数组对象

（1）数组的创建

//数组
//数组的创建
var array1 = [1,2,3,4,5];

var array2 = new Array(1,2,3,4,5);

（2）数组的方法


//数组的方法
//pop和push
var arr = [1,2,3,4,5];
arr.push(6);//在数组末尾增加，函数返回数组增加后的长度
arr.pop();//在数组末尾删除，函数返回数组删除的元素

//unshift和shift
arr.unshift(0);//在数组开头插入一个新元素，函数返回数组增加后的新长度
arr.shift();  //在数组开头删除一个元素，函数返回删除的元素

//slice和splice
var arr2 = arr.slice(1,3);//获得数组从下标1到3的元素，封装到一个新数组中返回，不会影响原数组（！！！包含1但不包含3）
var arr3 = arr.splice(1,3);//将数组下标从1开始删除3个元素，并返回删除元素
var arr4 = arr.splice(1,3,4);//将数组下标从1开始删除3个元素，并将4差入到开始元素处（1）；

//concat和join
var arr5 = arr.concat(arr2,arr3,arr4,56);//连接数组并返回新的数组
var arr5 = arr.join("");//join将数组的每个元素用参数中的字符连接在一起，若不带参数则默认为","

//sort和reverse
//sort() 方法以字母顺序对数组进行排序：*****按字符串顺序排序，对数值排序极易出错，出现25大于100的情况，因为2大于1
//返回一个比 0 小的值，那么 a 会在 b 的前面。 如果两个元素 a 和 b，compareFunction(a,b) 返回一个比 0 大的值，那么 b 会在 a 的前面。 如果两个元素 a 和 b，compareFunction(a,b) 返回等于 0 的值，那么 a 和 b 的位置保持不变。


var arr6 = [3,5,1,6,9,4,];
arr6.sort();
alert(arr6);
//添加比较函数使比较数值时不出错
arr6.sort(function(a,b){return b-a});


//reverse()方法反转数组中的元素：
arr6.reverse();
alert(arr6);


//forEach和map和filter
//forEach()回调函数，参数为一函数，为数组的每一个元素调用这个函数（在该数组的基础上改变）
arr6.forEach(arrfunction);
function arrfunction(value, index, array){          //该作为参数的函数可以有三个参数，分别为项目值，项目索引，和数组本身
	value = value+10;
}

//map与forEach类似，但对每个数组元素执行函数来创建新数组，不会改变原数组。
arr6.map(arrfunction2);
function arrfunction2(value,index,array){
	value = value + 10;
}


//filter和reduce
//filter创建一个包含通过测试的数组元素的新数组
var arr7 = arr6.filter(arrfunction3);
function arrfunction3(value,index,array){
	return value >7;//返回大于7的值到新数组arr7
}
//使用匿名的箭头函数
  arr6.filter(value=>{return value > 7;})



//reduce方法在每个数组元素上运行函数，以生成（减少它）单个值********reduce方法从左到右reduceright从右到左功能相同
var num = arr6.reduce(arrfunction4);
function arrfunction4(total, value, index, array){   //总数，项目值，项目索引，和数组本身
         return total + value;       //求数组的和
}


//some和every
//some只要有符合的就返回true，全都不符合返回false
var bo = arr6.some(arrfunction5);
function arrfunction5(value,index,array){
	return value >7;//若有大于7的值，返回true
}
//every数组中检测到有一个元素不满足，则整个表达式返回false，且剩余的元素不会再进行检测。如果所有元素都满足条件，则返回true
var bo2 = arr6.every(arrfunction5);
function arrfunction6(value,index,array){
	return value >7;//若所有值大于7，返回true，否则返回false
}


//indexOf和lastindexOf******lastindexOf类似与indexOf但是从结尾开始寻找
//返回寻找的值的索引
var indexNum = arr6.indexOf(12);

//find和findIndex
//find() 方法返回通过测试函数的第一个数组元素的值
var findnum = arr6.find(function7);
function function7(){
	return value >7;//寻找第一个大于7的值
}
//findIndex返回的是通过测试的第一个值的索引，与上面类似

3.2.date对象

var date = new Date();
console.log(date);

console.log(date.getFullYear());//获取当前日期对象的年份(四位数字年份)
console.log(date.getMonth());//获取当前日期对象的月份(0 ~ 11)
console.log(date.getDate());//获取当前日期对象的日数(1 ~ 31)
console.log(date.getHours());//获取当前日期对象的小时(0 ~ 23)
console.log(date.getMinutes());//获取当前日期对象的分钟(0 ~ 59)
console.log(date.getSeconds());//获取当前日期对象的秒钟(0 ~ 59)
console.log(date.getMilliseconds());//获取当前日期对象的毫秒(0 ~ 999)

3.3.math对象

/*固定值*/
console.log("PI = " + Math.PI);
console.log("E  = " + Math.E);
console.log("===============");
/*正数*/
console.log(Math.abs(1));        //可以用来计算一个数的绝对值
console.log(Math.ceil(1.1));     //可以对一个数进行向上取整，小数位只有有值就自动进1
console.log(Math.floor(1.99));   //可以对一个数进行向下取整，小数部分会被舍掉
console.log(Math.round(1.4));    //可以对一个数进行四舍五入取整
console.log("===============");
/*负数*/
console.log(Math.abs(-1));       //可以用来计算一个数的绝对值
console.log(Math.ceil(-1.1));    //可以对一个数进行向上取整，小数部分会被舍掉
console.log(Math.floor(-1.99));  //可以对一个数进行向下取整，小数位只有有值就自动进1
console.log(Math.round(-1.4));   //可以对一个数进行四舍五入取整
console.log("===============");
/*随机数*/
//Math.random()：可以用来生成一个0-1之间的随机数
//生成一个0-x之间的随机数：Math.round(Math.random()*x)
//生成一个x-y之间的随机数：Math.round(Math.random()*(y-x)+x)
console.log(Math.round(Math.random() * 10));            //生成一个0-10之间的随机数
console.log(Math.round(Math.random() * (10 - 1) + 1));  //生成一个1-10之间的随机数
console.log("===============");
/*数学运算*/
console.log(Math.pow(12, 3));   //Math.pow(x,y)：返回x的y次幂
console.log(Math.sqrt(4));      //Math.sqrt(x) ：返回x的平方根

3.4.string对象

（1）字符串属性

constructor属性：返回创建字符串对象的原型函数

var str = "Hello,World!";
console.log(str.constructor);

length属性演示：可以用来获取字符串的长度

var str = "Hello,World!";
console.log(str.length);

（2）字符串相关方法

charAt()方法：该方法可以根据索引获取指定位置的字符

var str = "Hello,World!";
console.log(str.charAt(1));

charCodeAt()方法演示：该方法获取指定位置字符的字符编码（Unicode编码）

var str = "Hello,World!";
console.log(str.charCodeAt(1));

concat()方法演示：该方法可以用来连接两个或多个字符串

var str = "Hello,World!";
console.log(str.concat("你好，", "世界！"));

indexof()方法演示：该方法可以检索一个字符串中是否含有指定内容，如果字符串中含有该内容，则会返回其第一次出现的索引，如果没有找到指定的内容，则返回-1，可以指定一个第二个参数，指定开始查找的位置

var str = "Hello,World!";
console.log(str.indexOf("o"));
console.log(str.indexOf("o", 5));

lastIndexOf()方法演示：该方法的用法和indexOf()一样，不同的是indexOf是从前往后找，而lastIndexOf是从后往前找，也可以指定开始查找的位置

var str = "Hello,World!";
console.log(str.lastIndexOf("o"));
console.log(str.lastIndexOf("o", 5));

slice()方法演示：可以从字符串中截取指定的内容，不会影响原字符串，而是将截取到内容返回

参数：

第一个参数：开始位置的索引（包括开始位置）
第二个参数：结束位置的索引（不包括结束位置），如果省略第二个参数，则会截取到后边所有的
注意：也可以传递一个负数作为参数，负数的话将会从后边计算

var str = "Hello,World!";
var result = str.slice(1, 4);
console.log(result);
result = str.slice(1);
console.log(result);
result = str.slice(1, -1);
console.log(result);

substring()方法演示：可以用来截取一个字符串，它和slice()类似

参数：

第一个参数：开始截取位置的索引（包括开始位置）
第二个参数：结束位置的索引（不包括结束位置），如果省略第二个参数，则会截取到后边所有的
注意：不同的是这个方法不能接受负值作为参数，如果传递了一个负值，则默认使用0，而且它还自动调整参数的位置，如果第二个参数小于第一个，则自动交换

var str = "Hello,World!";
var result = str.substring(1, 4);
console.log(result);
result = str.substring(1);
console.log(result);
result = str.substring(1, -1);
console.log(result);

substr()方法演示：该方法用来截取字符串

参数：

第一个参数：截取开始位置的索引
第二个参数：截取的长度

var str = "Hello,World!";
var result = str.substr(6, 6);
console.log(result);

split()方法演示：该方法可以将一个字符串拆分为一个数组，需要一个字符串作为参数，将会根据该字符串去拆分数组

var str = "Hello,World!";
var result = str.split(",");
console.log(result);

toUpperCase()方法演示：将一个字符串转换为大写并返回

var str = "Hello,World!";
var result = str.toUpperCase();
console.log(result);

toLowerCase()方法演示：将一个字符串转换为小写并返回

var str = "Hello,World!";
var result = str.toLowerCase();
console.log(result);

第四部分---DOM

4.1.DOM文档操作

（1）节点叙述

文档节点：整个HTML文档
元素节点：HTML文档中的HTML标签
属性节点：元素的属性
文本节点：HTML标签中的文本内容

（2）查找HTML元素

//查找HTML元素

//通过元素id
var test = document.getElementById("testId");
console.log(test);

//通过标签名
var test2 = document.getElementsByTagName("div");
console.log(test2);

//通过类名
var test3 = document.getElementsByClassName("testClass");
console.log(test3);

//通过css选择器
var test4 = document.querySelector("div h1");
console.log(test4);
//也可以用document.querySelectorAll选取全部（如ul和li的列表1）

（3）获取HTML相关值



//获取HTML属性值

//获取该元素内的HTML代码
alert(test.innerHTML);

//获取该元素的文本内容
alert(test4.innerText);

//获取该元素节点的属性
alert(test.id);
alert(test.getAttribute("id"));

//获取css属性值
alert(getComputedStyle(test,null)["width"]);

（4）改变HTML相关值


//改变HTML相关值

//改变元素节点的文本内容
test4.innerText = "678910";

//改变元素内的HTML代码
setTimeout(functionTimeout,5000);
function functionTimeout(){
	test.innerHTML = "<p>JQK</p>"
}

//改变元素的属性值    
setTimeout(functionTimeout2,2000);
function functionTimeout2(){
	
	document.getElementsByTagName("p").id= ("p.id");
	alert(document.getElementsByTagName("p").id);    //或者用setAttribute(attribute,value)
}

//改变元素的行内样式
setTimeout(functionTimeout3,2000);
function functionTimeout3(){
	test.style.width = "500px";
}

（5）修改HTML元素

4.2.DOM文档事件

（1）窗口事件

//窗体事件
//onblur当窗口失去焦点时运行脚本
window.onblur = function(){
	alert("窗体失去焦点");
};

//onfocus当窗口获得焦点时运行脚本
window.onfocus = function(){
	alert("窗体获得焦点");
};

//onload当文档加载之后运行脚本
window.onload = function(){
	alert("页面文档加载完毕");
};

//onresize当调整窗口大小时运行脚本
window.onresize = function(){
	alert("窗体大小改变");
};

（2）表单事件

表单事件在HTML表单中触发 (适用于所有 HTML 元素，但该HTML元素需在form表单内)：

属性	描述
onblur	当元素失去焦点时运行脚本。
onfocus	当元素获得焦点时运行脚本。
onchange	当元素改变时运行脚本。
oninput	当元素获得用户输入时运行脚本
oninvalid	当元素无效时运行脚本。
onselect	当选取元素时运行脚本。
onsubmit	当提交表单时运行脚本。

（3）键盘事件

通过键盘触发事件，类似用户的行为：

属性	描述
onkeydown	当按下按键时运行脚本。
onkeyup	当松开按键时运行脚本
onkeypress	当按下并松开按键时运行脚本

当键盘按下判断当前的按键是不是 a ，如果是就输出true，否则输出false：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    /* 当键盘按下判断当前的按键是不是 a ，如果是就输出true，否则输出false */
    window.onkeydown = function (event) {
        /* 解决兼容性问题 */
        event = event || window.event;

        if (event.keyCode == 65) {
            console.log("true");
        } else {
            console.log("false");
        }
    };
</script>
</body>
</html>

（4）鼠标事件

通过鼠标触发事件，类似用户的行为：

属性	描述
onclick	当单击鼠标时运行脚本
ondblclick	当双击鼠标时运行脚本
onmousedown	当按下鼠标按钮时运行脚本
onmouseup	当松开鼠标按钮时运行脚本
onmousemove	当鼠标指针移动时运行脚本
onmouseover	当鼠标指针移至元素之上时运行脚本，不可以阻止冒泡
onmouseout	当鼠标指针移出元素时运行脚本，不可以阻止冒泡
onmouseenter	当鼠标指针移至元素之上时运行脚本，可以阻止冒泡
onmouseleave	当鼠标指针移出元素时运行脚本，可以阻止冒泡
onmousewheel	当转动鼠标滚轮时运行脚本
onscroll	当滚动元素的滚动条时运行脚本

（5）媒体事件

属性描述
onabort   当发生中止事件时运行脚本。
oncanplay   当媒介能够开始播放但可能因缓冲而需要停止时运行脚本。
oncanplaythrough   当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本。
ondurationchange   当媒介长度改变时运行脚本。
onemptied   当媒介资源元素突然为空时（网络错误、加载错误等）运行脚本。
onended   当媒介已抵达结尾时运行脚本。
onerror   当在元素加载期间发生错误时运行脚本。
onloadeddata   当加载媒介数据时运行脚本。
onloadedmetadata   当媒介元素的持续时间以及其它媒介数据已加载时运行脚本。
onloadstart   当浏览器开始加载媒介数据时运行脚本。
onpause   当媒介数据暂停时运行脚本。
onplay   当媒介数据将要开始播放时运行脚本。
onplaying   当媒介数据已开始播放时运行脚本。
onprogress   当浏览器正在取媒介数据时运行脚本。
onratechange   当媒介数据的播放速率改变时运行脚本。
onreadystatechange   当就绪状态（ready-state）改变时运行脚本。
onseeked   当媒介元素的定位属性不再为真且定位已结束时运行脚本。
onseeking   当媒介元素的定位属性为真且定位已开始时运行脚本。
onstalled   当取回媒介数据过程中（延迟）存在错误时运行脚本。
onsuspend   当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本。
ontimeupdate   当媒介改变其播放位置时运行脚本。
onvolumechange   当媒介改变音量亦或当音量被设置为静音时运行脚本。
onwaiting   当媒介已停止播放但打算继续播放时运行脚本。

第五部分---AJAX

5.1.HTTP协议

http协议：超文本传输协议，详细规定了浏览器和万维网服务器之间相互通信的规则。

1.请求报文：
行请求类型 url路径或查询字符串 HTTP版本
头对请求体内容的属性描述格式：名字: 值（名字+冒号+空格+值）
空行空置
体

2.响应报文：
行 HTTP版本响应状态码响应状态字符串(HTTP/1.1 200 OK)
头对响应体内容的属性描述
空行
体 Json或xml值

5.2.XMLHttpRequest对象

（1）创建对象

 xmlhttp = new XMLHttpRequest();

（2）相关方法

方法	描述
new XMLHttpRequest()	创建新的 XMLHttpRequest 对象
abort()	取消当前请求
getAllResponseHeaders()	返回头部信息
getResponseHeader()	返回特定的头部信息
open(method,yrl,async,user,psw)	规定请求 method：请求类型 GET 或 POST url：文件位置 async：true（异步）或 false（同步） user：可选的用户名称 psw：可选的密码
send()	将请求发送到服务器端，用于GET请求
send()	将请求发送到服务器端，用于POST请求
setRequestHeader()	向要发送的报头添加标签和值对

（3）对象属性

属性	描述
onreadystatechange	定义当readyState属性发生变化时被调用的函数
readyState	保存XMLHttpRequest的状态。 0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪
responseText	以字符串返回响应数据
responseXML	以XML数据返回响应数据
status	返回请求的状态号 200: "OK" 403: "Forbidden" 404: "Not Found" Http 消息参考手册
statusText	返回状态文本比如“OK”或“Not Found”

5.3.AJAX应用的基本过程

（1）向服务端发送请求

方法	描述
open(method, url, async)	建立请求 method：请求的类型：GET 还是 POST url：服务器（文件）位置 async：true（异步）或 false（同步）
send()	发送请求（用于GET）
send(string)	发送请求（用于POST）

样例：

 <script>
    let xhttp = new XMLHttpRequest();
    

    //GET:
    xhttp.open("GET","test/test1.txt",true);
    xhttp.send();

    //POST:
    //通过 setRequestHeader() 添加一个 HTTP 头部。第一个参数为请求头部属性名称，第二个参数为值
    // 请在 send() 方法中规定您需要发送的数据
    xhttp.open("POST","test/test.txt",true);
    xhttp.setRequestHeader("Content-type","xxx");
    xhttp.send("fname=Bill&lname=Gates");

    </script>

异步 - true 还是 false？

如需异步发送请求，open() 方法的 async 参数必须设置为 true：

xhttp.open("GET", "ajax_test.asp", true);

发送异步请求对 web 开发人员来说是一个巨大的进步。服务器上执行的许多任务都非常耗时。在 AJAX 之前，此操作可能会导致应用程序挂起或停止。

通过异步发送，JavaScript 不必等待服务器响应，而是可以：

在等待服务器响应时执行其他脚本
当响应就绪时处理响应

onreadystatechange:

定义请求接受应答时所执行的函数

（在后一小节）

（2）AJEX服务器响应

在onreadystatechage:

在执行函数中查询请求状态值

属性

描述

readyState0

保存了请求的状态（即XMLHttpRequest的状态）

保存了 XMLHttpRequest 的状态。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 正在处理请求
4: 请求已完成且响应已就绪

status

200: "OK"
403: "Forbidden"
404: "Page not found"

如需完整列表，请访问 Http 消息参考手册

statusText

返回状态文本（例如 "OK" 或 "Not Found"）

示例：

loadDoc("url-1", myFunction1);

loadDoc("url-2", myFunction2);

function loadDoc(url, cFunction) {
  var xhttp;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      cFunction(this);
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}

function myFunction1(xhttp) {
  // 行动在这里
 } 
function myFunction2(xhttp) {
  // 行动在这里
 }

服务器响应的属性：

属性	描述
responseText	获取字符串形式的响应数据
responseXML	获取XML数据形式的响应数据

responseText：

document.getElementById("demo").innerHTML = xhttp.responseText;

responseXML：

xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
  txt += x[i].childNodes[0].nodeValue + "<br>";
  }
document.getElementById("demo").innerHTML = txt;
xhttp.open("GET",  "music_list.xml", true);
xhttp.send();

.xml文件内的格式与HTML格式相仿，从中取出不同不同标签的值，如上述示例，把XML返回值赋给变量xmlDoc，用xmlDoc.getElementsByTagName("标签名")即可获得其对应数组。

服务器响应的方法：

方法	描述
getResponseHeader()	从服务器返回特定的头部信息（在函数的参数里写响应的头部的属性名称）
getAllResponseHeader()	从服务器返回所有头部信息

有关Ajax的更多访问.php与.asp的内容访问：

.php ：AJAX PHP 实例 (w3school.com.cn)

.asp ：AJAX ASP 实例 (w3school.com.cn)