AJAX：整理3：原生AJAX的相关操作

注意AJAX的步骤 

// 1.创建对象
const xhr = new XMLHttpRequest()// 2.初始化 设置 请求方法 和 url
xhr.open("GET", "http://localhost:9090/server")// 3.发送
xhr.send()// 4.事件绑定 处理服务端返回的结果
// readyState 是xhr对象中的属性，表示状态 0 1 2 3 4  
// 0 表示初始值； 1 表示open()方法调用完毕；2 表示send()方法调用完毕；3 表示服务端返回了部分结果；4 表示服务端返回了所有的结果// change 改变
xhr.onreadystatechange = function () { // 判断状态码if (xhr.readyState === 4) {// 判断状态码if (xhr.status >= 200 && xhr.status < 300) {// 获取服务端返回的结果 (行 头 空行 响应体)console.log(xhr.status) // 响应行里面的响应状态码  200console.log(xhr.statusText) // 状态字符串  OKconsole.log(xhr.getAllResponseHeaders()) // 所有响应头console.log(xhr.response)  // 响应体const result = xhr.response }}}

1. GET 请求

需求：向服务端发送get请求，拿到服务端返回的结果，并显示在div盒子中

（1）server.js

// 1. 引入express
const express = require('express')// 2. 创建服务器
const app = express()// 3.创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (request, response)  => {// 设置响应头  设置允许跨域  !!!response.setHeader('Access-Control-Allow-Origin', '*')// 设置响应体response.send('HELLO AJAX GET')
})// 4. 监听端口
app.listen(9090, () => {console.log("服务已启动， 9090端口监听中...")
})

（2）前端页面并渲染服务端返回的结果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ajax GET 请求</title><style>#result {width: 200px;height: 100px;border: 1px solid pink;}</style>
</head>
<body><button id="btn">点击发送请求</button><div id="result"></div><script>// 获取button元素const btn = document.querySelector("#btn")// 绑定事件btn.addEventListener("click", function () {// console.log("test")// 1.创建对象const xhr = new XMLHttpRequest()// 2.初始化 设置请求方法和urlxhr.open("GET", "http://localhost:9090/server?a=100&b=30") // 携带参数// 3.发送xhr.send()// 4.事件绑定 处理服务端返回的结果// readyState 是xhr对象中的属性，表示状态 0 1 2 3 4// change 改变xhr.onreadystatechange = function () { // 判断状态码if (xhr.readyState === 4) {// 判断状态码if (xhr.status >= 200 && xhr.status < 300) {// 获取服务端返回的结果 (行 头 空行 响应体)console.log(xhr.status) // 响应行里面的响应状态码 200console.log(xhr.statusText) // 状态字符串  OKconsole.log(xhr.getAllResponseHeaders()) // 所有响应头console.log(xhr.response)const result = xhr.response // 响应体// 把结果放到div中document.querySelector("#result").innerHTML = result}}}})</script>
</body>
</html>

 

2. GET请求携带参数

3. POST请求 

当鼠标放在div盒子上时，向服务端发送post请求，将响应的结果在div中呈现

 （1）server.js

// 1. 引入express
const express = require('express')// 2. 创建服务器
const app = express()// 3.创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.post('/server', (request, response)  => {// 设置响应头  设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// 设置响应体response.send('HELLO AJAX POST')
})// 4. 监听端口
app.listen(9090, () => {console.log("服务已启动， 9090端口监听中...")
})

（2）前端页面并渲染数据到盒子中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ajax POST 请求</title><style>#result {width: 200px;height: 100px;border: 1px solid pink;}</style>
</head>
<body><div id="result"></div><script>// 获取元素对象const result = document.querySelector('#result')// 绑定事件result.addEventListener('mouseover', function (){// console.log('鼠标移动')// 1. 创建对象const xhr = new XMLHttpRequest()// 2. 初始化 设置类型与URLxhr.open('POST', 'http://localhost:9090/server')// 3. 发送xhr.send()// 4. 事件绑定xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {// 获取服务器响应的数据const data = xhr.responseText// 把数据渲染到页面result.innerHTML = data}}}})</script>
</body>
</html>

4. POST请求中设置参数

 

 5.  AJAX设置请求头信息

 

但是如果自定义一个请求头呢，浏览器会有安全机制，不让发送

如果我们非要发的话，可以用以下的方法 

6. 服务端响应JSON数据

