Ajax

1. 介绍一下ajax并代码实现

1.1 基本概念

avaScript 和XML（Asynchronous JavaScript And XML）。简单点说，就是使用 XMLHttpRequest 对象与服务器通信。 它可以使用JSON，XML，HTML和text文本等格式发送和接收数据。AJAX最吸引人的就是它的“异步”特性，也就是说他可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。

Ajax | MDN

1.2 创建一个简单的Ajax

• 创建 XMLHttpRequest 对象

  if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
   httpRequest = new XMLHttpRequest();
  } else if (window.ActiveXObject) { // IE 6 and older
   httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
  }
  

• 绑定onreadystatechange 事件

  httpRequest.onreadystatechange = function(){
   // Process the server response here.
  };
  

• 向服务器发送请求

  httpRequest.open('GET', 'http://www.example.org/some.file', true);
  httpRequest.send();
  

完整的例子

function ajax(url, cb) {
  let xhr;
  if(window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else {
    xhr = ActiveXObject("Microsoft.XMLHTTP");
  }
  xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
      cb(xhr.responseText);
    }
  }
  xhr.open('GET', url, true);
  xhr.send();
}

1.3 httpRequest.readyState的值(熟记)

• 0 (未初始化) or (请求还未初始化)
• 1 (正在加载) or (已建立服务器链接)
• 2 (加载成功) or (请求已接受)
• 3 (交互) or (正在处理请求)
• 4 (完成) or (请求已完成并且响应已准备好)

1.4 访问服务端返回的数据

• httpRequest.responseText
  • 服务器以文本字符的形式返回
• httpRequest.responseXML
  • 以 XMLDocument 对象方式返回，之后就可以使用JavaScript来处理

1.5 GET 注意事项

• 如果不设置响应头 Cache-Control: no-cache 浏览器将会把响应缓存下来而且再也不无法重新提交请求。你也可以添加一个总是不同的 GET 参数，比如时间戳或者随机数 (详情见 bypassing the cache)

1.6 POST 请求

[!NOTE] POST请求则需要设置RequestHeader告诉后台传递内容的编码方式以及在send方法里传入对应的值

xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type": "application/x-www-form-urlencoded");
xhr.send("key1=value1&key2=value2");

1.7 Ajax如何携带cookie(面试加分)

• ajax会自动带上同源的cookie，不会带上不同源的cookie
• 可以通过前端设置withCredentials为true， 后端设置Header的方式让ajax自动带上不同源的cookie，但是这个属性对同源请求没有任何影响。会被自动忽略。

withCredentials | MDN

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/', true);
xhr.withCredentials = true;
xhr.send(null);