XMLHttpRequest属性和方法 ajaxPost ajaxFun 返回后端的json对象的两个方法

XMLHttpRequest属性和方法

let xhr = new XMLHttpRequest()
xhr.open("get/post","url地址",true);
设置请求
​
get传参:请求参数添加在url后
xhr.open("get","test.txt",true);
发送请求
post传参:请求参数添加在send的参数中
xhr.send([请求参数]);
xhr.send();
onreadystatechange
readyState状态码发生改变时触发该事件,只有234状态会触发该事件
readyState状态码的含义
    0:代表xhr对象创建
    1:调用了open方法
    2:调用了send方法，发送了出去
    3:数据发送到了服务器
    4:服务器接收数据且处理完毕，准备响应
​
xhr.onreadystatechange = function(){
    console.log(xhr.readyState);
    // status:http协议正常通讯的状态码
    // if(xhr.readyState == 4 && xhr.status == 200){
    //     console.log(xhr.responseText);
    // }
}

ajaxPost

xhr.open("post", "2.ajaxPost.php", true);
注意事项:1.open和send之间要设置请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
2.将请求参数携带在send参数中
//key1=value1&key2=value2...
xhr.send(`userName=${this.value}`);

ajaxFun

ajax的目的就是发送请求参数，获取返回的响应内容
功能:发请求，接响应
参数:
    type
    url
    isAsyn
    data:key1=value1&key2=value2   ""
    callBack
​
function ajaxFun(type,url,isAsyn,data,callBack){}

返回后端的json对象的两个方法

1.通过json字符串返回
echo '{"name":"老王","age":18}';
​
2.通过php数组转json对象
$arr = ["name"=>"中王","age"=>18];
echo json_encode($arr);