js通过AJAX绑定数据四部曲

var data;
//1、创建AJAX实例
var xhr = new XMLHttpRequest();
//2、打开一个路径:请求方式，请求路径，同异步（false：同步；true：异步）
xhr.open("get","path",false);
//3、监听状态
xhr.onreadystatechange = function(){
    //如果状态是4，并且xhr.status状态码是以2开头的，表示数据已经请求成
    if(xhr.readyState===4&&/^2\d{2}/.test(xhr.status)){
        data = xhr.responseText;
    }
}
//4、发送请求
xhr.send();

通过AJAX获取的数据是JSON格式的字符串，需要通过JSON.parse()方法将JSON字符串转换为JSON对象。

• json是一种数据格式，不是数据类型
• json格式的对象属性名必须使用双引号括起来，不能用单引号括起来,因为通过JSON.parse将该字符串转换为对象时会报错

var obj = {"a":1};//json格式的对象
var str = '{"a":1}';//json格式的字符串
//----------------------//
var obj = "{'a':1}";
console.log(JSON.parse(obj));//Uncaught SyntaxError: Unexpected token ' in JSON at position 1 at JSON.parse (<anonymous>)

• JSON是window下的一个属性名，它的属性值是一个对象。存在两个方法
  • JSON.parse()将json格式的字符串转化为json格式的对象
  • JSON.stringify()将json格式的对象(普通对象也可以)转换为json格式的字符串

注意： 利用JSON的这两个方法可以实现深克隆，但是这种克隆存在缺陷，因为它只能克隆比较简单的对象，当对象的属性值是函数或是undefined时不能进行克隆

var obj = {a:1,b:{c:2}};
var newObj = {};
// 利用循环克隆对象是浅克隆，因为在改变一个一个对象的值时另一个对象的值可能修改
for(var key in obj){
    newObj[key] = obj[key];
}
console.log(newObj);//{a:1,b:{c:2}}
obj.b.c = 100;
console.log(newObj);//{a:1,b:{c:100}}
// 对对象进行深克隆：当改变原有对象的值时，不会影响新克隆的对象；新对象中的空间地址和原来指向不同的地址空间
var newObj = JSON.parse(JSON.stringify(obj));
var obj9 = {a:1,b:undefined,c:null,d:function(){}};
var obj8 = JSON.parse(JSON.stringify(obj9));
console.log(obj8);//{a: 1, c: null}