Ajax额

原生Ajax

xml

已被json取代

http

请求方法+url+http版本号

network

谷歌浏览器查看请求报文和响应报文

F12       

network

header里面有

请求头

响应头

点击view source

可以查看请求响应行

请求体在请求行头下面

get请求有url参数,请求体变为query String ,会对请求参数进行解析

响应体在response  栏中看

Preview预览效果查看

Nodejs

Nodejs就是一个应用程序可以解析js代码

express框架

基本使用

文件夹最外层启动终端

1.npm init  --yes 进行初始化

2.npm  i  express

Ajax请求发送前的准备

前端页面的准备

服务端代码的准备

Ajax操作的基本步骤

XHR                network选择文件时  XHR  Ajax请求的筛选

获取元素btn

Ajax操作四步

Ajax中设置url参数

如何给url缀参数

用问号?分隔url

a=100  a:参数名,后面是参数值

如果有多个参数用&符分隔

Ajax  post请求

服务端代码需要添加路由

post请求设置请求体

在Payload中查看

Ajax设置请求头信息

在Ajax设置中第二步进行

Content-Type设置请求体内容的类型

           为其固定内容

通常来说,身份校验的信息会存在头信息里面,,被服务器端提取,进行校验

 自定义请求头设置

1.

自定义请求头因为浏览器的安全机制,会报错

需要在服务端代码中添加设置响应头 

允许自定义头信息

2.使用自定义请求头,会自动发送options请求(全新的校验,检测头信息是否可用)

需要将端口   路由设置 接受改为all  可以接受任意类型的请求

设置请求头信息一般用于存储身份校验的信息

Ajax请求服务端响应Json

通常情况下,服务端返回结果绝大多数都是json格式的数据

服务端设置

服务端设置响应体数据

response.send()只能传入String和Buffer

ajax第四步设置

手动对传来的响应体数据进行转换

自动转换

第一步

nodemon

IE浏览器缓存问题

Date.now()时间戳

这时再发送请求  每次都是不同的请求,会发送新的请求,不会走浏览器本地缓存

请求超时控制和网络异常处理

/delay

取消请求

abort()

重复请求问题

jQuery中Ajax

用bootcdn时,在标签内  加  crossorigin="anonymous"        跨源请求的一个属性设置,    设置匿名后,向后面的资源发送请求时不会携带当前域名下的cookie             可以消除一个警告

第一个参数是给谁发;第二个参数是一个data参数对象用键值对的形式保存;第三个参数是一个回调函数

get请求下  date参数对象成为url字符串参数       post请求下  成为请求体

jQuery通用方法发送Ajax请求

axios       Ajax工具库

axios 可以发送url参数,也可以发送请求头信息

get方法无法设置请求体,在post方法中才能设置请求体

get请求

.then方法返回的是一个Axios对象

用于设置回调函数

post请求

post方法ruguodiergecansh

axios 通用方法发送请求

method:post

后面添加.then  可以进行响应结果的处理

response 

 

fetch函数发送Ajax请求 

fetch函数属于全局对象,返回结果是Promise对象

第一个参数是URL,第二个参数是一个对象包含各种请求内容

跨域

同源策略

同源策略就是来自于同一个服务器内容

同源策略就是本页面和请求都来自于同一个服务端  server.js

jsonp解决跨域

script标签本身具有跨域特性,例如bootcdn的使用,使用远程资源进行Axios等的服务

open  with liveServer   (访问方式为http协议) 打开页面其中可以找到源文件 的http路径

将原本的url文件url换成完整的url

jsonp实现跨域原理

然后Script标签对里面的内容做解析处理

这里的js文件的请求是一个跨域请求

、、

这里用script标签的src引入这个服务  会发生错误  因为这个服务返回的是字符串,

script标签无法对其进行解析

、、

原理:script请求src过去后,需要回来的结果是一段js代码,这样浏览器才能解析和执行代码

返回结果的形式是一个函数调用,而函数的参数是我们想给客户端返回的结果数据

jsonp案例

案例实现目标:

失去焦点后,边框变红,并在下面显示‘已存在’。

回调函数

返回结果

 

jQuery发送jsonp请求

注意:使用jQuery发送jsonp请求时,需要在url补一个参数

写的时候callback的值是?   实际发送请求时 有值        服务端会接收到callback参数值