需求：当点击键盘时，会向服务端发送请求，服务端响应结果会在div盒子中呈现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#result {width: 200px;height: 100px;border: 1px solid pink;}</style></head>
<body><div id="result"></div><script>// 获取元素对象const result = document.querySelector('#result')window.onkeydown = function(e){// console.log(e.key, e.keyCode)// 1. 发送请求const xhr = new XMLHttpRequest()// 设置响应体类型// xhr.responseType = 'json'  // 可以自动转换// 2. 初始化 设置请求方法和urlxhr.open('GET', 'http://localhost:9090/server_json')// 3. 发送xhr.send()// 4.事件绑定xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {// 获取服务器响应的数据const data = xhr.responseresult.innerHTML = dataconsole.log(data)}}}}</script>
</body>
</html>

 

 1. 手动转换

2.自动转换

7. AJAX解决IE缓存问题

IE浏览器会对请求结果作一个缓存，这样就会导致一个问题，就是下一次再发送请求时，走的就是本地的缓存，而并不是服务器返回的最新数据

/* 针对IE缓存问题 */
app.all('/ie', (request, response)  => {// 设置响应头  设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// 响应头response.setHeader('Access-Control-Allow-Headers', '*')  // 所有类型的头信息都可以接受// 设置响应体response.send("hello IE")
})
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#result {width: 200px;height: 100px;border: 1px solid pink;}</style>
</head>
<body><button>点击发送请求</button><div id="result"></div><script>// 获取元素const btn = document.getElementsByTagName('button')[0]const result = document.getElementById('result')btn.addEventListener("click", function() {const xhr = new XMLHttpRequest()xhr.open('GET', 'http://localhost:9090/ie?t='+Date.now())  // 加个参数解决IE缓存问题xhr.send();xhr.onreadystatechange = function() {if(xhr.readyState === 4) {if(xhr.status >= 200 && xhr.status < 300) {// 处理服务端返回的结果result.innerHTML = xhr.response;}}}})</script>
</body>
</html>

 

8. AJAX请求超时以及网络异常处理

1.请求超时

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#result {width: 200px;height: 100px;border: 1px solid pink;}</style>
</head>
<body><button>点击发送请求</button><div id="result"></div><script>// 获取元素const btn = document.getElementsByTagName('button')[0]const result = document.getElementById('result')btn.addEventListener("click", function() {const xhr = new XMLHttpRequest()// 超时设置xhr.timeout = 2000// 超时回调xhr.ontimeout = function() {alert('网络异常，请稍后重试！')}xhr.open('GET', 'http://localhost:9090/delay')xhr.send()xhr.onreadystatechange = function() {if(xhr.readyState === 4) {if(xhr.status >= 200 && xhr.status < 300) {// 处理服务端返回的结果result.innerHTML = xhr.response;}}}})</script>
</body>
</html>

 

 

 

 2. 网络异常

 

9. AJAX取消请求

 

 

10. AJAX解决请求重复发送问题

当请求响应比较慢的时候，用户就会疯狂地点击，这时候服务器就会接收到大量的相同请求，服务器压力比较大

所以我们需要保证始终只有一个请求在发送，这样服务器的压力就会小一些 

 

 

11. jQuery发送AJAX请求

首先需要引入jQuery资源

11.1 发送GET请求

app.get('/jquery', (request, response)  => {// 设置响应头  设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// 响应头response.setHeader('Access-Control-Allow-Headers', '*')  // 所有类型的头信息都可以接受response.send("hello jQuery AJAX")
})

 

$("#btn1").click(function() {// 第一个参数是url, 第二个参数是发送的参数（对象的形式）, 第三个参数是回调函数$.get("http://localhost:9090/jquery", {a:100, b:200}, function(data, status) {console.log(data)})
})

 

 

11.2 发送POST请求

app.post('/jquery', (request, response)  => {// 设置响应头  设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// 响应头response.setHeader('Access-Control-Allow-Headers', '*')  // 所有类型的头信息都可以接受response.send("hello jQuery AJAX POST")
})
$("#btn2").click(function() {$.post("http://localhost:9090/jquery", {a:100, b:200}, function(data, status) {console.log(data)})
})

POST请求携带的参数不会跟在url后面 

11.3  设置响应体的数据类型

