javascript基础（内置对象、BOM、DOM、JSON、AJAX）

一、窗口交互

1、confirm 确认，confirm(显示内容)，返回布尔值。

function rec(){
     
    var mymessage= confirm("你是女士吗？")        ;
    if(mymessage==true)
    {
     
    	document.write("你是女士!");
    }
    else
    {
     
        document.write("你是男士!");
    }
  }    

2、prompt 提问，prompt(显示内容, 文本框值)，点确定，返回文本框内容；点取消，返回null。

var myname=prompt("请输入你的姓名:");
if(myname!=null)
  {
        alert("你好"+myname); }
else
  {
       alert("你好 my friend.");  }

二、流程控制

1、continue 跳过本次循环，整个循环体继续执行。
2、抛出异常
try 在执行时进行错误测试的代码。catch 当 try 代码发生错误时执行的代码。try 和 catch 成对出现。

var txt="";
function message()
{
     
try
  {
     
 	 adddlert("Welcome guest!");
  }
catch(err)
  {
     
	  txt="There was an error on this page.\n\n";
	  txt+="Error description: " + err.message + "\n\n";
	  txt+="Click OK to continue.\n\n";
	  alert(txt);
  }
}

throw 创建或抛出异常（exception）。
如果把 throw 与 try 和 catch 一起使用，那么就能够控制程序流，并生成自定义的错误消息。

//检测输入变量的值。若值是错误的，抛出一个异常。catch 捕捉到这个错误，并显示一段自定义的错误消息。若getElementById 函数出错，也会抛出一个错误。
function myFunction()
{
     
try
  {
     
	  var x=document.getElementById("demo").value;
	  if(x=="")    `throw "empty"`;
	  if(isNaN(x)) `throw "not a number"`;
	  if(x>10)     `throw "too high"`;
	  if(x<5)      `throw "too low"`;
  }
catch(err)
  {
     
	  var y=document.getElementById("mess");
	  y.innerHTML="Error: " + err + ".";
  }
}

其他基础语句就不写了。

三、js基础

1、数据类型
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。

2、转义字符

代码	输出
\n	换行
\r	回车
\t	tab(制表符)
\b	退格符
\f	换页符

3、运算符
JavaScript中的运算符是按照一个特定的顺序来求值的，这个顺序就是运算符的优先级。
在这里，我从高到低列出了这些运算符，处于同一行的运算符从左至右的顺序求值。

优先级	运算类型	运算符
20	圆括号	( … )
19	成员/字段访问	… . …
	需计算的成员访问/数组下标	… [ … ]
	new (带参数列表)	new … ( … )
	函数调用	… ( … )
18	new (无参数列表)	new …
17	后置递增(运算符在后)	… ++
	后置递减(运算符在后)	… - -

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

四、对象

1、对象是带有属性和方法的特殊数据类型。

//访问对象属性
_objectName_._propertyName_
_objectName_["_propertyName_"]

//访问对象方法
_objectName_._methodName_()

2、创建对象

//1、创建直接的实例，并向其添加四个属性
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";

//2、使用函数来构造对象
function person(firstname,lastname,age,eyecolor)
{
     
	this.firstname=firstname;
	this.lastname=lastname;
	this.age=age;
	this.eyecolor=eyecolor;
}
var myFather=new person("Bill","Gates",56,"blue");

//3、在构造器函数内部定义对象的方法
function person(firstname,lastname,age,eyecolor)
{
     
	this.firstname=firstname;
	this.lastname=lastname;
	this.age=age;
	this.eyecolor=eyecolor;
	
	this.changeName=changeName;
	function changeName(name)
	{
     
		this.lastname=name;
	}
}
var myFather=new person("Bill","Gates",56,"blue");
myMother.changeName("Ballmer");

3、for…in 遍历对象的属性，代码块将针对每个属性执行一次。

var person={
     fname:"Bill",lname:"Gates",age:56};

for (x in person)
  {
     
 	 txt=txt + person[x];
  }

4、作用域
在 JavaScript 中, 对象和函数同样也是变量。
在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。

4.1、局部作用域
变量在函数内声明，变量为局部作用域。
局部变量：只能在函数内部访问。
局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。
函数参数只在函数内起作用，是局部变量。