需要callback参数的值作为函数调用的函数去拼接字符串

现在jQuery已经注册一个这样的callback函数

只要服务端返回结果是这个函数的调用,则前端会对这个代码数据进行处理

服务端返回结果设置

cors

常用

5.11.12

onreadyststechange

readystate  是xhr对象中的属性 有五个值

0:xhr未初始化

1:open方法调用完毕

2:send方法调用完毕

3:服务端返回部分结果

4:返回所有结果

xhr.status

响应状态码

响应行:http版本  响应状态码   状态字符串

xhr.statusText

 

响应头

空行

响应体

AJax请求基本操作

1.创建对象

const  xhr = new XMLHttpRequest()

2.初始化 设置请求方法和url

xhr.open('GET','http://127.0.0.1:8000/server');

3.发送

xhr.send();

4.事件绑定     处理服务端返回的结果

xhr.onreadysatechange=function(){

        

}

报文样式

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

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

相关文章

AT32F415使用FreeRTOS笔记

1、首先下载一份源码。 2、然后按照雅特力的移植文档操作,freertos只有内核,移植起来超级简单只需要把src目录下的几个源文件、heap4和port文件添加现有工程里。将3个中断函数用_weak 改为虚函数。再添加一个配置文件FreeRTOSConfig.h就可以编译通过了。…

网络传输,请每次都开启 TCP_NODELAY

