AJAX的js原生封装-CSDN博客

本文链接：https://blog.csdn.net/guangmiao1130/article/details/108501729

AJAX的js原生封装

把get同步请求、get异步请求、post同步请求、post异步请求进行封装到一个函数进行调用

ajax.js


/**
 * 请求的方式: get/post
 * 请求的URL
 * 查询字段: key=value&key=value&k=v
 * 请求成功之后的回调函数
 * 
 * 请求失败之后的回调函数
 * 是否异步
 */
function selfAJAX(type, URL, searchStr, successFun, failFun, isAsync) {
  // 1, 创建网络请求对象
  var xhr;
  if (XMLHttpRequest) {
    // IE 7+ 和主流浏览器
    xhr = new XMLHttpRequest();
  } else {
    // IE 5, 6
    xhr = new ActiveXObject("Microsoft.XMLHttp");
  }
  // 2, 监听网络请求状态
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
        // 请求成功
        successFun(xhr.responseXML || xhr.responseText);
      } else {
        // 请求失败
        failFun('请求失败');
      }
    }
  }
  // 3, 配置请求
  var url;
  url = type.toLowerCase() == 'get' ? URL + '?' + searchStr : URL;
  // if (!(isAsync == false || isAsync == true)) {
  //   isAsync = true;
  // }
  if (typeof(isAsync) == 'undefined') {
    isAsync = true;
  }
  xhr.open(type, url, isAsync);
  // 4, 发送请求
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.send(type.toLowerCase() == 'get' ? null : searchStr);
}

ajax.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02验证自己封装的ajax</title>
</head>
<body>
  <button id="getSync">GET 同步请求</button>
  <button id="getAsync">GET 异步请求</button>
  <button id="postSync">POST 同步请求</button>
  <button id="postAsync">POST 异步请求</button>
</body>
<!-- 引入自己封装的 ajax -->
<script src="./js/ajax.js"></script>
<script>
/**
 * AJAX: 全称 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
 * 
 */
var getSync = document.getElementById('getSync');
var getAsync = document.getElementById('getAsync');
var postSync = document.getElementById('postSync');
var postAsync = document.getElementById('postAsync');

// get 同步请求
getSync.onclick = function() {
  selfAJAX('get', 'http://api.tianapi.com/txapi/worldtime/index', 'key=b3611e69be17f1fb021d4a30d80addc5&city=上海', function(rel) {
    console.log(rel);
  }, function(err) {
    console.log(err);
  }, false);
}
// get 异步请求
getAsync.onclick = function() {
  selfAJAX('get', 'http://api.tianapi.com/txapi/worldtime/index', 'key=b3611e69be17f1fb021d4a30d80addc5&city=上海', function(rel) {
    console.log(rel);
  }, function(err) {
    console.log(err);
  });
}


// post 同步请求
postSync.onclick = function() {
  selfAJAX('post', 'http://api.tianapi.com/txapi/worldtime/index', 'key=b3611e69be17f1fb021d4a30d80addc5&city=上海', function(rel) {
    console.log(rel);
  }, function(err) {
    console.log(err);
  }, false);
}

// post 异步请求
postAsync.onclick = function() {
  selfAJAX('post', 'http://api.tianapi.com/txapi/worldtime/index', 'key=b3611e69be17f1fb021d4a30d80addc5&city=上海', function(rel) {
    console.log(rel);
  }, function(err) {
    console.log(err);
  });
}

</script>
</html>