AJAX 发送请求

什么是AJAX？

• Asynchronous JavaScript and XML ( 异步的JavaScript 和 XML )
• AJAX 不是新的编程语音，而是一种使用现有标准的新方法。
• AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
  ( 新浪微博，GooGle 地图，开心网等中都有涉及)

如何向服务器发送请求

• 先实例化 请求对象

var xhr = new XMLHttpRequest():

• 声明请求的地址

var url = 'http://musicapi.leanapp.cn/artist/list'

• 发送请求

xhr.open("GET",url); //	参数一：请求方式 get/post，参数二：请求地址，参数三：get 请求参数
xhr.send(); //	参数：post 的请求参数，string 类型

如何接收响应？

onreadystatechange 监听服务器响应的事件，同时也是一个异步函数

xhr.onreadystatechange = function(){
	//	判断请求成功
	if( xhr.status == 200 && xhr.readyState == 4){
		//	status 获取 http的状态码，200为成功
		//	readyState 响应状态 4 为响应成功
		var res = xhr.response; //	获取【响应体】中的数据
	}else{
		res = {
			error:'请求失败‘
		};
	}
}

如何处理被接收响应的数据

response 一般都为 json数据格式 或 XML

由于接收响应的事件为异步程序，这里需要用回调函数来处理异步。

为了便于理解(懒得打字)，直接上全部代码

//	封装请求方法
//	method 请求方法，url 请求地址，callback 回调函数接收响应数据
function ajax(method,url,callback){
	var res = {}; // 接收响应数据
	var xhr = new XMLHttpRequest():
	//	发送请求
	xhr.open("GET",url);
	xhr.send();

	//	接收
	xhr.onreadystatechange = function(){
		if( xhr.status == 200 && xhr.readyState == 4 ){
			res = xhr.response;
			callback(res); // 请求成功后，执行回调函数
		}else{
			res = {
				error:'请求失败'
			};
			callback(res);
		}
	};
};

var url = 'http://musicapi.leanapp.cn/artist/list';
ajax("GET",url,function(data){
	//	将响应数据传给data，再转换为对象
	var data = JSON.parse(data);
	console.log(data);
})