JS原生Ajax基本操作

一、什么是Ajax技术？

Ajax技术：无须刷新页面即可从服务器取得数据的一种方法。

Ajax技术的核心就是XMLHttpRequest对象，这个对象可以通过异步的方式从服务器获得数据，再通过DOM将得到的数据插入到页面中。另外Ajax通信与数据格式无关。

二、Ajax技术连接服务器获取数据的几个步骤

1、创建核心对象XMLHttpRequest

    var xhr = new XMLHttpRequest();
复制代码

2、准备建立连接

    xhr.open("GET", "check.php?username=" + this.value, true);//get方式连接
复制代码

3、发送请求

    xhr.send();
复制代码

4、等待处理响应

xhr.onreadystatechange = function() {
	// 就绪状态码改变
	if (xhr.readyState === 4) { // 请求处理完毕，响应就绪
		// HTTP状态码
		if (xhr.status === 200) { // 请求成功，OK
			// 获取响应数据
			var data = xhr.responseText;
			// JSON.parse
			data = JSON.parse(data);
			// 处理响应数据
			if (data.code === 1) {
				$("#username_info").innerText = "用户名可使用";
			} else {
				$("#username_info").innerText = data.msg;
			}
			console.log(data, typeof data);
		}
	}
复制代码

注意

以上步骤的服务器端语言为PHP，4个步骤中的readyState为xhr的属性，可取值0、1、2、3、4，分别表示为未初始化、启动、发送、接收、完成。一般情况下，我们只对4代表的完成阶段感兴趣，但在调用open()之前指定onreadystatechange才能确保跨浏览器的兼容性。

总结

Ajax技术就是无须刷新页面即可从服务器取得数据的一种方法。我们使用Ajax就是为了和服务器进行交互操作。