一、Ajax的基本使用

1、核心对象 XMLHttpRequest，AJAX 的所有操作都是通过该对象进行的。

2、发送ajax请求（4个步骤）：

• 创建xhr对象，然后open方法初始化，设置请求方式和请求路径，接着send方法发送请求，从而接收服务端响应回来的数据（通过绑定事件onreadystatechange）

//Ajax发送get请求//1、创建XmlHttpRequset对象
const xhr = new XMLHttpRequest();
//2、通过xhr对象的open方法进行初始化，设置请求方式get和请求url,请求参数（第一个参数使用?,其余使用&）
xhr.open('get', 'http://127.0.0.1:8000/server?a=1&b=2');
//3、发送Ajax请求
xhr.send();
//4、事件绑定，处理服务端返回结果
xhr.onreadystatechange = function () {//处理前判断服务端是否返回所有结果和服务端的状态码是2**if(xhr.readyState === 4){if(xhr.status >= 200 && xhr.status < 300){//处理结果（响应行、响应头、空行、响应体）// //1、响应行// console.log(xhr.status);//状态码// console.log(xhr.statusText);//状态字符串,若成功响应式为OK// console.log(xhr.getAllResponseHeaders());//所有响应头// console.log(xhr.response);//所有响应体//将响应内容显示到dom视图result.innerHTML = xhr.response;}}
}

■ onreadystatechange (on 意思是：当…的时候；readystate：是XmlHttpRequset对象的状态属性,有五个值，分别是0、1、2、3、4 )

0 未初始化
1 open方法调用完毕
2 send方法调用完毕
3 服务端返回部分结果
4 服务端返回所有结果

//Ajax发送post请求(跟get请求不同的地方：open方法第一个参数是post，然后请求参数（请求体）是设置为send方法的参数)//1、创建XmlHttpRequset对象
const xhr = new XMLHttpRequest();
//2、通过xhr对象的open方法进行初始化，设置请求方式post和请求url
xhr.open('post', 'http://127.0.0.1:8000/server');
//3、发送Ajax请求(设置请求参数)
xhr.send('a=1&b=2');
//4、事件绑定，处理服务端返回结果
xhr.onreadystatechange = function () {//处理前判断服务端是否返回所有结果和服务端的状态码是2**if(xhr.readyState === 4){if(xhr.status >= 200 && xhr.status < 300){//处理结果（响应行、响应头、空行、响应体）// //1、响应行// console.log(xhr.status);//状态码// console.log(xhr.statusText);//状态字符串,若成功响应式为OK// console.log(xhr.getAllResponseHeaders());//所有响应头// console.log(xhr.response);//所有响应体//将响应内容显示到dom视图result.innerHTML = xhr.response;}}
}

3、设置请求头（在xhr的send方法之前进行设置）

• 通过xhr.setRequestHeader方法

  //设置请求头//属性：Content-Type：设置请求体的类型xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');//也可以自定义请求头,但是需要服务端设置允许，// 例如服务端的代码中添加响应头的设置：response.setHeader('Access-Control-Allow-Headers', '*');//自定义请求头xhr.setRequestHeader('custom', '111');

✿ 总结一下：在Ajax请求中设置请求行、请求体、请求头

（1）请求行的请求方式、请求路径设置在xhr对象的open方法的第一个参数、第二个参数上

（2）请求体(请求参数-要传输的数据): 请求方式是get时，请求参数拼接在请求路径url上，请求方式是post时，请求参数设置为send方法的参数。

（3）请求头在send方法之前进行设置，通过xhr.setRequsetHeader(‘请求头名’, ‘请求头值’)方法进行设置

4、服务端响应Json数据

■ 服务端代码server.js 文件：

• 通过JSON.stringify(json对象)； 将json对象转化成字符串，然后再响应给客户端

//3、创建路由规则
//请求方式设置为all,可以接收http任意类型的请求
app.all('/server', (request, response) => {//设置响应头(允许跨域)response.setHeader('Access-Control-Allow-Origin', '*');//设置响应头（允许自动自定义请求头）response.setHeader('Access-Control-Allow-Headers', '*');//响应一个json数据（因为send方法的参数类型是字符串，所以需要先对json数据进行转化）const data = {name: '小明',age: 18,sex: '男'};//data 数据类型转化（通过JSON.stringify()方法进行转化）,// 接收的时候通过设置响应体数据格式为json即可,也可以通过JSON.parse(xhr.response) 将数据类型转为json对象let str = JSON.stringify(data);//设置响应体response.send(str);
});

■ 发送ajax请求.html 文件：

• 客户端的html代码中设置xhr响应数据格式为Json； xhr.responseType = ‘json’;

<script>//获取按钮const btn = document.getElementsByTagName('button')[0];const result = document.getElementById('result');btn.onclick = function () {// console.log('test');//接下来发送ajax请求（4个步骤）//1、创建XmlHttpRequset对象const xhr = new XMLHttpRequest();//设置响应的数据格式为jsonxhr.responseType = 'json';//2、通过xhr对象的open方法进行初始化，设置请求方法和请求url，请求参数（第一个参数使用?,其余使用&）xhr.open('get', 'http://127.0.0.1:8000/server');//设置请求头//属性：Content-Type：设置请求体的类型xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');//也可以自定义请求头,但是需要服务端设置允许，// 例如服务端的代码中添加响应头的设置：response.setHeader('Access-Control-Allow-Headers', '*');//自定义请求头xhr.setRequestHeader('custom', '111');//3、发送Ajax请求xhr.send();//4、事件绑定，处理服务端返回结果xhr.onreadystatechange = function () {//处理前判断服务端是否返回所有结果和服务端的状态码是2**if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {//处理结果（响应行、响应头、空行、响应体）// //1、响应行// console.log(xhr.status);//状态码// console.log(xhr.statusText);//状态字符串,若成功响应式为OK// console.log(xhr.getAllResponseHeaders());//所有响应头// console.log(xhr.response);//所有响应体//将响应内容显示到dom视图// result.innerHTML = xhr.response;console.log(xhr.response);}}}}</script>