// 此处不能调用 carName 变量
function myFunction() {
     
    var carName = "Volvo";
    // 函数内可调用 carName 变量
}

4.2、全局作用域
变量在函数外定义，即为全局变量。
全局变量有 全局作用域: 网页中所有脚本和函数均可使用。

var carName = " Volvo";
 
// 此处可调用 carName 变量
function myFunction() {
     
    // 函数内可调用 carName 变量
}

如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。

// 此处可调用 carName 变量
 
function myFunction() {
     
    carName = "Volvo";
    // 此处可调用 carName 变量
}

4.3、JavaScript 变量生命周期
JavaScript 变量生命周期在它声明时初始化。
局部变量在函数执行完毕后销毁。
全局变量在页面关闭后销毁。

2.1、Date日期对象（一秒 =1000 毫秒）

getDay() 返回一周中的某一天 (0 ~ 6)。
getFullYear() 以四位数字返回年份。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getDate() 返回一个月中的某一天 (1 ~ 31)。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。

toDateString() 把 Date 对象的日期部分转换为字符串。
toLocaleDateString() 根据本地时间格式，把 Date 对象的日期部分转换为字符串。
toLocaleTimeString() 根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleString() 据本地时间格式，把 Date 对象转换为字符串。
toString() 把 Date 对象转换为字符串。
toTimeString() 把 Date 对象的时间部分转换为字符串。
toUTCString() 根据世界时，把 Date 对象转换为字符串。
toJSON() 以 JSON 数据格式返回日期字符串。

//设置特定日期
var myDate=new Date();
myDate.setFullYear(2010,0,14);

//设为 5 天后的日期
var myDate=new Date();
myDate.setDate(myDate.getDate()+5);

实例1、显示当前日期是星期几

function myFunction(){
     
  var mydate=new Date();
  var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
  document.write("今天是：" + weekday[mydate.getDay()]);
}

实例2、显示时间

function startTime(){
     
	var today=new Date();
	var h=today.getHours();
	var m=today.getMinutes();
	var s=today.getSeconds();// 在小于10的数字前加一个‘0’
	m=checkTime(m);
	s=checkTime(s);
	document.getElementById('txt').innerHTML=h+":"+m+":"+s;
	t=setTimeout(function(){
     startTime()},500);
}
function checkTime(i){
     
	if (i<10)  i="0" + i;
	return i;
}

2.2、Srting字符串对象（重要）

Object.length； 返回该字符串的长度。
Object.trim() ；去除字符串两边的空白
Object.repeat(count)；复制字符串指定次数，并将它们连接在一起返回
Object.toUpperCase() / toLowerCase()；： 大/小写转换。
Object.fromCharCode(str) 将 Unicode 编码转为字符。

Object.indexOf(子串[,开始检索的位置])；返回子串在字符串中首次出现的位置。无返回-1。
Object.lastIndexOf(子串[,开始检索的位置])； 从后向前搜索字符串，返回字符串最后出现的位置。

Object.includes(子串[,开始检索的位置]) 查找字符串中是否包含指定的子字符串，返回true/false。
Object.search(子串) 查找指定的子串/与正则表达式相匹配的子串，返回其所在起始位置，若无返回-1。
Object.startsWith(子串[,开始检索的位置]) 检测字符串是否以指定的子字符串开始，返回true/false
Object.match(regexp)在字符串内检索指定的值，找到的话，返回这个字符。

var str="The rain in SPAIN stays mainly in the plain"; 
var n=str.match(/ain/g); =>ain,ain,ain

Object.charAt(index)；返回指定位置的字符。
Object.charCodeAt(index)；返回在指定的位置的字符的 Unicode 编码。
Object.split(指定位置,[,分割次数])将字符串分割为字符串数组，并返回此数组。
Object.substring(起始位[,结束位-1])；提取子符串，起始位负数忽略，从头数
Object.slice(起始位[,结束位-1]) 提取字符串，起始位负数从后数。
Object.substr(起始位,长度)；提取指定数目的字符。若起始位是负数，从字符串的尾部开始算起的位置。

Object.concat(string1, string2, …, stringX) 连接两个或多个字符串，返回新字符串。
Object.replace(旧值,新值) 替换。默认只替换第一个，全局替换 /旧值/g

