web前端之AJAX

AJAX–Asynchronous JavaScript And XML.,一种前后端之间进行通信的技术,从英文全称中足以看出这些技术综合了JavaScript,XML,DOM等方面的技术.
AJAX常用于前后端的通信.利用AJAX技术前端向后端请求数据,在得到数据后再在前端页面上异步更新页面

前后端利用AJAX进行数据传输大致工作流程如下:
1 网页中事件发生
2 有JavaScript创建XMLHttpRequest对象
3 该对象向web服务器发送请求
4 服务器处理请求
5 服务器将响应发送回网页
6 JavaScript读取响应
7 JavaScript执行正确的动作(如更新页面)

由上面也可以看出AJAX技术的核心是XMLHttpRequest实例
现代浏览器除IE5\6外都支持该对象,为保证所有浏览器都能使用AJAX技术可按以下代码创建相应对象:

var xhttp;
if (window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();
    } else {
    // code for IE6, IE5,只支持ActiveX对象
     xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

注意:使用AJAX技术存在跨域问题

XMLHttpRequest 对象方法

abort()	取消当前请求
getAllResponseHeader	返回头部信息
getResponseHeader	返回特定的头部信息
open(method,url,async,username,password)	建立请求,method指定GET或POST方法,url指定请求文件的地址,async指定异步(true)还是同步(false),uesr指定用户名(可选),password指定密码(可选)
send()	发送GET类请求到服务器
send(string )	发送POST类请求到服务器
SetRequestHeader()	向要发送的报头添加标签/值对

getAllResponseHeaders() 方法
getAllResponseHeaders() 方法返回所有来自服务器响应的头部信息,例:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.getAllResponseHeaders();
  }
};

getResponseHeader() 方法
getResponseHeader() 方法返回来自服务器响应的特定头部信息。

var xhttp = new XMLHttpRequest();
//Last-Modified是http请求头部的一部分
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.getResponseHeader("Last-Modified");
  }
};
//将响应的内容回传
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send(); 

注:
1 一般不推荐指定async为同步的
2 GET与POST的选择
GET 比 POST 更简单更快，可用于大多数情况下。不过在以下情况始终使用 POST：

1 缓存文件而不是点击选项（更新服务器上的文件或数据库）
2 向服务器发送大量数据（POST 无大小限制）
3 发送用户输入（可包含未知字符），POST 比 GET 更强大更安全

GET请求

//向 URL 添加一个唯一的 ID,避免获得一个缓存的结果
xhttp.open("GET", "demo_get.jsp?t=" + Math.random(), true);
xhttp.send();
//发送信息
xhttp.open("GET", "demo_get2.jsp?fname=Bill&lname=Gates", true);

POST请求

//类似HTML表单一样传输数据,利用setRequestHeader() 添加一个 HTTP 头部
//setRequestHeader(header, value),header：规定头部名称,value：规定头部值
xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");

XMLHttpRequest 对象属性

onreadystatechange	定义当 readyState 属性发生变化时被调用的函数
readyState	保存XMLHttpRequest的状态,0-请求未初始化,1-服务器连接已建立,2-请求已收到,3-正在处理请求,4-请求已完成且响应已就绪
reponseText	以字符串形式返回响应数据
reponseXML	以XML形式返回响应数据
status	返回请求的状态号,200-“OK”,403-“Forbidden”,404-“Not Found”
statusText	返回状态文本,如"OK"/“Not Found”

onreadystatechange 属性:

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.responseText;
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

注:onreadystatechange 被触发五次（0-4），每次 readyState 都发生变化。
responseText 属性
responseText 属性以 JavaScript 字符串的形式返回服务器响应:

document.getElementById("demo").innerHTML = xhttp.responseText;

responseXML 属性
XML HttpRequest 对象有一个內建的 XML 解析器.ResponseXML 属性以 XML DOM 对象返回服务器响应。使用此属性可以把响应解析为 XML DOM 对象：

xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
  txt += x[i].childNodes[0].nodeValue + "<br>";
  }
document.getElementById("demo").innerHTML = txt;
xhttp.open("GET",  "music_list.xml", true);
xhttp.send();

常见用法:

从数据库读取数据:

function showCustomer(str) {
  var xhttp; 
  //检查是否选取客户
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  xhttp = new XMLHttpRequest();
  //创建当服务器响应就绪时执行的函数
  xhttp.onreadystatechange = function() {
    if (this.readyState  == 4 && this.status == 200) {
    document.getElementById("txtHint").innerHTML  = this.responseText;
    }
  };
  //参数 q 被添加到 URL（带有下拉列表的内容）
  xhttp.open("GET",  "getcustomer.jsp?q=" + str, true);
  xhttp.send();
} 

事实上,上面这段代码可做前端请求类型的模板,很多地方都适用

引用如下

https://www.w3school.com.cn/js/js_ajax_intro.asp