学习AJAX必知必会（2）~Ajax基本使用，设置请求行、请求体、请求头，服务端响应JSON数据相关推荐

1. 20道经典的AJAX面试题(必知必会)

   1.什么是AJAX,为什么要使用Ajax(请谈一下你对Ajax的认识) 什么是ajax: AJAX是"Asynchronous JavaScript and XML"的缩写.他是指 ...

2. JSON必知必会 学习笔记

   JSON必知必会 读书笔记 术语 可移植性 平台和系统间传输信息的兼容性. JSON JavaScript Object Notation 对象表示法.这里主要是对象表示法,是一种数据交换格式,比XM ...

3. 正则表达式必知必会学习笔记

   正则表达式必知必会学习笔记 @(正则表达式)[regex,正则表达式,正则] 基本概述 <正则表达式必知必会>是一本很薄的书,花了两个小时左右将全书通读了一遍.这本书基本将正则表达式的常用 ...

4. MySQL必知必会学习历程（一）

   MySQL必知必会学习历程(一) 前言 第1章 了解SQL 1.1 关键术语介绍 1.2 数据表解释实例 第2章 MySQL简介 2.1 关键术语介绍 2.2 安装mysql命令行实用程序(可选) 2 ...

5. SQL必知必会-进阶篇[SQL学习笔记]

   本篇博客是对于陈旸老师极客专栏"SQL 必知必会"进阶篇的笔记总结.需要学习资料可私信. 文章目录 第20课 数据库优化 第21课 数据库的设计范式都有哪些? 数据表的键都有哪些? ...

6. 《SQL必知必会》查询部分学习笔记

   目录 <SQL必知必会>查询部分学习笔记 1 前言 2 认识SQL 3 检索数据 4 排序检索数据 5 过滤数据 6 高级数据过滤 7 通配符 8 创建计算字段 9 使用函数处理数据 11 ...

7. 计算机应知应会培训班,必知必会应知应会学习手册信号工定岗题库

   必知必会应知应会学习手册 (信号工) (2009版) 一.信号工必知必会 1．"三不动"安全制度的内容是什么? 答:未联系登记好不动:对设备性能.状态不清楚不动:正在使用中的设备( ...

8. 《MySQL必知必会》学习笔记十(增删改语句使用)------掌握部分

   MySQL必知必会知识预览 第一章--了解SQL 第二章--MySQL简介 第三章--使用MySQL 第四章--检索数据 第五章--排序检索数据 第六章--过滤数据 第七章--数据过滤 第八章--用通 ...

9. 求一份电子电气工程师必知必会第三版的pdf 谢谢了！！！只是自己学习不做商用

   求一份电子电气工程师必知必会第三版的pdf 谢谢了!!!只是自己学习不做商用 求一份电子电气工程师必知必会第三版的pdf 谢谢了!!!只是自己学习不做商用 求一份电子电气工程师必知必会第三版的pdf ...

最新文章

1. 机房收费--上机状态查询
2. C语言 | 基于MPU6050的卡尔曼滤波算法（代码类）
3. 走向REST：将Tomcat与Spring和JAX-RS嵌入（Apache CXF）
4. java-web的mybatis的学习
5. pca 矩阵 迹_主成分分析法(PCA)推导
6. mac的rubywoo怎么读_macrubywoo是几号
7. jpeg-turbo源码下载及使用NDK编译android库
8. Matlab 均值滤波与中值滤波
9. java输入身高体重计算体脂率_追求健康的体脂率，比追求体重数更有意义：一个公式教你计算...
10. 数据：尽管严禁加密货币，中国拥有最多区块链专利
11. Cortex-M0学习
12. C语言_printf
13. sir模型初始值_SIR模型简单了解（Susceptible Infected Recovered Model）
14. wireshark怎么抓包和详细图文教程
15. 大学c语言机试是老师阅卷么,最近，我们找了一些老师聊了聊
16. Python-OpenCV-PS油画滤镜效果
17. Qt中update()和repaint()的区别
18. 写给大一充实，大二不顺，大三迷茫的同学
19. 基于传统方法的单目深度估计
20. 2022面试Android之单例模式

热门文章

1. Linux在中国的没落
2. 微信小程序-关于我们页面模板
3. ppt播放影片时出现提示某些文件可能携带病毒,损害您的计算机,我的PPT没病毒—禁用PowerPoint的病毒提示...
4. 数字孪生智慧场馆｜智慧协同，立体可控，节省方案智能化建设投资
5. 使用javaScript控制文本框输入值
6. guns生成代码步骤演示
7. 电脑城装机奸商防备手册
8. 爱情是男人事业的核动力，七夕和大家分享！
9. 赢在微创新 之 痛点、 和尖叫点
10. 伸缩式推进器行业调研报告 - 市场现状分析与发展前景预测（2021-2027年）