猿创征文 | 如何使用原生AJAX请求数据-程序员宅基地
技术标签： 前端 ajax javascript
目录
一、什么是AJAX
AJAX英文全称 Asynchronous Javascript And XML（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX描述了一种主要使用脚本操作HTTP的Web应用架构，AJAX应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。
AJAX是异步的JavaScript和XML;
AJAX是一种用于创建更好更快以及交互性更强的Web应用程序的技术;
AJAX是一种独立于Web服务器软件的浏览器技术;
AJAX不是一种新的编程语言，而是一种技术;
AJAX 使用 JavaScript 在 web 浏览器与 web 服务器之间来发送和接收数据（前端后端交互）;
AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求）。
关于HTTP的介绍可以看这里：https://blog.csdn.net/LQ313131/article/details/125872625
二、AJAX请求数据的步骤
浏览器在XMLHttpRequest类上定义了它们的HTTP API，这个类的每个实例都表示一个独立的请求/响应对，并且这个对象的属性和方法允许指定请求细节和提取响应数据。
XMLHttpRequest对象是AJAX的基础，XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest。
第一步：创建XMLHttpRequest的实例对象
var xhr = new XMLHttpRequest();第二步：打开一个连接 open()
open() 方法
参数：
第一个参数：指定HTTP方法或动作，这个字符串不区分大小写，通常大家用大写字母来匹配HTTP协议。
取值有：GET、POST、HEAD、DELETE、OPTIONS、PUT
我们一般常用的有GET和POST请求：
GET：用于常规请求，适用于URL完全指定请求资源，请求对服务器没有任何副作用，服务器的响应是可缓存的。
POST：用于HTML表单，它在请求主体中包含额外数据，且这些数据常存储到服务器上的数据库中。相同URL的重复POST请求从服务器得到的响应可能不同，同时不应该缓存使用这个方法的请求。
第二个参数：URL，它是请求的主体，是相对于文档的URL。跨域请求会报错。
第三个参数：Boolean类型的值，如果值为false代表同步请求，send()方法将阻塞直到请求完成。如果这个参数是 true 或省略，则表示请求是异步的。
xhr.open('get','https://api.muxiaoguo.cn/api/xiaohua?api_key=fd3270a0a9833e20')第三步：设置请求头 setRequestHeader()
在AJAX中，如果需要像 HTML 表单那样 POST 数据，需要使用 setRequestHeader() 方法来添加 HTTP 头。
然后在 send() 方法中规定需要希望发送的数据：setRequestHeader()方法需要在open()和send()方法之间调用。
语法：
xhr.setRequestHeader(属性名称, 属性值);使用：
（1）发送json格式数据：
xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');（2）发送表单数据：
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');（3）发送纯文本(不指定Content-type时，此是默认值)：
xhr.setRequestHeader('Content-type', 'text/plain; charset=utf-8');（4）发送html文本：
xhr.setRequestHeader('Content-type', 'text/html; charset=utf-8');第四步：发送请求 send()
send()方法
参数：
请求主体内容。如果没有，为null，或者省略不写。
xhr.send(); //调用send()之后,请求就会发送到服务器第五步：接收响应
发送请求后，会收到响应，收到响应后，XHR对象的以下属性会被填充上数据：
responseText：作为响应体返回的文本。
responseXML：如果响应的内容类型是"text/xml"或"application/xml"，那就是包含响应数据的 XML DOM 文档。
status：响应的 HTTP 状态。
200 OK：客户端请求成功。
400 Bad Request：客户端请求有语法错误，不能被服务器所理解。
401 Unauthorized：请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用。
403 Forbidden：服务器收到请求，但是拒绝提供服务。
404 Not Found：请求资源不存在，举个例子：输入了错误的URL。
500 Internal Server Error：服务器发生不可预期的错误。
503 Server Unavailable：服务器当前不能处理客户端的请求，一段时间后可能恢复正常，举个例子：HTTP/1.1 200 OK（CRLF）
statusText：响应的 HTTP 状态描述。
readyState：返回HTTP请求状态
“0” 表示open()尚未调用
“1” 表示open()已调用
“2” 表示接收到头信息
“3” 表示接收到响应主体
“4” 表示响应完成
readystatechange：请求状态改变事件。当readyState值改变为4或服务器的响应完成时，所有的浏览器都触发该事件
响应解码 MIME-TYPE：
- MIME类型为text/plain,text/html,text/css 文本类型时，可以使用responseText属性解析。
- MIME类型为XML文档类型时，使用responseXML属性解析。
- 如果服务器发送对象，数组这样的结构化数据作为其响应，他应该传输JSON编码的字符串数据。通过responseText接受到它，可以把它传递给JSON.parse()方法来解析。
xhr.onreadystatechange = function () {
//请求发送完成 && 请求成功
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
}三、常用请求的使用
1、使用get发送无参请求
这里的接口是在木小果上找的，大家也可以去上面找一些接口进行测试。
<body>
<button onclick="getData()">获取数据</button>
<script>
function getData() {
// 1、创建XMLHttpRequest实例对象
var xhr = new XMLHttpRequest()
// 2、打开一个连接
xhr.open('get','https://api.muxiaoguo.cn/api/xiaohua?api_key=fd3270a0a9833e20')
// 3、设置请求头的格式(这里不需要)
// requestHeader()
// 4、发送请求
xhr.send()
// 5、接受响应数据
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// 转换为JSON对象
console.log(JSON.parse(xhr.responseText));
var res = JSON.parse(xhr.responseText)
// 创建DOM节点
var div = document.createElement('div')
//数据赋值
div.innerHTML = res.data.content
// 将节点添加到DOM结构中
document.body.appendChild(div)
}
}
}
</script>
</body> 
2、使用get发送有参请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入qs序列化工具 -->
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.min.js"></script>
</head>
<body>
<!-- 输入框 -->
<input type="text" name="" id="inp">
<!-- 获取数据的按钮 -->
<button onclick="getWeatherData()">获取天气数据</button>
<script>
// 获取用户输入的值
var inp = document.getElementById('inp')
var cityName;
inp.oninput = function () {
cityName = this.value
}
function getWeatherData() {
var request = new XMLHttpRequest()
// 第一种方式 拼接字符串
// request.open('get', 'https://api.muxiaoguo.cn/api/tianqi?city=' + cityName + '&type=1&api_key=779d7e46708290a5')
// 第二种方式 封装参数对象
var params = {
city: cityName,
type: 1,
api_key: '779d7e46708290a5'
}
//Qs.stringify()可以将对象转换成查询字符串
// console.log(Qs.stringify(params)); //type=1&api_key=779d7e46708290a5
request.open('get', 'https://api.muxiaoguo.cn/api/tianqi?' + Qs.stringify(params))
request.send()
request.onreadystatechange = function () {
if (request.readyState === 4 && request.status === 200) {
// console.log(request.responseText);
var res = JSON.parse(request.responseText)
// console.log(res);
alert(`${cityName}的温度是${res.data.temp}`)
}
}
}
</script>
</body>
</html>
3、使用post发送无参请求
和get无参请求一样，只要把get改成post即可：
<body>
<button onclick="getData()">获取数据</button>
<script>
function getData() {
var xhr = new XMLHttpRequest()
xhr.open('post','https://api.muxiaoguo.cn/api/xiaohua?api_key=fd3270a0a9833e20')
xhr.send()
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(JSON.parse(xhr.responseText));
var res = JSON.parse(xhr.responseText)
var div = document.createElement('div')
div.innerHTML = res.data.content
document.body.appendChild(div)
}
}
}
</script>
</body>4、使用post发送有参请求
登录的时候会使用post发送有参请求：
<body>
<button onclick="login()">登录</button>
<script>
function login() {
var request = new XMLHttpRequest()
request.open('post','登录接口地址')
// 配置参数
var params = {
username: 'xxxx',
password: 'xxxx'
}
// 设置请求头
request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
request.send(JSON.stringify(params))
request.onreadystatechange = function () {
if (request.readyState === 4 && request.status === 200) {
console.log(request.responseText);
}
}
}
</script>
</body>智能推荐
如何配置DNS服务的正反向解析_dns反向解析-程序员宅基地
文章浏览阅读3k次，点赞3次，收藏13次。root@server ~]# vim /etc/named.rfc1912.zones #添加如下内容，也可直接更改模板。[root@server ~]# vim /etc/named.conf #打开主配置文件，将如下两处地方修改为。注意：ip地址必须反向书写，这里文件名需要和反向解析数据文件名相同。新建或者拷贝一份进行修改。nslookup命令。_dns反向解析
设置PWM占空比中TIM_SetCompare1，TIM_SetCompare2,TIM_SetCompare3,TIM_SetCompare4分别对应引脚和ADC通道对应引脚-程序员宅基地
文章浏览阅读2.5w次，点赞16次，收藏103次。这个函数TIM_SetCompare1，这个函数有四个，分别是TIM_SetCompare1，TIM_SetCompare2，TIM_SetCompare3，TIM_SetCompare4。位于CH1那一行的GPIO口使用TIM_SetCompare1这个函数,位于CH2那一行的GPIO口使用TIM_SetCompare2这个函数。使用stm32f103的除了tim6和tim7没有PWM..._tim_setcompare1
多线程_进程和线程，并发与并行，线程优先级，守护线程，实现线程的四种方式，线程周期；线程同步，线程中的锁，Lock类，死锁，生产者和消费者案例-程序员宅基地
文章浏览阅读950次，点赞33次，收藏19次。多线程_进程和线程，并发与并行，线程优先级，守护线程，实现线程的四种方式，线程周期；线程同步，线程中的锁，Lock类，死锁，生产者和消费者案例
在 Linux 系统的用户目录下安装 ifort 和 MKL 库并配置_在linux系统的用户目录下安装ifort和mkl库并配置-程序员宅基地
文章浏览阅读2.9k次。ifort 编译器的安装ifort 编译器可以在 intel 官网上下载。打开https://software.intel.com/content/www/us/en/develop/tools/oneapi/components/fortran-compiler.html#gs.7iqrsm点击网页中下方处的 Download, 选择 Intel Fortran Compiler Classic and Intel Fortran Compiler(Beta) 下方对应的版本。我选择的是 l_在linux系统的用户目录下安装ifort和mkl库并配置
使用ftl文件生成图片中图片展示无样式，不显示_ftl格式pdf的样式调整-程序员宅基地
文章浏览阅读689次，点赞7次，收藏8次。些项目时需要一个生成图片的方法，我在网上找到比较方便且适合我去设置一些样式的生成方式之一就是使用Freemarker，在对应位置上先写好一个html格式的ftl文件，在对应位置用${参数名}填写上。还记得当时为了解决图片大小设置不上，搜索了好久资料，不记得是在哪看到的需要在里面使用width与height直接设置，而我当时用style去设置，怎么都不对。找不到，自己测试链接，准备将所有含有中文的图片链接复制一份，在服务器上存储一份不带中文的文件。突然发现就算无中文，有的链接也是打不开的。_ftl格式pdf的样式调整
orin Ubuntu 20.04 配置 Realsense-ROS_opt/ros/noetic/lib/nodelet/nodelet: symbol lookup -程序员宅基地
文章浏览阅读1.5k次，点赞6次，收藏12次。拉取librealsense。_opt/ros/noetic/lib/nodelet/nodelet: symbol lookup error: /home/admin07/reals
随便推点
操作系统精选习题——第四章_系统抖动现象的发生由什么引起的-程序员宅基地
文章浏览阅读3.4k次，点赞3次，收藏29次。一.单选题二.填空题三.判断题一.单选题静态链接是在( )进行的。A、编译某段程序时B、装入某段程序时C、紧凑时D、装入程序之前Pentium处理器(32位)最大可寻址的虚拟存储器地址空间为( )。A、由内存的容量而定B、4GC、2GD、1G分页系统中,主存分配的单位是( )。A、字节B、物理块C、作业D、段在段页式存储管理中，当执行一段程序时，至少访问()次内存。A、1B、2C、3D、4在分段管理中，（ ）。A、以段为单位分配，每._系统抖动现象的发生由什么引起的
UG NX 12零件工程图基础_ug-nx工程图-程序员宅基地
文章浏览阅读2.4k次。在实际的工作生产中，零件的加工制造一般都需要二维工程图来辅助设计。UG NX 的工程图主要是为了满足二维出图需要。在绘制工程图时，需要先确定所绘制图形要表达的内容，然后根据需要并按照视图的选择原则，绘制工程图的主视图、其他视图以及某些特殊视图，最后标注图形的尺寸、技术说明等信息，即可完成工程图的绘制。1.视图选择原则工程图合理的表达方案要综合运用各种表达方法，清晰完整地表达出零件的结构形状，并便于看图。确定工程图表达方案的一般步骤如下：口分析零件结构形状由于零件的结构形状以及加工位置或工作位置的不._ug-nx工程图
智能制造数字化工厂智慧供应链大数据解决方案（PPT）-程序员宅基地
文章浏览阅读920次，点赞29次，收藏18次。原文《智能制造数字化工厂智慧供应链大数据解决方案》PPT格式主要从智能制造数字化工厂智慧供应链大数据解决方案框架图、销量预测+S&OP大数据解决方案、计划统筹大数据解决方案、订单履约大数据解决方案、库存周转大数据解决方案、采购及供应商管理大数据模块、智慧工厂大数据解决方案、设备管理大数据解决方案、质量管理大数据解决方案、仓储物流与网络优化大数据解决方案、供应链决策分析大数据解决方案进行建设。适用于售前项目汇报、项目规划、领导汇报。
网络编程socket accept函数的理解_当在函数 'main' 中调用 'open_socket_accept'时.line: 8. con-程序员宅基地
文章浏览阅读2w次，点赞38次，收藏102次。在服务器端，socket()返回的套接字用于监听（listen）和接受（accept）客户端的连接请求。这个套接字不能用于与客户端之间发送和接收数据。 accept()接受一个客户端的连接请求，并返回一个新的套接字。所谓“新的”就是说这个套接字与socket()返回的用于监听和接受客户端的连接请求的套接字不是同一个套接字。与本次接受的客户端的通信是通过在这个新的套接字上发送和接收数_当在函数 'main' 中调用 'open_socket_accept'时.line: 8. connection request fa
C#对象销毁_c# 销毁对象及其所有引用-程序员宅基地
文章浏览阅读4.3k次。对象销毁对象销毁的标准语法Close和Stop何时销毁对象销毁对象时清除字段对象销毁的标准语法Framework在销毁对象的逻辑方面遵循一套规则，这些规则并不限用于.NET Framework或C#语言；这些规则的目的是定义一套便于使用的协议。这些协议如下:一旦销毁，对象不可恢复。对象不能被再次激活，调用对象的方法或者属性抛出ObjectDisposedException异常重复地调用对象的Disposal方法会导致错误如果一个可销毁对象x 包含或包装或处理另外一个可销毁对象y，那么x的Disp_c# 销毁对象及其所有引用
笔记-中项/高项学习期间的错题笔记1_大型设备可靠性测试可否拆解为几个部分进行测试-程序员宅基地
文章浏览阅读1.1w次。这是记录，在中项、高项过程中的错题笔记；https://www.zenwu.site/post/2b6d.html1. 信息系统的规划工具在制订计划时，可以利用PERT图和甘特图；访谈时，可以应用各种调查表和调查提纲；在确定各部门、各层管理人员的需求，梳理流程时，可以采用会谈和正式会议的方法。为把企业组织结构与企业过程联系起来，说明每个过程与组织的联系，指出过程决策人，可以采用建立过程／组织（Process/Organization，P/O）矩阵的方法。例如，一个简单的P/O矩阵示例，其中._大型设备可靠性测试可否拆解为几个部分进行测试