var str = 'abcadeacf';
var str1 = str.replace('a', 'o');
alert(str1);  
 
// 打印结果： obcadeacf
 
var str2 = str.replace(/a/g, 'o');//g是重点，如果替换的为‘/’，需要转义，吧/a/g替换为'/\//g'
alert(str2);  
 
//打印结果： obcodeocf,

2.3、Math 算数对象

Math.ceil(x)；向上取整（返回大于或等于x，且与x最接近的整数）。
Math.floor(x)；向下取整。
Math.round(x)；四舍五入取整。
Math.random()；返回介于 0 ~ 1（大于或等于 0 但小于 1 )之间的一个随机数

Math.pow(x,y)；返回 x 的 y 次幂。
Math.sqrt(x)；返回x的平方根。
Math.max()/min(数1，数2)； 返回两个给定的数中的较大/小的数。

2.4、Array 数组对象

Array.isArray(obj)；判断一个对象是否为数组，返回 true/false。
Object.forEach() ；遍历数组。
Object.reverse()；颠倒数组元素顺序。

Object.concat(array1,array2,…,arrayN)；连接多个数组，返回一个新数组。
Object.join(分隔符)；把数组中的所有元素放入一个字符串，通过指定的分隔符分隔（变字符串）。

Object.slice(起始位[,结束位-1])；从已有的数组中返回选定的元素。

Object.copyWithin(复制到哪位, 复制起始位, 复制结束位)；从数组的指定位拷贝元素到数组的另一指定位。
Object.fill(value, start, end)；将一个固定值替换数组的元素。

Object.sort(函数)；排序。若不指定<方法函数>，则按unicode码顺序排列。

  function sortNum(a,b) {
     
      return a - b;//升序，如降序，把“a - b”该成“b - a”
  }
 var myarr = new Array("80","16","50","6","100","1");
  document.write(myarr.sort(sortNum));

Object.filter(函数)；返回一个新数组，其元素是指定数组中符合条件的元素。
Object.every()；检测数组中的元素是否都符合指定条件（通过函数提供），返回true/false。
Object.some()；用于检测数组中的元素是否满足指定条件（函数提供），返回 true/false。
Object.find()；返回通过测试（函数内判断）的数组的第一个元素的值。
Object.findIndex() ；返回通过测试（函数内判断）的数组第一个元素位置。

Object.includes() ；判断一个数组是否包含一个指定的值，返回 true/false。
Object.indexOf(指定元素[,开始检索的位置]))；返回数组中某个指定的元素位置，无返回-1。
Object.lastIndexOf()；搜索数组中的元素，并返回它最后出现的位置，无返回-1。

Object.map(函数)；返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值；

var numbers = [4, 9, 16, 25];

function myFunction() {
     
    x = document.getElementById("demo")
    x.innerHTML = numbers.map(Math.sqrt);    //2,3,4,5
}

Object.reduce(函数)；接收一个函数作为累加器，将数组最终计算为一个值。

Object.pop()；删除数组的最后一个元素并返回处理后的数组（被删值？）。
Object.push()；向数组的末尾添加一个或更多元素，并返回处理后的数组（新的长度？）。
Object.shift()；把数组的第一个元素删除，并返回被删的值。
Object.unshift()；向数组的开头添加一个或更多元素，并返回处理后的数组（新的长度？）。
Object…splice(添加、删除位 [,删除个数 ][,添加项1,…,添加项X])；于添加或删除数组中的元素。若删除了元素，则被删元素的数组。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi");   //Banana,Orange,Lemon,Kiwi,Apple,Mango

fruits.splice(2,0);//删除0个，返回空数组

2.5、Number 对象

Object.toExponential()；把对象的值转换成指数计数法。
Object.toFixed(x)；把数字转换为字符串，把 Number 四舍五入为指定小数位数的数字。
Object.toPrecision(x)；把数字格式化为指定的长度。
Number.isInteger(obj)；判断给定的参数是否为整数。

2.6、RegExp 对象，规定在文本中检索的内容

Object.test();：检索字符串中的指定值。返回值是 true 或 false。

var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));  // true

Object.exec();：检索字符串中的指定值。返回值是被找到的值。若无则返回 null。

var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free")); //e

