Ajax基础知识

1. 什么是Ajax

• Ajax是指JavaScript发送异步网络请求。
• 通过XMLHttpRequest对象与服务器通信。
• 可以发送和接收JSON，XML，HTML和文本等多种格式数据
• 可以不需要刷新页面，发送请求和接收数据

2. Ajax请求步骤

1. 创建XMLHttpRequest对象实例
2. 声明一个函数，当XMLHttpRequest请求对象状态变化时处理响应
3. 发送请求
   • httpRequest.open('GET'(请求方法), 'http://www.example.org/some.file'（请求url）, true（是否异步，默认true）);
   • httpRequest.send(); 发送给服务器内容
   • httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 设置请求类型
4. 检查XMLHttpRequest请求状态（XMLHTTPRequest.readyState === 4）
   • 0 请求未初始化
   • 1 已建立服务器链接
   • 2 请求已接受
   • 3 正在处理请求
   • 4 请求已完成并且响应已准备好
5. 检查HTTP请求状态
6. 接收响应数据

<button id="ajaxButton" type="button">Make a request</button>

<script>
(function() {
  var httpRequest;
  document.getElementById("ajaxButton").addEventListener('click', makeRequest);

  function makeRequest() {
    // 1.创建XMLHttpRequest对象实例
    httpRequest = new XMLHttpRequest();

    if (!httpRequest) {
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
    }
    // 2.XMLHttpRequest请求对象状态变化时，alertContents函数处理响应
    httpRequest.onreadystatechange = alertContents;
    // 3.发送HTTP请求
    httpRequest.open('GET', 'test.html');
    httpRequest.send();
  }

  function alertContents() {
    // 4.检查XMLHttpRequest请求状态
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
    // 5.检查Http请求状态
      if (httpRequest.status === 200) {
      // 6.接收响应数据
        alert(httpRequest.responseText);
      } else {
        alert('There was a problem with the request.');
      }
    }
  }
})();
</script>