1. AJAX 简介

AJAX（Asynchronous Javascript And XML）异步 JavaScript 和 XML 是一种 Web 数据交互方式，是一种独立于 Web 服务器软件的浏览器技术。核心的依赖是浏览器提供的 XMLHttpRequest 对象，这个对象使得浏览器可以发出 HTTP 请求与接收 HTTP 响应。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，使程序能够更快地回应用户的操作。

AJAX 工作原理
AJAX 是基于现有的 Internet 标准并且联合使用它们：
· XMLHttpRequest 对象 (异步的与服务器交换数据)
· JavaScript/DOM (信息显示/交互)
· CSS (给数据定义样式)
· XML (作为转换数据的格式)

2. 快速开始

使用 XMLHttpRequest 发送 Ajax 请求的示例代码
看注释应该可以明白大部分内容了。

<script>function myFunction() {// 构造表单数据let formData = new FormData();formData.append("userName", "Ouseki");formData.append("blog", "ITGodRoad");// 创建 XMLHTTPRequest 对象let xhr = new XMLHttpRequest();// 设置 xhr 请求的超时时间xhr.timeout = 3000;// 设置响应返回的数据格式xhr.responseType = "text";// 创建一个 post 请求，采用异步xhr.open('POST', "http://localhost:8080/ITGodRoad/testAjax.do", true);// 设置请求头的内容格式xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");// 注册相关事件回调处理函数const demo = document.getElementById("demo");xhr.onload = function () {//如果请求成功if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {demo.innerHTML = xhr.responseText;}}xhr.ontimeout = function (e) {demo.innerHTML = "异步处理请求超时";};xhr.onerror = function (e) {demo.innerHTML = "异步处理发生错误";};xhr.upload.onprogress = function (e) {demo.innerHTML = "异步处理上传进度";};// 发送数据xhr.send(formData);}
</script>

java 后台接收端代码

@RequestMapping(value = "/testAjax.do", produces = { "text/plain;charset=utf-8" }, method = RequestMethod.POST)
public String testAjax(HttpServletRequest request) {Map<String, String[]> parameterMap = request.getParameterMap();StringBuilder stringBuilder = new StringBuilder();for (String key : parameterMap.keySet()) {String[] value = parameterMap.get(key);stringBuilder.append(key).append(" : ").append(Arrays.toString(value)).append("\n");}return stringBuilder + "AJAX 请求成功！";
}

------WebKitFormBoundary 是浏览器从客户端向服务器端传送 HTML 标签数据（文本框、密码框、文件上传框 … ）所使用的分隔符，一般会在分隔符后附加一串十六进制的数以示区别。网页元素都被嵌入于 form 表单，所以被称为 formboundary 。
客户端需要把网页数据打包成一个数据包发送给服务器，组装的时候用分隔符把所有网页元素的标签数据分隔起来。服务器收到数据包后，先从数据包的头部固定位置寻找到分隔符字串，再据此拆分整个数据包并从中一一读取HTML的所有标签数据。

3. XMLHTTPRequest 对象

XMLHTTPRequest 是 AJAX 的基础。是一组 API 函数集，可被 JavaScript、JScript、VBScript 以及其它 web 浏览器内嵌的脚本语言调用，通过 HTTP 在浏览器和 web 服务器之间收发 XML 或其它数据。

XMLHTTPRequest 方法 / 属性
XMLHttpRequest 对象用于和服务器交换数据。

方法 / 属性	描述
open(method,url,async)	规定请求的类型¹、URL 以及是否异步处理请求
send(data)	将请求发送到服务器
setRequestHeader(header,value)	向请求添加 HTTP 头²
getAllResponseHeaders()	获取 response 中的所有 header 字段³
getResponseHeader(header)	获取某个指定 header 字段的值
withCredentials	布尔值类型，是否使用资格证书来创建一个跨站点访问控制请求，默认 false
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化⁴
status	详见→浏览器状态码
responseType	指定响应的数据类型，默认为字符串⁵
responseText	获得字符串形式的响应数据
responseXML	获得 XML 形式的响应数据

3.1 XMLHTTPRequest 请求

创建 XMLHttpRequest 对象
所有现代浏览器均内建了 XMLHttpRequest 对象，直接 new 即可。

let xhr = new XMLHttpRequest();

发送 GET 请求
避免同一请求得到缓存结果，应向 URL 添加一个唯一的 ID。

// 加入随机数，避免得到缓存的结果
xhr.open("GET", "http://localhost:8080/ITGodRoad/testAjax.do?t=" + Math.random(), true);
// 发送带有普通参数的请求
xhr.open("GET", "http://localhost:8080/ITGodRoad/testAjax.do?userName=Ouseki&blog=ITGodRoad", true);
xhr.send();

发送 POST 请求
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定发送的数据。
注意：设置请求头要在 open 之后。

*************************************************************************
// 构造表单数据
let formData = new FormData();
formData.append("userName", "Ouseki");
formData.append("blog", "ITGodRoad");
.........................................................................
// 发送 post 请求
xhr.open('POST', "http://localhost:8080/ITGodRoad/testAjax.do", true);
.........................................................................
// 模拟表单请求
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 如果 data 是 Document 类型，同时也是 HTML Document 类型，默认值为：
xhr.setRequestHeader("Content-type", "text/html");
// 如果 data 是 DOMString 类型，默认值为：
xhr.setRequestHeader("Content-type", "text/plain");
// 如果 data 是 FormData 类型，默认值为：（通常上传文件时使用此类型）
xhr.setRequestHeader("Content-type", "multipart/form-data");
.........................................................................
// post 普通参数
xhr.send("fname=Henry&lname=Ford");
// post 对象参数
xhr.send(formData);
*************************************************************************

3.2 XMLHTTPRequest 响应

如需获得来自服务器的响应，需使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

处理响应数据
如果来自服务器的响应是 XML，需要对 XML 对象进行解析。

// responseText
document.getElementById("demo").innerHTML = xhr.responseText;
// responseXML
const xmlDoc = xhr.responseXML;
let txt = "";
let data = xmlDoc.getElementsByTagName("ARTIST");
for (let i = 0; i < data.length; i++) {txt += data[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML=txt;

xml 示例文件
展示部分。

<?xml version="1.0" encoding="UTF-8"?>
<CATALOG><CD><TITLE>Empire Burlesque</TITLE><ARTIST>Bob Dylan</ARTIST><COUNTRY>USA</COUNTRY><COMPANY>Columbia</COMPANY><PRICE>10.90</PRICE><YEAR>1985</YEAR></CD><CD><TITLE>Hide your heart</TITLE><ARTIST>Bonnie Tyler</ARTIST><COUNTRY>UK</COUNTRY><COMPANY>CBS Records</COMPANY><PRICE>9.90</PRICE><YEAR>1988</YEAR></CD><CD><TITLE>Greatest Hits</TITLE><ARTIST>Dolly Parton</ARTIST><COUNTRY>USA</COUNTRY><COMPANY>RCA</COMPANY><PRICE>9.90</PRICE><YEAR>1982</YEAR></CD>...
<CATALOG>

demo
完整 Demo 示例。

<script>function myFunction() {// 创建 XMLHTTPRequest 对象let xhr = new XMLHttpRequest();// 创建一个 get 请求，采用异步xhr.open('GET', "cd_catalog.xml", true);// 注册相关事件回调处理函数const demo = document.getElementById("demo");xhr.onload = function () {//如果请求成功if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {const xmlDoc = xhr.responseXML;let txt = "";let data = xmlDoc.getElementsByTagName("ARTIST");for (let i = 0; i < data.length; i++) {txt += data[i].childNodes[0].nodeValue + "<br>";}demo.innerHTML = txt;}}xhr.send();}
</script><div><h3 id="demo">这是一个有趣的世界</h3><button type="button" onclick="myFunction()">尝试一下</button>
</div>

【每日一面】

Http、XMLHttpRequest、Ajax 的关系

Http：是浏览器和 web 服务器交换数据的协议，规范。
XMLHttpRequest：是浏览器实现的一组 api 函数，使用这些函数，浏览器再通过 Http 协议请求和发送数据。
Ajax：不是一种技术，而是综合多种技术实现交互的模式名称：用 html 展示页面 + 使用 XMLHttpRequest 请求数据 + 使用 js 操作 dom
Ajax 对象封装依赖 → XMLHttpRequest 对象封装依赖 → Http 协议

method：请求的类型：GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步） ↩︎
header: http 头的名称
value: http 头的值 ↩︎
客户端允许获取的 response header 字段只限于 “simple response header” 和 “Access-Control-Expose-Headers” 。如果调用限制以外的 header 字段，就会报 Refused to get unsafe header 的错误。 ↩︎
0: UNSENT 请求未初始化（还没有调用 open()）
1: OPENED 服务器连接已建立，但是还没有发送（还没有调用 send()）
2: HEADERS_RECEIVED 请求已发送，正在处理中（通常现在可以从响应中获取内容头）
3: LOADING 请求处理中，正在下载响应体，通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4: DONE 响应已完成，您可以获取并使用服务器的响应了 ↩︎
“text” String 字符串（不设置时默认为字符串）
“document” Document 对象（希望返回 XML 格式数据时使用）
“json” javascript 对象
“blob” Blob 对象
“arrayBuffer” ArrayBuffer 对象 ↩︎

【前端三剑客】JavaScript 网页脚本语言（AJAX）相关推荐

【前端三剑客】JavaScript 网页脚本语言（速览）
更新日期:2022/04/10 只要我们一起大笑,可怕的东西就会跑光光了. 目録 1. JavaScript 简介 2. 快速开始 2. 输出数据 3. 数据类型和变量 3.1 JavaScript ...
c语言程序设计答案万年历备忘录,基于JavaScript(网页脚本语言)编写的万年历(含源文件)...
var i, sum = 348 for(i=0x8000; i>0x8; i>>=1) sum += (lunarInfo[y-1900] & i)? 1: 0 retur ...
JavaScript客户端脚本语言的应用
1.使用HTML中的表单.表格以及JavaScript客户端脚本语言实现如下图所示的简易计算器页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
前端三剑客 - JavaScript
1. 初始JavaScript JavaScript简称JS 是一个世界上最流行的语言之一. 通过解释器运行的脚本(Script)语言主要在客户端(浏览器)上运行. 脚本语言也叫做解释型语言,对于我 ...
javascript jc脚本语言
JAVA 是网页里面使用的脚本遇见,非常强大的语言. 基本语法分为: 注释语法,1单行注释// , 2多好注释/**/ 输出语法: (信息) alert ...
55个常用的JavaScript网页脚本
1. οncοntextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 <table border οncοntextmenu ...
Lesson01：网页脚本语言
文章目录一.JavaScript的思维导图二.下载开发工具三.JavaScript的引入方式(通过标签script进行引入) 1.内嵌式 2.外链式 3.行内式四.注释 1.单行注释 2.多行 ...
网页/前端大作业 html+css 无js 前端三剑客大一网页大作业 9个页面
index界面登录/迎接界面 html部分 <html><head><meta charset="utf-8"><title>我只 ...
前端三剑客：JavaScript
一.JavaScript的历史 1.JavaScript的历史 1990年底,欧洲核能研究组织(CERN)科学教Tim Berners-Lee,在全世界最大的电脑网络--互联网的基础上,发明了万维网( ...

【前端三剑客】JavaScript 网页脚本语言（AJAX）

目録