首页 > 建站教程 > JS、jQ、TS >  JS进阶篇6---原生JS封装ajax请求正文

JS进阶篇6---原生JS封装ajax请求

一、原生JS中的ajax
1、创建 XMLHttpRequest 异步对象
var xhr = new XMLHttpRequest()
2、设置回调函数
xhr.onreadystatechange = callback
3、使用 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);
        }
    }
}