原文:Marc Brooker - 2024.05.09 (注:不必过于担心这个问题,大部分现代库,语言(如 Go),代理(如 Envoy),都默认设置了 TCP_NODELAY。如果遇到网络…

AIGC数字人视频创作平台,赋能企业常态化制作数字内容营销

随着数字人技术不断发展,AIGC、元宇宙等相关产业迅速发展,企业通过3D虚拟数字人定制,打造出专属的数字人作为企业与用户沟通的新桥梁。 作为3D、AI数字人技术服务商及方案提供商,广州虚拟动力一直致力于为各领域企业通过3D虚拟数字…

Franz Electron + React 源码启动运行填坑指南

环境要求 安装miniconda python 环境electron/rebuild用得着,miniconda 默认自带的 python 是 3.11 版本,比较新; 安装virsual studio 2019 要把C桌面相关的都安装了,大概需要20G,不要安装到 C 盘,都安装到…

Rust处理命令行参数

概述 为了让我们的程序接收一系列数值作为命令行参数并打印出它们的最 大公约数,可以将 src/main.rs 中的 main 函数替换为以下内容: use std::str::FromStr; use std::env; fn main() {let mut numbers Vec::new();for arg in env::args().skip(1) {…

第八十一章 将 Web 应用程序与远程 Web 服务器结合使用 - 如果从 Web 服务器提供静态文件

文章目录 第八十一章 将 Web 应用程序与远程 Web 服务器结合使用 - 如果从 Web 服务器提供静态文件如果从 Web 服务器提供静态文件配置 Web 服务器路径将虚拟目录添加到 IIS将别名添加到 Apache 配置 第八十一章 将 Web 应用程序与远程 Web 服务器结合使用 - 如果从 Web 服务器…

【C++】认识C++(上)

目录 从C到C命名空间同名冲突命名空间的定义命名空间的使用 C的输入和输出缺省参数(默认参数) 从C到C C语言的出现是计算机科学和工程史上的一个重要里程碑,许多现代计算机语言都受C语言的影响。C语言是面向过程的,结构化和模块化…

梯度下降算法要点和难点具体应用

梯度下降算法(Gradient Descent Algorithm)是一种常用的优化算法,用于求解机器学习和深度学习中模型参数的最优解。其基本思想是通过迭代的方式,不断地沿着函数梯度的反方向更新参数,从而逼近函数的最小值点(或最大值点,取决于问题是求最小值还是最大值)。 以下是梯度下…

PostgreSQL的表空间

PostgreSQL的表空间 基础信息 OS版本:Red Hat Enterprise Linux Server release 7.9 (Maipo) DB版本:16.2 pg软件目录:/home/pg16/soft pg数据目录:/home/pg16/data 端口:5777在 PostgreSQL 中,表空间&…

力扣HOT100 - 279. 完全平方数

解题思路&#xff1a; 动态规划 class Solution {public int numSquares(int n) {int[] dp new int[n 1];// 初始化dp数组&#xff0c;默认最坏情况是每个数都是由1相加得到的for (int i 1; i < n; i) {dp[i] i;}for (int i 1; i < n; i) {for (int j 1; j * j &…

Python Twisted库:异步网络编程的利器

更多Python学习内容&#xff1a;ipengtao.com 在现代网络应用开发中&#xff0c;异步编程已经成为一种必备的技能。Python Twisted库是一款强大的异步网络编程框架&#xff0c;它提供了丰富的工具和功能&#xff0c;使得开发者可以轻松地构建高性能的网络应用。 基本概念 Twist…

在虚机VirtualBox7.0.8安装Androidx86_64系统详细步骤要点

最近需要用到安卓系统蓝牙功能做测试&#xff0c;就选择了Virtualboxandroidx86方案&#xff0c;先把系统安装好&#xff0c;后面看是否可以比较好的完成蓝牙功能测试。如果可以的话&#xff0c;我会再发文分享下的&#xff0c;敬请期待。 1.准备材料 &#xff08;1&#xff…

【aws】amazon linux使用密码登录或者root登陆

amazon linux ssh 使用密码登录 设置好安全区组规则后0.0.0.0/0,或者想安全就指定aws的ip,如果多个安全组都有绑定&#xff0c;多个安全组打开 1、使用AWS控制台创建的密钥对或者建议直接通过网页登录 注意&#xff1a;使用pem私钥不允许直接登录root用户&#xff0c;只能登…

Python API和微服务的测试库之httpretty使用详解

概要 在现代软件开发中,API和微服务的测试是确保应用稳定性和功能正确性的关键环节。Python的HTTPretty库提供了一个强大的工具,允许开发者在不实际发起网络请求的情况下模拟HTTP请求和响应。本文将全面介绍HTTPretty的安装、特性、基本与高级功能,并结合实际应用场景,展示…

企业如何利用美国多IP服务器来提升网站的安全性?

企业如何利用美国多IP服务器来提升网站的安全性? 在当前网络环境下&#xff0c;网站安全性日益成为企业面临的重要挑战。为了有效应对各种潜在威胁&#xff0c;越来越多的企业选择利用美国多IP服务器来提升其网站的安全性。这种服务器配置能够通过一系列策略来增加网站的安全…

5G NR 吞吐量计算 and 4G LTE 吞吐量计算

5G NR Throughput References • 3GPP TS 38.306 V15.2.0 (2018-06) ➤J : number of aggregated component carriers in a band or band combination ➤Rmax : 948/1024 • For the j-th CC, Vlayers(j) is the maximum number of layers ➤Qm(j) : Maximum modulation orde…

视频推拉流/视频直播点播平台EasyDSS使用Mysql数据库接口报错502如何处理?

视频推拉流/视频直播点播EasyDSS互联网直播平台支持一站式的上传、转码、直播、回放、嵌入、分享功能&#xff0c;具有多屏播放、自由组合、接口丰富等特点。平台可以为用户提供专业、稳定的直播推流、转码、分发和播放服务&#xff0c;全面满足超低延迟、超高画质、超大并发访…

meshlab: pymeshlab合并多个物体模型并保存(flatten visible layers)

一、关于环境 请参考&#xff1a;pymeshlab遍历文件夹中模型、缩放并导出指定格式-CSDN博客 二、关于代码 本文所给出代码仅为参考&#xff0c;禁止转载和引用&#xff0c;仅供个人学习。 本文所给出的例子是https://download.csdn.net/download/weixin_42605076/89233917中的…

计算机视觉——OpenCV实现Lucas-Kanade 光流追踪

1.光流 光流法是计算机视觉中用于估计图像序列中物体运动的关键技术。它类似于观察夜空中的彗星&#xff0c;通过其在天空中的运动轨迹来追踪它的路径。在图像处理中&#xff0c;光流帮助我们理解像素点如何在连续的帧之间移动。 1.1 稀疏光流法 稀疏光流法关注于图像中的关…

tarjan学习

1.割点&#xff08;必须经过&#xff09;&#xff1a;当时&#xff0c;y是一个割点&#xff0c;x是y的一个子节点&#xff0c;当没有点x时&#xff0c;y无法访问其他点 2.割边&#xff08;必须经过&#xff09;&#xff1a;当时&#xff0c;y不经过这条边无法到达x&#xff0c…