原生Ajax的get和post请求

get

// 1.xhr实例化
let xhr = new XMLHttpRequest();

// 2.准备请求的方式、url地址
//      位置: url地址后面
//      形式: 参数名=参数值&名=值;
//      数据：id:3  author:罗贯中
//      编码格式：urlencoded编码！支持ASCII码字符！中文不支持（url编码处理）！
//               encodeURI(中文字符串);  ---->url编码形式 %16进制的字符串
//               decodeURI(%16进制的字符串)  ----->中文
let params = 'id=3&author=罗贯中';
params = encodeURI(params);
xhr.open("get", "http://www.liulongbin.top:3006/api/getbooks?" + params);


// 3.发送的数据(POST请求数据参数)及开始发生请求
xhr.send(null);



// 4.注册请求状态变化事件
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
}

post

// POST 
//     参数位置：请求体中！不是url后面！
//     格式：名=值&名=值;
//     编码格式：urlencoded编码；
// POST发生数据前，设置请求头； 
//     set 设置
//     Request 请求 
//     Header头部
//     Content内容 
//     Type:类型
//      urlencoded:编码形式  中文16进制%字符串;


// 1.xhr实例化
let xhr = new XMLHttpRequest();

// 2.准备请求方式和url
xhr.open("post", "http://www.liulongbin.top:3006/api/addbook");

// 3.发送数据及 发送请求
let str = "bookname=斗罗大陆1&author=唐家三少&publisher=唐家扳手";
str = encodeURI(str);
// POST发送之前的要求！
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(str);

// 4.注册请求状态变化事件
xhr.onreadystatechange = function () {
	if (xhr.readyState == 4 && xhr.status == 200) {
  	console.log(xhr.responseText);
	}
}