Ajax面试题-手写ajax请求的五个步骤

Ajax 请求的五个步骤

创建 XMLHttpRequest 对象； 设置请求行；设置请求头（针对 post 请求）；设置请求体；接收响应数据

/*
      创建 XMLHttpRequest 对象 ；XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新
    */
// var xhr = new XMLHttpRequest();

var xhr = null;
// 检查浏览器是否支持 XMLHttpRequest 对象
if(window.XMLHttpRequest){
  // 若支持则创建 XMLHttpRequest 对象
  // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
  xhr = new XMLHttpRequest();
}else {
  // 若不支持创建 ActiveXObject
  // IE6, IE5 浏览器执行代码
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

// 设置请求行，向服务器发送请求；用于说明XMLHttpRequest对象要从哪里获取数据.通常可以是网站中的数据,也可以是本地中其他文件中的数据。
// open(method,url,async);规定请求的类型、URL 以及是否异步处理请求。
// method：请求的类型；GET 或 POST；
// url：文件在服务器上的位置；
// async：true（异步）或 false（同步）
xhr.open('GET','http://ajax.com/phpFile/time.php',true);

// post 请求需要设置请求头
// xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

// 设置请求体；
// send(string); 将请求发送到服务器。string：仅用于 POST 请求
xhr.send(null); // get请求参数可不填或置空

/* 设置响应HTTP请求状态变化的函数 */
// onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
xhr.onreadystatechange = function(){
  // 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
  // 0: 请求未初始化，1: 服务器连接已建立，2: 请求已接收，3: 请求处理中，4: 请求已完成，且响应已就绪
  // console.log(this.readyState);

  if(this.readyState != 4) return;
  
  // 获得来自服务器，字符串形式的响应数据。
  console.log(this.responseText);
}