标签：

Ajax 1. 介绍一下ajax并代码实现 1.1 基本概念

JavaScript 和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', '', 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 参数，比如时间戳或者随机数 (详情见 )

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', '', true); xhr.withCredentials = true; xhr.send(null);

【计算机网络】如何让Ajax通信过程携带Cookie呢？