全局检索，使用 “g” 参数 (“global”)

var patt1=new RegExp("e","g");
do
{
     
	result=patt1.exec("The best things in life are free");
	document.write(result);
}
while (result!=null)   //eeeeeenull

compile() 既可以改变检索模式，也可以添加或删除第二个参数。

var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));  //true
patt1.compile("d");
document.write(patt1.test("The best things in life are free"));  //false

五、浏览器对象BOM

4.1、window对象

4.1.1属性：

innerHeight 返回窗口的文档显示区的高度。
innerWidth 返回窗口的文档显示区的宽度。
outerHeight 返回窗口的外部高度，包含工具条与滚动条。
outerWidth 返回窗口的外部宽度，包含工具条与滚动条。
pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
screenLeft 返回相对于屏幕窗口的x坐标
screenTop 返回相对于屏幕窗口的y坐标
screenX 返回相对于屏幕窗口的x坐标

4.1.2浏览器存储：

sessionStorage 在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。
localStorage 在浏览器中存储 key/value 对。没有过期时间。
cookie 存储于访问者的计算机中的变量，当同一台计算机通过浏览器请求某个页面时，就会发送这个cookie，识别用户。
ps：escape() 函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。
unescape()对通过 escape() 编码的字符串 进行解码。

//1、创建一个存储访问者名字的 cookie
function setCookie(c_name,value,expiredays)// cookie名、值以及过期天数
{
     
	var exdate=new Date();
	exdate.setDate(exdate.getDate()+expiredays);//将天数转换为有效的日期
	//将 cookie名、值及其过期日期存入cookie。
	document.cookie= c_name+ "=" +escape(value)+( (expiredays==null) ? "" : ";expires="+exdate.toGMTString() );
}
//2、检查是否已设置 cookie
function getCookie(c_name)
{
     
	if (document.cookie.length>0)
	  {
     
		  c_start=document.cookie.indexOf(c_name + "=")
		  if (c_start!=-1)
		    {
     
			    c_start=c_start + c_name.length+1
			    c_end=document.cookie.indexOf(";",c_start)
			    if (c_end==-1) c_end=document.cookie.length
			    return unescape(document.cookie.substring(c_start,c_end))
		    }
	  }
	return ""
}
//3、如果 cookie 已设置，则显示欢迎词，否则显示提示框来要求用户输入名字。
function checkCookie()
{
     
	username=getCookie('username')
	if (username!=null && username!="")
	  {
     alert('Welcome again '+username+'!')}
	else
	  {
     
		  username=prompt('Please enter your name:',"")
		  if (username!=null && username!="")
		    {
     setCookie('username',username,365) }
	  }
}

checkCookie()；

4.1.3、计时器：

setInterval()；每隔指定的时间执行
setTimeout()；在指定时间后执行。
clearInterval()；取消由 setInterval() 设置的 timeout。
clearTimeout()；取消由 setTimeout() 方法设置的 timeout。

1、
function myFunction() {
     
    var myVar = setInterval(alertFunc, 3000);
}
 
function alertFunc() {
     
    alert("Hello!");
}
2、setInterval(function(){
      alert("Hello"); }, 3000);
3、setInterval('alert("Hello");', 3000);

4.1.4、开启/关闭窗口

window.resizeTo(width,height)；把窗口的大小调整到指定的宽度和高度。
window.scrollTo(x,y) ；把内容滚动到指定的坐标。

window.open([URL], [窗口名称], [参数字符串])打开窗口
特殊窗口名：_blank：新窗口显示， _self：当前窗口显示，_top：框架网页中在上部窗口中显示目标网页
参数：width，height，left，top，menubar菜单，toolbar工具条， status状态栏，scrollbars滚动条。

 window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')

window.close()关闭窗口

window.close();   //关闭本窗口

//关闭指定窗口
 var mywin=window.open('http://www.imooc.com'); 
 mywin.close();

4.2、History 对象，包含用户（在浏览器窗口中）访问过的 URL。可通过window.history进行访问。

**window.history.back() 加载历史列表中的前一个 URL。
window.history.forward() 加载历史列表中的下一个 URL。
window.history.go()；加载历史列表中的某个具体页面。**该参数可以是数字（-1上一个页面，1前进一个页面)。或一个字符串，字符串必须是局部或完整的URL，该函数会去匹配字符串的第一个URL。