/* jQuery服务 */
app.all('/jquery', (request, response)  => {// 设置响应头  设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// 响应头response.setHeader('Access-Control-Allow-Headers', '*')  // 所有类型的头信息都可以接受const data = {name: "xiexu", age: 20}response.send(JSON.stringify(data))
})

服务端发送json格式的数据

 

 

11.4 jQuery通用方法发送AJAX请求

 

 

12. Axios发送AJAX请求

首先需要引入axios工具包 

 12.1 发送GET请求

app.get('/axios', (request, response)  => {// 设置响应头  设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// 响应头response.setHeader('Access-Control-Allow-Headers', '*')  // 所有类型的头信息都可以接受response.send("hello Axios AJAX")
})

获取的数据是比较完整的

 

12.2 发送POST请求

 

/* axios 服务*/
app.all('/axios', (request, response)  => {// 设置响应头  设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// 响应头response.setHeader('Access-Control-Allow-Headers', '*')  // 所有类型的头信息都可以接受response.send("hello Axios AJAX POST")
})

 

12.3 Axios通用方式发送AJAX请求

 

 

13. fetch() 函数发送AJAX请求 

/* fetch */
app.all('/fetch', (request, response)  => {// 设置响应头  设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// 响应头response.setHeader('Access-Control-Allow-Headers', '*')  // 所有类型的头信息都可以接受const data = {name: "x666", age: 20}// response.send("hello jQuery AJAX")response.send(JSON.stringify(data))
})

 

 

 

 14. 解决跨域问题

同源策略是最早由Netscape公司提出，是浏览器的一种安全策略

同源：协议、域名、端口号必须相同；  违背同源策略就是跨域

解决跨域的方法：

14.1 JSONP

JSONP是一个非官方的跨域解决方案，只支持get请求

（1）JSONP是怎么工作的？

在网页中，由一些标签天生具有跨域的能力，比如img、link、iframe、script，JSONP就是利用script标签的跨域能力来发送请求的

（2）JSONP实现原理

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jsonp解决跨域问题</title>
</head>
<body><script src="http://localhost:9090/jsonp"></script>
</body>
</html>
app.all('/jsonp', (request, response)  => {response.send("hello jsonp")
})

 

 这个原因就是我正儿八经的script标签向你发送请求，你却返回一个字符串的形式，我们应该返回的是函数的调用，也就是js的代码，这样浏览器才能执行里面的内容

 

 

 

14.2 原生JSONP的实现

需求：有一个输入框，在里面输入用户名，输完之后，我会失去焦点，失去焦点的时候，就会向服务端发送请求，对用户名是否存在的检测，因为这边没有数据库，所以服务端直接返回一个已存在，结果回来之后了，我们作一个判断，再把input框的颜色变为红色

 

/* 用户名检测是否存在 */
app.all('/checkUserName', (request, response)  => {const data = {exists: 1,msg: "用户名已存在"}let str = JSON.stringify(data)response.send(`handle(${str})`)
})

 

 

14.3 jQuery发送JSONP请求

需求：点击按钮，向服务端发送请求，响应的结果再div盒子中呈现

 

 

 

14.4 设置CORS响应头实现跨域

（1）CORS是什么？

CORS(Cross-Origin Resource Sharing), 跨域资源共享。CORS是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post请求。跨域资源共享标准新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。

（2）CORS是怎么工作的？

CORS通过设置一个响应头告诉浏览器，请允许跨域，浏览器收到该响应以后就会对响应放行

 

 

修改：添加响应头

 

 成功响应：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/309486.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

链表的一些典型问题

链表的一些典型问题

求链表的中间节点/倒数第K个节点 等类似的随机访问&#xff0c;可以考虑用快慢指针 例 求链表的中间节点 可以定义两个指针&#xff0c;一个一次走两步一个一次走一步&#xff0c;当走的快的走到NULL时&#xff0c;走的慢的就是链表的中间节点。&#xff08;此法求出的偶数个…
阅读更多...
2023年03月18日_微软office365 copilot相关介绍

2023年03月18日_微软office365 copilot相关介绍

文章目录 Copilot In WordCopilot In PowerpointCopilot In ExcelCopilot In OutlookCopilot In TeamsBusiness Chat1 - copilot in word2 - copilot in excel3 - copilot in powerpoint4 - copilot in outlook5 - copilot in teams6 - business chat word 1、起草草稿 2、自动…
阅读更多...
1.Linux快速入门

1.Linux快速入门

