Ajax实现流程与操作

Ajax

异步无刷新技术

实现流程：

1、得到核心对象XMLHttpRequest对象

      var xhr = new XMLHttpRequest();

2、准备/打开请求
      open(请求类型GET/POST,请求的路径,是否异步true/false);

3、发送请求
      send(参数/null);
注：如果是get请求，参数直接跟在请求路径后面，send()方法中设置null;
如果是post请求，有参数则设置参数，无参数设置为null;

4、解析响应数据
      1)、判断响应是否成功 status=200 （404=未找到资源;500=服务器异常;200=成功）
      2)、得到后台响应数据 responseText

同步:

		// 1、得到核心对象XMLHttpRequest对象
		var xhr = new XMLHttpRequest();
		console.log(xhr);
		// 2、准备/打开请求  open(请求类型GET/POST,请求的路径,是否异步true/false);
		xhr.open("GET","js/data.json?uname=zhangsan&uage=10",false); // 同步请求
		// 3、发送请求  send(参数/null);
		xhr.send(null);
		// 4、解析响应数据
		if (xhr.status == 200) { // 1、判断响应是否成功 status=200
			// 2、得到后台响应数据  responseText
			console.log(xhr.responseText);
			var user = JSON.parse(xhr.responseText);
			console.log(user);
			console.log(user.uname);
		} else {
			alert("失败状态码：" + xhr.status + "，失败原因：" + xhr.statusText);
		}

异步:

		// 1、得到核心对象XMLHttpRequest对象
		var xhr = new XMLHttpRequest();
		
		console.log(xhr);
		// 2、准备/打开请求  open(请求类型GET/POST,请求的路径,是否异步true/false);
		xhr.open("GET","js/data.json?uname=zhangsan&uage=10",true); // 异步请求
		// 3、发送请求  send(参数/null);
		xhr.send(null);
		
		// 监听readystate事件 （0=尚未调用open方法；1=已调用open方法未调用send方法，2=调用send方法，未接收到响应；3=接收到部分响应；4=响应完全接收）
		xhr.onreadystatechange = function() {
			// 如果是异步请求，需要等待数据完全响应后再做处理
			if (xhr.readyState == 4) {
				// 4、解析响应数据
				if (xhr.status == 200) { // 1、判断响应是否成功 status=200
					// 2、得到后台响应数据  responseText
					console.log(xhr.responseText);
					var user = JSON.parse(xhr.responseText);
					console.log(user);
					console.log(user.uname);
				} else {
					console.log("失败状态码：" + xhr.status + "，失败原因：" + xhr.statusText);
				}
			}
		}