js之旅（十二）js原生方法实现ajax请求

本文主要介绍了如何通过原生js的方法实现一个ajax get请求，post请求。

一、什么是ajax

Ajax 即Asynchronous Javascript And XML（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
这个地方的XML指的是XMLHttpRequest对象，从ajax的定义中可以获取下面信息：

• ajax操作的是js和XMLHttpRequest对象
• 交互式说明和后端有交互，即发送请求，获取数据
• ajax是个异步的操作

二、ajax状态

在一中，ajax有个特点是交互，怎么判断请求已经完成？可以通过ajax的状态码来解读：

• 0-未初始化，尚未调用open()方法
• 1-启动，调用open()方法，已调用send()的方法，正在发送请求
• 2-发送，已经调用send()方法，已接受到响应
• 3-解析 正在解析响应数据
• 4、完成，响应数据解析完成，客户端可以调用;（我们都是使用xhr.readyState == 4 判断ajax请求是否结束）

三、js原生实现ajax的步骤

• 创建XMLHttpRequest对象
• 调用open()方法：接受三个参数，分别是请求类型、请求URL、是否异步发送请求
• 调用send()方法发送请求
• 接受请求

四、js原生实现ajax get方法

var xhr = new XMLHttpRequest();
xhr.open("GET","https://www.baidu.com/s?wd=ajax",true); 
xhr.send(null);
xhr.onreadystatechange = function(){
	if(xhr.readyState == 4 && xhr.status == 200){
		console.log(xhr.responseText);
	}
}

五、js原生实现ajax post方法

var data
var xhr = new XMLHttpRequest();
xhr.open("POST","",true);
// 添加http头，发送信息至服务器时内容编码类型
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
// datat应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
xhr.send(data);
//onreadystatechange:每当readyState改变的时候，onreadystatechange函数就会被执行
xhr.onreadystatechange = function(){
	if(xhr.readyState == 4 && xhr.status == 200{
		console.log(xhr.responseText);
	}
}