ajax的post封装以及promise

一·ajax的post请求

post传参方式的语法:
1.在调用open方法后,添加请求头，按照表单post的方式进行提交

​ 2.将传递的参数通过send方法传递，key1=value1&key2=value2…

xhr.open("post","1ajaxPost.php",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("userName="+this.value);

二:ajax返回JSON对象

两种方法获取：

1·严格意义下的JSON字符串

echo '{"name":"laowang","age":18}';
//ajax请求方式
function fun(resText){
console.log(resText);
	}

2·数组的形式

$name = "小明";
$arr = ["name"=>$name,"age"=>88];
// 将数组转换为json格式
echo json_encode($arr);
//ajax请求方式
function fun(resText){
 	let json = JSON.parse(resText);
	for(let index in json){
	console.log(json[index]);
 }
}

三：AJAX的封装

function ajax(type, url, isAsyn, data, callBack) {
    //type:get/post
	//url:服务器地址
	//isAsyn:是否异步
	//data:请求参数
	//callBack:接收responseText的数据，且实用的函数
		let xhr;
		if (window.ActiveXObject) {
			//ie
			xhr = new ActiveXObject("Microsoft.XMLHttp");
		} else {
			//非ie
			xhr = new XMLHttpRequest();
		}

		//将type全都转换为小写
		type = type.toLowerCase();

		if (type == "get") {
			let urlParam = url;
			if (data != "") {
				//"5ajaxFun.php?name=laowang&pwd=666"
				urlParam += "?" + data;
			}
			xhr.open(type, urlParam, isAsyn);
			xhr.send();
		} else if (type == "post") {
			xhr.open(type, url, isAsyn);
			xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			if (data != "") {
				xhr.send(data);
			} else {
				xhr.send();
			}
		}

		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4 && xhr.status == 200) {
				callBack(xhr.responseText);
			}
		}
	}

四：promise：

4·1：promise的作用：

1·将回调函数嵌套传参，改为平级传参

2·提供了错误的解决方案

4·2：Promise对象的使用

语法：

let p = new Promise(function(resolve,reject){
if(条件){
 resolve();
}else{   
reject();
}   
 });
  //切记return promise对象
return p;
  关键的then方法:

1、找到异步操作的代码，放在Prmoise构造函数的参数（函数）里

2、参数（函数）的第一个参数resolve是成功时调用的函数，对应then方法（函数）的第一个参数

3、参数（函数）的第二个参数reject是失败时调用的函数，对应then方法（函数）的第二个参数

有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。