原生Ajax的使用，四种请求方法示例（前后端代码）

目录

原生Ajax是什么

原生Ajax的优点

Ajax应用环境

Ajax的使用

基本使用步骤

AJAX请求状态和HTTP状态码

AJAX 请求状态

HTTP 状态码

XHR对象的方法

各种请求方式和数据获取

post请求

post 请求完整代码

get 请求

服务端

put 请求

服务端

delete 请求

服务端代码

终止请求

回调函数

原生Ajax是什么

AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。是指使用原生的 JavaScript 代码来进行 Ajax 请求和处理。它是一种异步请求的实现方式，可以在不刷新整个页面的情况下向服务器发送请求、获取数据并更新页面内容。

AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

XML（可扩展标记语言）是一种用于描述数据的标记语言。它被设计用于传输和存储数据，并且具有可扩展性和自我描述性。

XML 使用标签来标识数据的结构和内容，类似于 HTML。不同的是，XML 不是针对特定的领域或用于呈现页面，而是作为通用的数据格式。它可以被用于各种目的，如数据交换、配置文件、存储复杂数据结构等。

XML 的基本语法规则包括：

  • 所有 XML 文档必须包含一个根元素（root element）。
  • 所有元素必须正确嵌套，即一个元素必须包含在另一个元素的内部，不能交叉或重叠。
  • 所有元素必须正确关闭，即有一个开始标签和一个匹配的结束标签。
  • 标签名称区分大小写。
  • 元素可以拥有属性，用于提供元素的附加信息。
  • 内容可以是文本或其他嵌套的元素。

以下是一个简单的 XML 示例：

<Person><Name>John Doe</Name><Age>30</Age><Email>john@example.com</Email>
</Person>

原生Ajax的优点

1. 轻量级和灵活性：原生 Ajax 不依赖额外的库或框架，代码较为精简，只需要使用浏览器提供的 XMLHttpRequest 对象即可完成异步请求。这减少了额外的依赖和文件大小，使得页面加载更快，并且更加灵活，可以根据具体需求进行定制。

2. 原生支持：原生 Ajax 是由浏览器原生支持的技术，无需引入额外的库或框架，可以直接使用浏览器提供的 API。这意味着原生 Ajax 在所有支持 JavaScript 的现代浏览器上都可以运行，不需要额外的兼容性处理。

3. 低级别的控制：原生 Ajax 可以提供更低级别的控制，开发人员可以直接处理请求和响应的状态、头部信息、错误处理等。这种灵活性使得开发人员可以根据具体需求来定制请求和响应的处理逻辑。

4. 完全自定义的处理逻辑：原生 Ajax 允许开发人员完全自定义请求和响应的处理逻辑。通过设置回调函数或添加事件监听器，可以在请求发送、状态变化等不同阶段执行自定义的操作。这样开发人员可以更好地控制请求的结果和页面的行为。

5. 可直接操作响应数据：原生 Ajax 允许直接操作响应数据，通过 responseText 或 responseXML 属性可以获取服务器响应的文本或 XML 数据。这样可以更方便地处理和展示服务器返回的数据。

由于Ajax存在同源问题(同源策略)，所以要使用跨域。

Ajax应用环境

原生 Ajax 在许多应用场景中都可以使用，包括但不限于以下几个方面：

1. 动态内容更新：原生 Ajax 可以用于动态地更新网页的内容，而无需刷新整个页面。例如，可以使用原生 Ajax 在用户点击按钮或链接时加载新的数据，然后将数据动态地插入到已有的页面中，实现无刷新的内容更新。

2. 表单提交和验证：原生 Ajax 可以用于异步提交表单，将表单数据发送到服务器并接收服务器的响应结果。这样可以避免整个页面的刷新，提高用户体验。同时，还可以使用原生 Ajax 对用户输入的表单数据进行实时验证，例如检查用户名是否已存在、验证电子邮件格式等。

3. 异步加载数据：原生 Ajax 可以用于异步加载数据，例如从服务器获取 JSON、XML 或纯文本数据，并用于更新页面的内容。这对于加载大量数据或需要根据用户交互实时更新数据的应用程序非常有用，如社交媒体的新闻流、聊天消息的实时推送等。

4. 实时搜索和自动完成：原生 Ajax 可以在用户输入关键词时，通过与服务器交互，实时搜索相关结果并动态显示。例如，在搜索引擎或电子商务网站上，可以使用原生 Ajax 在用户输入时快速提供搜索建议或自动完成的功能。

