AJAX学习总结（二）

异步对象 VS 同步对象

直白的来说： 异步对象 -- 同时干很多事情
					  同步对象 -- 一件事一件事的干

//1. 创建 异步对象
	var xhr = new XMLHttpRequest();

//2.设置请求行 （get请求 数据写在url后面）
//xhr.open(参数1，参数2，参数3)
//使用同步模式来发送请求
//参数3 是否使用异步，**默认是 ture(异步)**,  false(同步)
//同步 -- 请求响应回来之前什么都干不了  （基本上不会使用这种方式）
 xhr.open('post','xxx.php',false);
	
//3.设置请求头
//get请求可以省略设置请求头的操作，post不发送数据也可以省略

//3.5.注册回调函数（请求响应回来之后触发）
//由于onload的兼容性不好，所以就替换为兼容性更好的onreadystatechange 
	xhr.onreadystatechange  = function(){
		//只有当状态码为4时
		//且判断 响应回来 并且请求的页面存在  采取获取数据 
	if(xhr.readyState == 4 && xhr.status == 200){
		
}
	}

//4.请求主体发送
//（get请求为空，或者写null，post请求数据写这里。如果没有数据，直接为空或者写null）
	xhr.send(null);

关于onreadystatechange

readyState有五种状态：
1. 值 = 0 ； UNSENT（未打开） ；open（）方法还未被调用
2. 值 = 1 ； OPENED(未发送) ；send()方法还未被调用
3. 值 = 2 ；HEADERS_RECEIVED（已获取响应头）；send()方法已经被调用，响应头和响应状态已经返回。
4. 值 = 3 ；LOADING（正在下载响应体）；响应体下载中，responseText中已经获取你部分数据。
5. 值 = 4 ；DONE(请求完成) ； 整个请求过程已经完毕；

AJAX部分代码

var xhr = new XMLHttpRequest();
xhr.open('post','xxx.php');  //异步可省略第三个参数；
xhr.onreadystatechange  = function(){
if(xhr.readyState == 4 && xhr.status == 200){
		console.log(xhr.responseText);
}
xhr.send(null);
}

XML VS JSON

• XML

  xml使用双标签

XML文件格式

<?xml version="1.0" encoding="UTF-8"?>
<root> //顶级标签
 	...  //次级标签
 	
</root>

解析XML文件

if(xhr.readyState == 4 && xhr.status == 200){

	//返回XML ,如果使用responseText 只能够获取到 字符串
	//所有如果返回 XML 需要使用responseXML 来获取
	//获取 XML -- xhr.responseXML
	//解析 XML -- xhr.responseXML.querySelector()

	var name = xhr.responseXML.querySelector('name').innerHTML;
	
}

XML的缺点

1. 传输的数据的量大
2. 解析略微有点复杂

• JSON

关于JSON

1. JSON是一种数据格式
2. JSON跟编程语言没有关系
3. JSON的载体是字符串
4. 基本上所有的编程语言都支持JSON
5. 语法简洁 基本上所有的编程语言都提供你对应的方法来解析JSON
6. JSON格式的字符串转化完毕之后会变成数组 对象

JSON的写法

// 用来表示 对象
var JSONObject = '{"name":"崔胜澈","skill":"长得帅"} ';

//转化为对应的 对象（数组）
var obj = JSON.parse(JSONObject);
//打印
console.log(obj.name+' | '+obj.skill);

//用来表示 数组
var JSONArr = '["崔胜澈"，“SEVENTEEN”，"CLAP" ]';
//转化为对应的 对象（数组）
var arr= JSON.parse(JSONArr);
console.log(arr);   //打印数值
console.log(arr[2]);  //打印下标为2的数组值

//用来表示  对象数组
var JSONObjArr = ‘{"name":"崔胜澈"，"skill":"长得帅","SEVENTEEN":["尹净汉","洪知秀",“......”]}’;
//转化为对应的 对象（数组）
var result = JSON.parse(JSONObjArr);
console.log(result.SEVENTEEN[0]);

注意：

1. 因为JSON是字符串，所以最外面要用单引号’ … '包裹。
2. 要用来表示对象，必须用{ … }包裹。
3. 属性的名字要用双引号"…"包裹。
4. 属性对应的值用 : 分割，再用“…”包裹，但如果属性值为数值，可以不用。

通过AJAX获取JSON并解析

客户端

var xhr = new XMLHttpRequest();
xhr.open('post','xxx.php');  
xhr.onreadystatechange  = function(){
if(xhr.readyState == 4 && xhr.status == 200){
		//JSON的载体是字符串 用 responseText 即可获取
		console.log(xhr.responseText);  //打印值为 字符串
		//转化为对应的 对象（数组）
		var arr = JSON.parse(xhr.responseText);
		console.log(arr);  //打印值为 数组
		//遍历打印
		for(var i = 0 ; i < arr.length ; i++ ){
		var currentObj = arr[i];
		console.log('姓名'+currentObj.name+'技能'+currentObj.skill); // 打印值
		}
}
xhr.send(null);
}

JSON文件

[
{
	"name":"崔胜澈"，
	"skill":"长得帅"
	},
{
	"name":"尹净汉"，
	"skill":"长得美"
	}
]