4.3、location对象，用于获取或设置窗体的URL。

4.3.1、属性：

hash 返回一个URL的锚部分（从 # 号开始的部分）。
host 返回一个URL的主机名和端口（eg:mp.csdn.net,www.runoob.com,www.imooc.com）
hostname 返回URL的主机域名
href 返回完整的URL
pathname 返回当前页面的路径和文件名。(主机名和端口后的部分：/index.html)
port 返回一个URL服务器使用的端口号（eg:80,443）
protocol 返回一个URL协议（eg:https,http）
search 返回一个URL的查询部分（eg:?id=1）

4.3.2、方法：

window.location.assign(url)；载入一个新的文档
window.location.reload()；重新载入当前文档
window.location.replace()；用新的文档替换当前文档

4.4、Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。

属性：
navigator.appCodeName；返回浏览器的代码名
navigator.appName 返回浏览器的名称
navigator.appVersion 返回浏览器的平台和版本信息
navigator.cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值
navigator.platform 返回运行浏览器的操作系统平台
navigator.userAgent 返回由客户机发送服务器的user-agent 头部的值

4.5、Screen 对象包含有关用户屏幕的信息

screen.availWidth：可用的屏幕宽度，以像素计，减去界面特性，比如窗口任务栏。
screen.availHeight：可用的屏幕高度，以像素计，减去界面特性，比如窗口任务栏。

六、HTML DOM操作

5.1、DOM方法

5.1.1、节点访问

getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。

5.1.2、创建节点

createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。

5.1.3、添加/移除句柄

addEventListener(事件类型，调用函数[，冒泡/捕获]) 向指定元素添加事件，允许向同个元素添加多个同样的事件，且不会覆盖已存在的事件。第三个参数默认值为 false：冒泡传递。
在 冒泡 中，内部元素的事件先触发，然后再触发外部元素。
在 捕获 中，外部元素的事件先触发，然后才会触发内部元素的事件。

element.addEventListener(event, function, useCapture);

_element_.addEventListener("click", function(){
      alert("Hello World!"); });

removeEventListener() 移除事件的监听。

_element_.removeEventListener("mousemove", myFunction);

ps： IE8、Opera 7及更早版本不支持 addEventListener() 和 removeEventListener()。但是，可以使用 element.attachEvent(event, function)和element.detachEvent(event, function)来替换。

5.1.4、添加/删除/替换元素

appendChild(新元素) 追加元素，新元素作为父元素的最后一个子元素进行添加。

var para=document.createElement("p");//创建一个新的 
 元素
var node=document.createTextNode("This is new.");//创建文本节点
para.appendChild(node);//向 
 元素追加文本节点
//向已有元素追加这个新元素
var element=document.getElementById("div1");
element.appendChild(para);

insertBefore(新节点，指定节点) 在指定的子节点前面插入新的子节点。

var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("div1");
var child=document.getElementById("p1");
element.insertBefore(para,child);//向div1添加元素，放在p1之前

removeChild() 删除子节点，必须清楚该元素的父元素。

//div1是p1的父元素
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);

replaceChild(新节点，指定节点) ;：替换子节点。

var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.replaceChild(para,child);//将p1替换为新元素

5.2、DOM属性

1、innerHTML 用于获取或替换 HTML 元素的内容。
2、element.style.样式属性名=新样式内容，改变html样式。

var mychar= document.getElementById("con");
 mychar.style.color="red";

3、element.className = “classname”，设置或返回元素的class 属性。

.one{
     color:red;}

var p1 = document.getElementById("p1");
p1.className="one";

4、element.contentEditable 设置或返回元素的内容是否可编辑

document.getElementById("myP").contentEditable =false;//设置元素不可编辑

5、元素对象
nodeName 属性返回节点的名称。
nodeValue 属性返回节点的值。
nodeType 属性返回节点的类型。nodeType 是只读的。

<p id="intro">Hello World!</p>

x=document.getElementById("intro");
document.write(x.firstChild.nodeValue); //Hello World!

parentNode - 元素的父节点
childNodes - 元素的子节点

var txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);

firstChild： 元素的第一个子元素