5. 异步文件上传：原生 Ajax 提供了通过异步请求上传文件的能力。这使得可以在后台进行文件上传，而不会中断用户的其他操作或等待整个页面刷新。通过使用 FormData 对象和原生 Ajax，可以实现无刷新的异步文件上传操作。

6. Web API 调用：原生 Ajax 可以用于与各种 Web API 进行通信。例如，可以使用原生 Ajax 与服务器上的 REST API 进行交互，请求资源、发送数据或执行其他操作。

请注意，原生 Ajax 需要开发人员手动处理低级别的细节和兼容性问题。对于一些高级的功能，例如处理异步请求的回调地狱、安全性等问题，可能需要更加细致的处理和实施。

Ajax的使用

基本使用步骤
  1. 创建一个 XMLHttpRequest 对象，该对象是进行 Ajax 请求的核心对象，可以通过 XMLHttpRequest() 构造函数创建。 
    var xhr = new XMLHttpRequest();
  2. 调用 open() 方法，设置异步请求的 HTTP 方法、请求 URL 和是否异步。 
    xhr.open(method, url);//可以设置请求头，一般不设置
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  3. 设置回调函数（可以通过 onreadystatechange 属性或 addEventListener 方法设置）来监听请求状态的变化，并在请求完成后处理响应数据。 
    xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) { // 请求完成并且响应状态为 200 OKvar data = JSON.parse(xhr.responseText); // 解析服务器返回的数据// 在此处进行数据处理或页面更新操作}
  4. 调用 send() 方法发送异步请求。 
    xhr.send(body)	//get 请求不传 body 参数，只有 post 请求使用
AJAX请求状态和HTTP状态码
AJAX 请求状态

xhr.readyState 可以用来查看请求当前的状态
0:  表示 XMLHttpRequest 实例已经生成，但是 open()方法还没有被调用。
1:  表示 send()方法还没有被调用，仍然可以使用 setRequestHeader()，设定 HTTP请求的头信息。
2:  表示 send()方法已经执行，并且头信息和状态码已经收到。
3: 表示正在接收服务器传来的 body 部分的数据。
4: 表示服务器数据已经完全接收，或者本次接收已经失败了

HTTP 状态码

由三个十进制数字组成，第一个十进制数字定义了状态码的类型。响应分为五类：信息响应(100–199)，成功响应(200–299)，重定向(300–399)，客户端错误(400–499)和服务器错误 (500–599)：

分类分类描述
1**信息，服务器收到请求，需要请求者继续执行操作
2**成功，操作被成功接收并处理
3**重定向，需要进一步的操作以完成请求
4**客户端错误，请求包含语法错误或无法完成请求
5**服务器错误，服务器在处理请求的过程中发生了错误
XHR对象的方法

  • open(method,url,async) :建立和服务器的连接

  • send(主体)：发送请求消息

    • get:send(null)

    • post:send('name=xxx&age=xxx')

  • setRequestHeader(name,value):设置请求消息头部

  • getRequestHeader(name):获取响应消息头部

  • responseType：设置响应体数据的类型

各种请求方式和数据获取

post请求

表示新增，post请求之前需要先设置请求头

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

send 方法参数中放置传递给服务端的数据

const params='id=1&name=yhb&age=18'
xhr.send(params)

服务端通过 request.POST 获取以 post 方式传递的数据

class GoodsView(View):# 接收以 post 方法发送的 ajax 请求def post(self, request):id = request.POST.get('id')name = request.POST.get('name')age = request.POST.get('age')return JsonResponse({"id": id,"name": name,"age": age})
post 请求完整代码
// 1、创建 XMLHttpRespopnse 对象const xhr= new XMLHttpRequest()// 2、配置请求方式和请求地址xhr.open('post','http://127.0.0.1:8000/app/goods/')// 3、监听服务器的返回xhr.onreadystatechange=function(){// 1、服务端返回的文本会赋值给 XMLHttpRequest 对象的 responseText 属性// readyState =4 只能证明服务端已经返回响应了，很可能是错误的响应，只要当// status 值也为 200 时，才能证明服务端返回了正确的响应if(xhr.readyState == 4 && xhr.status == 200){console.log(xhr.responseText);}}// 4、如果请求方式为 post ，需要配置请求头xhr.setRequestHeader('Content-Type', 'application/json');// 5、发送请求，发送给服务端的数据，需要放到 send  方法的参数中xhr.send(JSON.stringify({ data: 'some data' }));
get 请求

get 主要用来从服务端获取数据，也可以向服务端发送少量数据

与 post 相比

  • 不需要设置请求头

  • 发送给服务端的数据附着到请求地址的后面，以问号分割

 // 1、创建 XMLHttpRespopnse 对象
const xhr= new XMLHttpRequest()
// 2、配置请求方式和请求地址
​
xhr.open('get','http://127.0.0.1:8000/app/goods/?id=1&name=yhb&age=18')
// 3、监听服务器的返回
xhr.onreadystatechange=function(){             if(xhr.readyState == 4 && xhr.status == 200){console.log(xhr.responseText);}
}          
​
xhr.send()
服务端

通过 request.GET 获取客户端以 get 方式提交的数据


def my_view(request):# 获取查询字符串参数action = request.GET.get('action')name = request.GET.get('name')# 进行业务逻辑处理# ...# 返回 JSON 格式数据response_data = { "result": "success" }return JsonResponse(response_data)
put 请求

put 请求用于修改数据

与 post 相比，不用设置请求头

 // 1、创建 XMLHttpRespopnse 对象const xhr = new XMLHttpRequest()// 2、配置请求方式和请求地址
​xhr.open('put', 'http://127.0.0.1:8000/app/goods/')// 3、监听服务器的返回xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200) {console.log(xhr.responseText);}}const params=`id=1&name=yhb&age=18`xhr.send(params)
服务端

通过 QueryDict 从 request.body中将数据提取出来，并放到字典中

  def put(self, request):query_dict = QueryDict(request.body)id = query_dict.get('id')name = query_dict.get('name')age = query_dict.get('age')
​return JsonResponse({"id": id,"name": name,"age": age})

delete 请求

delete 方式主要用于删除数据

与 put 请求方式一样

 // 1、创建 XMLHttpRespopnse 对象
const xhr = new XMLHttpRequest()
// 2、配置请求方式和请求地址
​
xhr.open('delete', 'http://127.0.0.1:8000/app/goods/')
// 3、监听服务器的返回
xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200) {console.log(xhr.responseText);}
}
const params=`id=1&name=yhb&age=18`
xhr.send(params)
服务端代码
def delete(self,request):query_dict = QueryDict(request.body)id = query_dict.get('id')name = query_dict.get('name')age = query_dict.get('age')
​return JsonResponse({"id": id,"name": name,"age": age})

