AJAX请求

ajax

一、什么是ajax

Asynchronous JavaScript and XML(异步的javascript和XML)

二、ajax的优点

在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

三、步骤

1.创建对象

XMLHttpRequest 是 AJAX 的基础。

let xhr = new XMLHttpRequest()

2.发送请求

xhr.open('get','http://localhost:3000/user',true)

xhr.send();

XMLHttpRequest实例化对象方法open
XMLHttpRequest实例化对象方法send

当请求为post时，请使用 setRequestHeader() 来添加 HTTP 头

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("foo=bar&lorem=ipsum");

3.相应相应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

xhr.responseText

xhr.responseXML

• 只要 xhr.readyState 属性发生变化，就会调用相应的处理函数

 
xhr.onreadystatechange = ()=>{

    if(xhr.readyState==4 && xhr.status >= 200 && xhr.status < 300){

        console.log(xhr.responseXML);
        
    }
    
}

• 当一个XMLHttpRequest请求完成的时候会触发load 事件

xhr.onload = ()=>{
    console.log("请求已经结束");
}