1、创建 XMLHttpRequest 异步对象
var xhr = new XMLHttpRequest()2、设置回调函数
xhr.onreadystatechange = callback3、使用 open 方法与服务器建立连接
// get 方式 xhr.open("get", "test.php", true) // post 方式发送数据 需要设置请求头 xhr.open("post", "test.php", true) xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")4、向服务器发送数据
// get 不需要传递参数 xhr.send(null) // post 需要传递参数 xhr.send("name=javascript&age=18")5、在回调函数中针对不同的响应状态进行处理
function callback() { // 判断异步对象的状态 if(xhr.readyState == 4) { // 判断交互是否成功 if(xhr.status == 200) { // 获取服务器响应的数据 var res = xhr.responseText // 解析数据 res = JSON.parse(res) } } }二、原生JS封装 get 请求
function get(){ var xhr = window.xmlHttpRequest ? new xmlHttpRequest() : ActiveXObject("microsoft.XMLHttp"); xhr.open("get","https://www.baidu.com/",true); xhr.send(null); xhr.onreadystatechange = function(){ if(xhr.readystate == 4 && xhr.status == 200){ console.log(xhr.responseText); } } }三、原生JS封装 post 请求
function post(){ var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject("microsoft.XMLHttp") xhr.open("post","https://www.baidu.com/",true); xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); xhr.send("name=javascript"); xhr.onreadystatechange = function(){ if(xhr.readystate == 4 && xhr.status == 200){ console.log(xhr.responseText); } } }