终止请求

调用xhr.abort()即可随时终止请求；

xhr.abort()

它会触发 abort 事件，且 xhr.status 变为 0。

回调函数

function ajaxGet(method, url, callback) { // callback: 为一个回调函数// 创建ajax 对象let ajax = new XMLHttpRequest();// 建立与服务器连接 ajax.open(method, url);// 发送数据ajax.send();ajax.onreadystatechange = function() {// onreadystatechange: 数据改变事件 if(ajax.readyState === 4 && ajax.status === 200){callback(ajax.responseText)}}
}
function handelAdd() {ajaxGet(`url`, (res)=>{alert(JSON.parse(res).message)location.href = './index.html'})
}

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

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

相关文章

TypeScript基础知识：类型守卫和类型推断

TypeScript基础知识：类型守卫和类型推断

在 TypeScript 中&#xff0c;类型守卫和类型推断是两个重要的概念&#xff0c;它们可以帮助我们更好地理解和利用类型系统的优势。本文将详细介绍这两个概念&#xff0c;并提供示例代码来说明它们的用法和优势。 一、类型守卫 类型守卫是一种在 TypeScript 中用于缩小变量类型…
阅读更多...
U盘安装XP纯净版系统教程软件安装教程(附软件下载地址)

U盘安装XP纯净版系统教程软件安装教程(附软件下载地址)

软件简介&#xff1a; 软件【下载地址】获取方式见文末。注&#xff1a;推荐使用&#xff0c;更贴合此安装方法&#xff01; U盘安装XP纯净版系统是一种便捷且快速的方式&#xff0c;以实现系统重装或升级的需求。这篇教程将为您详细介绍如何使用U盘来安装XP纯净版系统。XP纯…
阅读更多...
代码随想录Day 17 | 110 平衡二叉树 257 二叉树的所有路径 404 左叶子之和