x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);

lastChild： 元素的最后一个子元素

attributes - 返回一个元素的属性数组
getAttribute(元素名) 返回指定的属性值。

document.getElementsByTagName("a")[0].getAttribute("target");

setAttribute() 把指定属性设置或修改为指定的值。

document.getElementsByTagName("INPUT")[0].setAttribute("type","button");//设置第一个input框为按钮

更多详情可参照菜鸟教程：https://www.runoob.com/jsref/dom-obj-all.html

5.3、DOM事件

onclick 点击
onblur：失去焦点
onfocus 得到焦点
onkeydown 按下键盘
onkeyup 松开键盘
onkepress 按住键盘
onmousedown 按下鼠标
onmouseup 松开鼠标
onmouseover 鼠标悬浮
ommousemove 移动鼠标
onmouseout 移开鼠标
select 选中
onload ：页面加载
onchange：改变
onsubmit ：表单提交

document.getElementById("btn").onclick=function(){
     }

七、JSON数据

JSON 是用于存储和传输数据的格式，通常用于服务端向网页传递数据 。
语法规则：数据为 键/值 对，由逗号分隔。大括号保存对象，方括号保存数组。

{
     "employees":[  
    {
     "firstName":"John", "lastName":"Doe"},  
    {
     "firstName":"Anna", "lastName":"Smith"},  
    {
     "firstName":"Peter", "lastName":"Jones"}  
]}

JSON.stringify()： JavaScript -> JSON

var xiaoming = {
     
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '\"W3C\" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp']
};

//1、第二个参数用于控制如何筛选对象的键值，如果我们只想输出指定的属性，可以传入Array，按缩进输出
JSON.stringify(xiaoming, ['name', 'skills'], '  ');

//传入一个函数，对象的每个键值对都会被函数先处理
function convert(key, value) {
     
    if (typeof value === 'string') {
     
        return value.toUpperCase();
    }
    return value;
}
JSON.stringify(xiaoming, convert, '  ');

//2、给对象定义一个toJSON()的方法，直接返回JSON应该序列化的数据
var xiaoming = {
     
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '\"W3C\" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp'],
    toJSON: function () {
     
        return {
      // 只输出name和age，并且改变了key：
            'Name': this.name,
            'Age': this.age
        };
    }
};
JSON.stringify(xiaoming); // '{"Name":"小明","Age":14}'

JSON.parse() ： JSON-> JavaScript

JSON.parse('{"name":"小明","age":14}'); // Object {name: '小明', age: 14}

//2、接收一个函数，转换解析出的属性
var obj = JSON.parse('{"name":"小明","age":14}', function (key, value) {
     
    if (key === 'name') {
     
        return value + '同学';
    }
    return value;
});
console.log(JSON.stringify(obj)); // {name: '小明同学', age: 14}

eval() ： JSON-> JavaScript

eval ("(" + txt + ")");

八、Ajax 更新部分网页

7.1、创建 XMLHttpRequest 对象

XMLHttpRequest 用于在后台与服务器交换数据。
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

var xmlhttp;
if (window.XMLHttpRequest)
  {// IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

属性：
onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status 200: “OK” 404: 未找到页面
ps：onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。

7.2、向服务器发送请求

xmlhttp.open(“GET/POST”,url,异步true/同步false);规定请求类型、服务器上文件的地址以及是否异步处理请求。
xmlhttp.send(string);将请求发送到服务器。string：仅用于 POST 请求。

ps：与 POST 相比，GET 更简单更快，并且在大部分情况下都能用。
但在以下情况中，使用 POST 请求更好：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();

setRequestHeader(header,value)；向请求添加 HTTP 头。header: 规定头的名称， value: 规定头的值。
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 添加 HTTP 头。然后在 send() 方法中规定希望发送的数据：

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

7.2.1、异步/同步

异步：规定在 响应处于 onreadystatechange 事件中 的 就绪状态（200） 时执行的函数

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

同步：会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。
注释：请不要编写 onreadystatechange 函数，把代码放到 send() 语句后面即可：

xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

7.3、服务器响应
responseText 获得字符串形式的响应数据。

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXML 获得 XML 形式的响应数据。

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i";
  }
document.getElementById("myDiv").innerHTML=txt;