Linux快速入门 Linux操作系统简介Linux操作系统优点Linux操作系统发行版1. Red Hat Linux2. CentOS3. Ubuntu4. SUSE Linux5. Fedora Linux 32位与64位操作系统的区别Linux内核命名规则 Linux操作系统简介 Linux操作系统是基于UNIX以网络为核心的设计思想&#xff0c;是一个性…
阅读更多...
vue3 组件之间传值

vue3 组件之间传值

vue3 组件之间传值 非常好&#xff0c;为啥突然开这样一篇博文&#xff0c;首先是因为 vue3 是未来发展的趋势。其次&#xff0c;vue 官方已经确认&#xff0c;将于2023年最后一天停止对 vue2 项目的维护&#xff0c;这个是官方发出的通知&#xff0c;并且呢&#xff0c;尤雨溪…
阅读更多...
实现二叉树的基本操作与OJ练习

实现二叉树的基本操作与OJ练习

目录 1.二叉树的基本操作 1.1二叉树基本操作完整代码 1.2检测value值是否存在 1.3层序遍历 1.4判断一棵树是不是完全二叉树 2.OJ练习 2.1平衡二叉树 2.2对称二叉树 2.3二叉树遍历 1.二叉树的基本操作 1.1二叉树基本操作完整代码 public class BinaryTree {static…
阅读更多...
UDP信号多个电脑的信息传输测试、配置指南

UDP信号多个电脑的信息传输测试、配置指南

最近要做一个东西&#xff0c;关于一个软件上得到的信号&#xff0c;如何通过连接的局域网&#xff0c;将数据传输出去。我没做过相关的东西&#xff0c;但是我想应该和软件连接数据库的过程大致是差不多的&#xff0c;就一个ip和一个端口号啥的。 一.问题思路 多个设备同时连…
阅读更多...
Linux系统下隧道代理HTTP

Linux系统下隧道代理HTTP

在Linux系统下配置隧道代理HTTP是一个涉及网络技术的话题&#xff0c;主要目的是在客户端和服务器之间建立一个安全的通信通道。下面将详细解释如何进行配置。 一、了解基本概念 在开始之前&#xff0c;需要了解几个关键概念&#xff1a;代理服务器、隧道代理和HTTP协议。代理…
阅读更多...
【docker实战】01 Linux上docker的安装

【docker实战】01 Linux上docker的安装

Docker CE是免费的Docker产品的新名称&#xff0c;Docker CE包含了完整的Docker平台&#xff0c;非常适合开发人员和运维团队构建容器APP。 Ubuntu 14.04/16.04&#xff08;使用 apt-get 进行安装&#xff09; # step 1: 安装必要的一些系统工具 sudo apt-get update sudo ap…
阅读更多...
冒泡排序--------(C每日一题)

冒泡排序--------(C每日一题)

冒泡排序&#xff1a; 每次将相邻的两个数比较,将小的调到前头--升序 冒泡排序一个结论&#xff1a; n个数要进行n-1轮比较&#xff0c;第j轮要进行n-j次两两比较 循环体代码&#xff1a; int main() {int i, j,n,a[10],t;//n是几个数比较for(j1;j<n-1;j)//控制轮次for…
阅读更多...
linux下docker搭建mysql8

linux下docker搭建mysql8

1&#xff1a;环境信息 centos 7,mysql8 安装docker环境 2.创建mysql容器 2.1 拉取镜像 docker pull mysql:8.0.23 2.2 查询镜像拉取成功 docker images 2.3 创建挂载的目录文件 mkdir /usr/mysql8/conf mkdir /usr/mysql8/data ##给data文件赋予操作权限 chmod 777 /…
阅读更多...
Flood Fill算法总结

Flood Fill算法总结

算法思想 从一个起点开始&#xff0c;每一次随机选择一个新加进来的格子&#xff0c;看一下它周围能否扩展新的格子。如果能扩展&#xff0c;那么就扩展进来&#xff0c;直到不能扩展新的格子为止。当然需要判重&#xff0c;同样一个格子只能覆盖一次&#xff0c;这样能够保证时…
阅读更多...
HTML---JavaScript基础

HTML---JavaScript基础

文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 本章目标 掌握JavaScript的组成掌握JavaScript的基本语法会定义和使用函数会使用工具进行代码调试 一.JavaScript基础 概述 JavaScript是一种基于对象和事件驱动的脚本语言&#xff0c;用于在…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023