代码随想录Day 17 | 110 平衡二叉树 257 二叉树的所有路径 404 左叶子之和

代码随想录Day 17 | 110 平衡二叉树 257 二叉树的所有路径 404 左叶子之和 平衡二叉树二叉树的所有路径左叶子之和 平衡二叉树 文档讲解&#xff1a;代码随想录 视频讲解&#xff1a; 后序遍历求高度&#xff0c;高度判断是否平衡 | LeetCode&#xff1a;110.平衡二叉树 状态 …
阅读更多...
DEJA_VU3D - Cesium功能集 之 117-雷达扫描（圆环效果）

DEJA_VU3D - Cesium功能集 之 117-雷达扫描（圆环效果）

前言 编写这个专栏主要目的是对工作之中基于Cesium实现过的功能进行整合，有自己琢磨实现的，也有参考其他大神后整理实现的，初步算了算现在有差不多实现小140个左右的功能，后续也会不断的追加，所以暂时打算一周2-3更的样子来更新本专栏（每篇博文都会奉上完整demo的源代码…
阅读更多...
C++知识点总结(13)：函数

C++知识点总结(13)：函数

一、定义 函数&#xff0c;指可以实现某个功能&#xff0c;可以重复使用的一段代码。不同的函数之间相互独立&#xff0c;即函数之间的功能互不影响&#xff08;互相的代码&#xff09;。 二、结构 1. 定义 返回值类型 函数名(形参1, 形参2, 形参3...形参n) {...return 值; }2…
阅读更多...
Java初学习

Java初学习

Java代码示例&#xff1a; public class helloworld {public static void main(String[] args){System.out.println("hello world");} } Java程序的名字需要和文件名字一致&#xff0c;就是那个helloworld Java程序需要对类有深度的认识&#xff1a; 对象是类的…
阅读更多...
2023年全国职业院校技能大赛软件测试赛题—单元测试卷②

2023年全国职业院校技能大赛软件测试赛题—单元测试卷②

单元测试 一、任务要求 题目1&#xff1a;任意输入2个正整数值分别存入x、y中&#xff0c;据此完成下述分析&#xff1a;若x≤0或y≤0&#xff0c;则提示&#xff1a;“输入不符合要求。”&#xff1b;若2值相同&#xff0c;则提示“可以构建圆形或正方形”&#xff1b;若2<…
阅读更多...
ipad协议逆向分析实战篇-1

ipad协议逆向分析实战篇-1

请使用dnspy环境进行学习研究&#xff0c;切勿用于非法操作 1.首先拿到得到的部署包进行逆向分析 2.解压部署包并找到bin这个文件夹 3.找到Wechat.Api.dll这个文件 4.这两个是协议的核心文件&#xff0c;破解了这个核心文件就可以得出逻辑源码 5.首先把Wechat.Api.dll这个…
阅读更多...
Pandas实战100例 | 案例 23: 处理空值

Pandas实战100例 | 案例 23: 处理空值

案例 23: 处理空值 知识点讲解 处理空值是数据清洗过程中的一个关键步骤。Pandas 提供了多种方法来检测、填充和删除空值。 检测空值: 使用 isnull 方法可以检测 DataFrame 中的空值。填充空值: 使用 fillna 方法可以填充空值。删除包含空值的行或列: 使用 dropna 方法可以删…
阅读更多...
C++ (MFC) 单程序运行（防止多开程序)

C++ (MFC) 单程序运行（防止多开程序)

C (MFC) 单程序运行&#xff08;防止多开程序) 项目文件名:MFCAppTest 在 C*****App.cpp 文件中 CMFCAppTestApp::InitInstance 函数中 添加以下代码 //避免程序的多开 xxxx为信号量的名字 可随意CreateMutex(NULL, TRUE, TEXT("MFCAppTest")); if (GetLastError…
阅读更多...
oracle—IMU机制

oracle—IMU机制

正常的情况下&#xff0c;当事务需要回滚块的时候&#xff0c;是去undo表空间找 现在是在sharepool中分一个IMUbuffer&#xff0c;将所有的回滚信息写入。直接就可以从中取。减少了物理IO 同时这个过程也产生redo&#xff0c;直接就是图中红色的&#xff0c;不防止崩溃 优点 1…
阅读更多...
开机自启动android app

开机自启动android app

