一.概述

概念：AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML
作用：
1. 与服务器进行数据交换：通过AJAX可以给服务器发送请求，并获取服务器响应的数据
  
  使用了AJAX和服务器进行通信，就可以使用 HTML+AJAX来替换JSP页面，可以说是终结了JSP的存在，促使了前后端分离开发

2. 实现异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索时的联想、检查用户名是否可用校验，等等

补充说明：异步&同步通信

二.使用

(1) GET请求

(1.1) 流程

创建 XMLHttpRequest 对象：用于和服务器交换数据

let xhr = new XMLHttpRequest();

向服务器发送请求

xhr.open("GET","url");
xhr.send();

获取服务器响应数据

// 监听请求
xhr.onreadystatechange = function () {// 表示请求成功并且获取到响应数据
if (xhr.readyState == 4 && xhr.status == 200){alert(xhr.responseText);// 拿到数据进行一系列操作....}
}

相关属性说明：

属性	描述
`onreadystatechange`	定义当 readyState 属性发生变化时被调用的函数
`readyState`	保存 XMLHttpRequest 的状态。`0`：请求未初始化 `1`：服务器连接已建立 `2`：请求已收到 `3`：正在处理请求 `4`：请求已完成且响应已就绪
`responseText`	以字符串返回响应数据
responseXML	以 XML 数据返回响应数据
`status`	返回请求的状态号200: "OK"403: "Forbidden"404: "Not Found"如需完整列表请访问 Http 消息参考手册
statusText	返回状态文本（比如 “OK” 或 “Not Found”）

(1.2) 完整代码示例

如果需要，可以通过?在url后面拼接请求参数

 // 1.创建 XMLHttpRequest 对象：用于和服务器交换数据let xhr = new XMLHttpRequest();// 2.向服务器发送请求xhr.open("GET", "http://localhost/newsWork_war_exploded/Search?searchText=" + searchText.value);xhr.send();// 3.获取服务器响应数据xhr.onreadystatechange = function () {// 表示请求成功并且获取到响应数据if (xhr.readyState == 4 && xhr.status == 200){alert(xhr.responseText);// 拿到数据可以进行一系列操作....}}

简单使用示例：

(2) POST请求

post请求发送方式与Get请求类似

(2.1) 流程

创建 XMLHttpRequest 对象：用于和服务器交换数据

let xhr = new XMLHttpRequest();

向服务器发送请求

// 方式一：简单请求
xhr.open("POST","url");
xhr.send();// 方式二：
// 如需像 HTML表单那样发送数据，需通过 `setRequestHeader()` 添加一个 HTTP 头部。
// 请在 `send()` 方法中规定您需要发送的数据
// 2.1 发起请求
xhr.open("POST", 'http://localhost/newsWork_war_exploded/login');
// 2.2 设置HTTP头部
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 2.3 规定需要发送的数据
xhr.send(`username=${username.value}&userPassword=${userPassword.value}`);

获取服务器响应数据

xhr.onreadystatechange = function () {// 表示请求成功并且获取到响应数据
if (xhr.readyState == 4 && xhr.status == 200){alert(xhr.responseText);// 拿到数据可以进行一系列操作....}
}

(2.2) 完整代码示例

post与get不同之处在于需要自己设置HTTP头部并在send中规定传递参数

// 1.创建 XMLHttpRequest 对象：用于和服务器交换数据
let xhr = new XMLHttpRequest();
// 2.向服务器发送请求
xhr.open("POST", 'http://localhost/newsWork_war_exploded/login');
// 2.1设置HTTP头部
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 2.2规定需要发送的数据
xhr.send(`username=${username.value}&userPassword=${userPassword.value}`);// 3.获取服务器响应数据
xhr.onreadystatechange = function () {// 表示请求成功并且获取到响应数据
if (xhr.readyState == 4 && xhr.status == 200){alert(xhr.responseText);// 3.1 拿到数据可以进行一系列操作....}
}

简单使用示例：

三.补充

(1) 发起同步请求

open方法的完整格式如下：

open(method, url, async)
- method：请求的类型：GET 还是 POST
- url：服务器（文件）位置
- async：true（异步）或 false（同步） |

由于其不写默认是true异步请求，所以我们可以不用设置。当如果我们需要使用同步请求时，我们需要手动将第三个参数设置为false

xhr.open("method", 'url', false);
xhr.send();// 不用再监听状态（xhr.onready....)
// 可直接使用结果
alert(xhr.responseText);

不推荐使用，常用于一些快速测试。需要注意的是，当我们发起同步请求时，此操作可能会导致应用程序挂起或停止（无法再执行其他操作）。而通过异步发送，JavaScript 不必等待服务器响应,可继续执行其他操作

(2) Json格式

在post请求中我们也可以传递和接收Json格式的数据:

可以自己将对象转为Json传递

const requestData = JSON.stringify(formDate)
xhr.send(paramDate)

接收并解析Json格式数据

// 方式一：手动解析
const responseData = JSON.parse(xhr.responseText)// 方式二: 设置自动解析
xhr.responseType='json'

【Ajax】异步通信相关推荐

本机Ajax异步通信
昨天我们用JQuery.Ajax解释JQuery样通过Ajax实现异步通信.为了更好的编织知识网,今天我们用一个Demo演示怎样用javascript实现原生Ajax的异步通信. 原生Ajax实现异步 ...
struts2，实现Ajax异步通信
用例需要依赖的jar: struts2-core.jar struts2-convention-plugin.jar,非必须 org.codehaus.jackson.jar,提供json支持用例代 ...
Jquery实现AJAX异步通信
目录 Ajax的简介 Ajax的特点 Ajax向后端发送请求发送请求后端数据回显 Ajax的简介 Ajax(Asynchronous JavaScript and XML),直译为"异步的 ...
Microsoft Asp.Net Ajax框架入门(12) 了解异步通信层
VS 2008 本文通过两个简单的例子,了解Asp.Net Ajax Asynchronous Communication Layer Asp.Net Ajax异步通信层提供了一系列客户端的类,用于客 ...
原生javaScript中使用Ajax实现异步通信
AJAX本质就是在HTTP协议的基础上以异步的方式与服务器进行通信,所谓异步,就是指某段程序执行时不会阻塞其它程序执行,其表现形式为程序的执行顺序不依赖程序本身的书写顺序,相反则为同步. 以下开始简单 ...
Axios实现异步通信
Axios异步通信(通信框架)  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0. ...
前端进阶_狂神Vue笔记_语法指令v-bind、v-on、v-for_表单双绑_组件_Axios异步通信_Vue的生命周期_计算属性_插槽＜slot＞_webpack使用_vue-router路由
四.第一个Vue程序 4.1.什么是MVVM MVVM(Model-View-ViewModel)是一种软件设计模式,由微软WPF(用于替代WinForm,以前就是用这个技术开发桌面应用程序的)和Si ...
《ASP.NET AJAX程序设计——第II卷：客户端Microsoft AJAX Library相关》前言
章节列表:http://www.cnblogs.com/dflying/archive/2007/05/18/751741.html 在最近的一年以及今后的三五年内,我们有理由相信Web应用程序将受到 ...
AJAX（看这一篇就够了，详细）
看这一篇就够了!-Ajax概念详解 AJAX简介: AJAX即Asynchronous JavaScript and XML(异步JavaScript和XML技术),是一种在无须重新加载整个网页的情况 ...
《ASP.NET AJAX程序设计——第II卷：客户端Microsoft AJAX Library与异步通讯层》前言...
在最近的一年以及今后的三五年内,我们有理由相信Web应用程序将受到更多开发者和用户的青睐.作为领路人Google的一系列基于Web的产品完全地颠覆了传统的网页概念,让用户甚至不敢相信基于浏览器的程序竟 ...

【Ajax】异步通信