Android App开机自启动_android 开机自启动-CSDN博客 注意权限问题&#xff1a; 第二种实现方式&#xff1a;系统桌面应用 问&#xff1a;android的系统桌面应用启动是什么&#xff1a; 答&#xff1a; Android 系统桌面应用是指用户在设备主屏幕上看到的默认启动界面&…
阅读更多...
代码随想录算法训练营第四天| 24. 两两交换链表中的节点、19.删除链表的倒数第N个节点面试题 02.07. 链表相交、142.环形链表II

代码随想录算法训练营第四天| 24. 两两交换链表中的节点、19.删除链表的倒数第N个节点面试题 02.07. 链表相交、142.环形链表II

文档讲解&#xff1a;虚拟头节点&#xff0c;三指针&#xff0c;快慢指针&#xff0c;链表相交&#xff0c;环形链表&#xff0c; 技巧&#xff1a; 1、对于指针的操作要画图&#xff0c;明确步骤后好做了 2、使用虚拟头节点可以避免对头节点单独讨论&#xff0c;且方便对头节点…
阅读更多...
C++ Primer 6.1 函数基础

C++ Primer 6.1 函数基础

函数的形参列表 int func(int v,int v2) {int v,v2;//&#xff01;错误 } 函数返回类型 不能是数组和函数&#xff08;两者都不接受对拷&#xff09;&#xff0c;但可以是指针 局部对象 形参和函数体内部的变量称为局部变量&#xff0c;仅在函数内部可见&#xff0c;隐藏外部…
阅读更多...
c++的map的内存布局

c++的map的内存布局

以下均基于x86平台64位CentOS或Ubuntu&#xff0c;g8。 有一个指针偶尔会置成0xffffffff&#xff0c;大佬查了几天发现是由于对map的end迭代器进行了错误操作导致的。简化代码如下&#xff1a; struct s_t {std::map<long, int> m;void *p; }; int main() {s_t s;auto …
阅读更多...
Python 安卓开发：Kivy、BeeWare、Flet、Flutter

Python 安卓开发：Kivy、BeeWare、Flet、Flutter

kivy&#xff1a;https://github.com/kivy python-for-android &#xff1a;https://python-for-android.readthedocs.io/en/latest/ BeeWare&#xff1a;https://docs.beeware.org/en/latest/ Flet&#xff1a;https://github.com/flet-dev/flet 把 PySide6 移植到安卓上去&a…
阅读更多...
权值初始化

权值初始化

一、梯度消失与爆炸 在神经网络中&#xff0c;梯度消失和梯度爆炸是训练过程中常见的问题。 梯度消失指的是在反向传播过程中&#xff0c;梯度逐渐变小&#xff0c;导致较远处的层对参数的更新影响较小甚至无法更新。这通常发生在深层网络中&#xff0c;特别是使用某些激活函…
阅读更多...
Pandas实战100例 | 案例 18: 列操作 - 重命名、删除和重新排序列

Pandas实战100例 | 案例 18: 列操作 - 重命名、删除和重新排序列

案例 18: 列操作 - 重命名、删除和重新排序列 知识点讲解 在处理 DataFrame 时&#xff0c;经常需要对列进行各种操作&#xff0c;如重命名列、删除列或重新排序列。Pandas 提供了简洁的方法来执行这些任务。 重命名列: 使用 rename 方法可以改变 DataFrame 中一个或多个列的…
阅读更多...
C++STL

C++STL

STL基本概念 standard template library : 标准模板库STL从广义上可以分为&#xff1a; 容器(container) 算法(algorithm) 迭代器(iterator)。 容器和算法之间通过迭代器进行无缝连接。 STL几乎所有的代码都采用了模板类或者模板函数STL六大组件 STL的容器 STL的容器就是将运…
阅读更多...
vmlinux, System.map； cmake的find_package(Clang)产生的变量们； geogebra单位切向量（简单例子）

vmlinux, System.map； cmake的find_package(Clang)产生的变量们； geogebra单位切向量（简单例子）

linux4.15.y内核中的函数个数 依赖关系: vmlinux, vmlinux.bin, bzImage cd /bal/linux-stable/ file vmlinux #vmlinux: ELF 32-bit LSB executable, Intel 80386, version 1 (SYSV), statically linked, BuildID[sha1]b99bbd9dda1ec2751da246d4a7ae4e6fcf7d789b, not str…
阅读更多...
最新文章

Copyright @ 2022~2023