当前位置: 首页 > news >正文

AJAX(JavaScript版本)

目录

一.AJAX简介

二.XMLHttpRequests对象

2.1XMLHttpRequests对象简介

2.2创建XMLHttpRequests对象

2.3定义回调函数

2.4发送请求

 2.5XMLHttpRequests对象方法介绍

2.6XMLHttpRequests对象属性

三.向服务器发送请求

3.1发送请求

3.2使用GET还是POST

3.3使用GET来发送信息

3.4POST请求

一.AJAX简介

服务器向浏览器传输数据时,浏览器需要跳转到一个新的“URL”或者“重新渲染网页”,才可以接收来自服务器的数据,这对于现代用户来说是不友好的,因为观感极差

那么有没有一种办法可以使浏览器接收服务器的数据,并且不更新网页只是动态的更新网页部分数据呢?

随着这个问题“AJAX”应运而生,使用“AJAX”可以做到以下事情:

  • 不刷新页面更新网页
  • 在页面加载后从服务器请求数据
  • 在页面加载后从服务器接收数据
  • 在后台向服务器发送数据

二.XMLHttpRequests对象

2.1XMLHttpRequests对象简介

XMLHttpRequests对象AJAX的基石

使用XMLHttpRequests对象允许前端后端发送一个数据请求用来获得数据

这个数据请求的过程可以分为下面"四大步”:

  • 创建XMLHttpRequests对象
  • 定义回调函数
  • 打开XMHttpRequests对象
  • 向服务器发送请求

2.2创建XMLHttpRequests对象

创建XMLHttpRequests对象的语法:

var myXMLR = new XMLHttpRequests();

2.3定义回调函数

回调函数是作为参数传递给另一个函数的函数

定义回调函数我们可以使用XMLHttpRequests对象提供的“onload()”函数,该函数用来指定当请求响应后应该执行的函数

xhttp.onload = function(){

        //当相应准备就绪时要做什么

}

2.4发送请求

向服务器发送请求,我们可以使用“open()”方法来打开XMLHttpRequests对象,再使用“send()”方法来发送请求

xhttp.open("open","ajax_info.txt");

xhttp.send();

 2.5XMLHttpRequests对象方法介绍

方法描述
new XMLHttpRequests()创建新的XMLHttpRequests对象
abort()取消当前请求
getAllResponseHeaders()返回头部信息
getReponseHeader()返回特定的头部信息
open(method,url,async,user,psw)

规定请求

  • method:请求类型GET或POST
  • url:文件位置
  • async:true(异步)或false(同步)
  • user:可选的用户名
  • psw:可选的密码
send()向服务器发送请求,用于GET请求
send(string)向服务器发送请求,用于POST请求
setRequestHeader()将标签/值对添加到要发送的标头

2.6XMLHttpRequests对象属性

属性描述
onload定义接收到(加载)请求时要调用的函数
onreadystatechange

定义当readyState属性发生变化时调用的函数

readyState

保存XMLHttpRequests的状态

  • 0:请求未初始化
  • 1:服务器连接已建立
  • 2:请求已收到
  • 3:正在处理请求
  • 4:请求已完成响应且已就绪
responseText

以字符串形式返回响应数据

responseXML以XML数据返回响应数据
status

返回请求的状态号

  • 200:"ok"
  • 403:"Forbidden"
  • 404:"Not Found"
statusText返回状态文本,比如("OK"、"Not Found"等)

ps:“当readyState为4且status为200时,响应就绪

三.向服务器发送请求

3.1发送请求

在上面我们已经提到过,可以使用“open()”和“send()”方法搭配向服务器发送请求

open(method,url,async,user,psw)

规定请求

  • method:请求类型GET或POST
  • url:文件位置
  • async:true(异步)或false(同步)
  • user:可选的用户名
  • psw:可选的密码
send()向服务器发送请求,用于GET请求
send(string)向服务器发送请求,用于POST请求

3.2使用GET还是POST

在大多数情况下,GETPOST更简单更快

但在以下情况请考虑使用POST

  • 缓存文件不是选项(更新服务器上的文件或数据库)
  • 向服务器发送大量数据(POST无大小限制)
  • 发送用户输入(可包含未知字符),POST比GET更强大更安全

3.3使用GET来发送信息

如果想要使用GET来发送信息,可以在URL中构造信息

xhttp.open("GET","demo.asp?fname=Bill&&name=Gates",true);
xhttp.send();

3.4POST请求

一条简单的POST请求:

xhttp.open("POST","demo_post.asp",true);

xhttp.send();

如果需要像HTML表单那样POST数据,请通过setRequestHeader()添加一个HTTP头部,并在send()方法中定义要发送的数据

例如:

xhttp.open("POST","ceshi.asp",true);
xhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhttp.send("fname=Bill&&name=Gates");

相关文章:

AJAX(JavaScript版本)

目录 一.AJAX简介 二.XMLHttpRequests对象 2.1XMLHttpRequests对象简介 2.2创建XMLHttpRequests对象 2.3定义回调函数 2.4发送请求 2.5XMLHttpRequests对象方法介绍 2.6XMLHttpRequests对象属性 三.向服务器发送请求 3.1发送请求 3.2使用GET还是POST 3.3使用GET来发…...

框架学习之SpringMVC学习笔记(一)

一、SpringMVC简介 1-介绍 Spring Web MVC是基于Servlet API构建的原始Web框架,从一开始就包含在Spring Framework中。正式名称“Spring Web MVC”来自其源模块的名称( spring-webmvc ),但它通常被称为“Spring MVC”。 在控制层…...

数据集005:螺丝螺母目标检测数据集(含数据集下载链接)

数据集简介 背景干净的目标检测数据集。 里面仅仅包含螺丝和螺母两种类别的目标,背景为干净的培养皿。图片数量约420张,train.txt 文件描述每个图片中的目标,label_list 文件描述类别 另附一个验证集合,有10张图片,e…...

Swift 类和结构体

类和结构体 一、结构体和类对比1、类型定义的语法2、结构体和类的实例3、属性访问4、结构体类型的成员逐一构造器 二、结构体和枚举是值类型三、类是引用类型1、恒等运算符2、指针 结构体和类作为一种通用而又灵活的结构,成为了人们构建代码的基础。你可以使用定义常…...

网络安全相关面试题(hw)

网络安全面试题 报错注入有哪些函数 updatexml注入 载荷注入 insert注入 updata注入 delete注入 extractvalue()注入 注入防御方法 涵数过滤 直接下载相关防范注入文件,通过incloud包含放在网站配置文件里面 PDO预处理,从PHP 5.1开始&…...

前端开发攻略---三种方法解决Vue3图片动态引入问题

目录 1、将图片放入public文件夹中 2、使用 /src/.... 路径开头 3、生成图片的完整URL地址&#xff08;推荐&#xff09; 1、将图片放入public文件夹中 使用图片&#xff1a;路径为 /public 开头 <template><div><img :src"/public/${flag ? 01 : 02}.jp…...

零售EDI:Target DVS EDI项目案例

Target塔吉特是美国一家巨型折扣零售百货集团&#xff0c;与全球供应商建立长远深入的合作关系&#xff0c;目前国内越来越多的零售产品供应商计划入驻Target。完成入驻资格审查之后&#xff0c;Target会向供应商提出EDI对接邀请&#xff0c;企业需要根据指示完成供应商EDI信息…...

AWS安全性身份和合规性之AWS Firewall Manager

AWS Firewall Manager是一项安全管理服务&#xff0c;可让您在AWS Organizations中跨账户和应用程序集中配置和管理防火墙规则。在创建新应用程序时&#xff0c;您可以借助Firewall Manager实施一套通用的安全规则&#xff0c;更轻松地让新应用程序和资源从一开始就达到合规要求…...

R实验 随机变量及其分布

实验目的&#xff1a; 掌握常见几种离散性随机变量及其分布在R语言中对应的函数用法&#xff1b;掌握常见几种连续性随机变量及其分布在R语言中对应的函数用法&#xff1b;掌握统计量的定义及统计三大抽样分布在R语言中对应的函数用法。 实验内容&#xff1a; &#xff08;习题…...

rapidssl泛域名https600元一年

泛域名https证书也可以称之为通配符https证书&#xff0c;指的是可以用一张https证书为多个网站(主域名以及主域名下的所有子域名网站)传输数据加密&#xff0c;并且提供身份认证服务的数字证书产品。RapidSSL旗下的泛域名https证书性价比高&#xff0c;申请速度快&#xff0c;…...

月薪5万是怎样谈的?

知识星球&#xff08;星球名&#xff1a;芯片制造与封测技术社区&#xff0c;星球号&#xff1a;63559049&#xff09;里的学员问&#xff1a;目前是晶圆厂的PE&#xff0c;但是想跳槽谈了几次薪水&#xff0c;都没法有大幅度的增长&#xff0c;该怎么办&#xff1f;“学得文武…...

linux下宝塔负载100%解决方法

今天发现服务器宝塔面板负载居然是100% 但是cpu 和内存其实并不高 通过命令查看主机 uptime 中load average 居然高达18.23 看来负载是真的高了 通过vmstat 看看具体问题 procs&#xff1a; ​ r 表示运行和等待CPU时间片的进程数&#xff0c;这个值如果长期大于系统CPU个数…...

【C++】STL快速入门基础

文章目录 STL&#xff08;Standard Template Library&#xff09;1、一般介绍2、STL的六大组件2.1、STL容器2.2、STL迭代器2.3、相关容器的函数vectorpairstringqueuepriority_queuestackdequeset, map, multiset, multimapunordered_set, unordered_map, unordered_multiset, …...

面向对象编程的魅力与实战:以坦克飞机大战为例

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、面向对象编程的引言 二、理解面向对象编程与面向过程编程的差异 三、创建类与对象&…...

二叉树——堆的实现

一.前言 前面我们讲解了二叉树的概念以及二叉树的存储结构&#xff1a;https://blog.csdn.net/yiqingaa/article/details/139224974?spm1001.2014.3001.5502 今天我们主要讲讲二叉树的存储结构&#xff0c;以及堆的实现。 二.正文 1.二叉树的顺序结构及实现 1.1二叉树的顺序…...

【Spring】DynamicDataSourceHolder 动态数据源切换

【Spring】DynamicDataSourceHolder 动态数据源切换 常见场景常见工具一、AbstractRoutingDataSource1.1、 定义 DynamicDataSourceHolder1.2、 配置动态数据源1.3、 在Spring配置中定义数据源1.4、在业务代码中切换数据源 二、Dynamic Datasource for Spring Boot2.1. 添加依赖…...

LeeCode 3165 线段树

题意 传送门 LeeCode 3165 不包含相邻元素的子序列的最大和 题解 考虑不含相邻子序列的最大和&#xff0c;在不带修改的情况下容易想到&#xff0c;以最后一个元素是否被选取为状态进行DP。从线性递推的角度难以处理待修改的情况。 从分治的角度考虑&#xff0c;使用线段树…...

修改元组元素

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 场景模拟&#xff1a;伊米咖啡馆&#xff0c;由于麝香猫咖啡需求量较大&#xff0c;库存不足&#xff0c;店长想把它换成拿铁咖啡。 实例08 将麝香猫…...

【模版方法设计模式】

文章目录 模板方法设计模式模板方法的设计原则模板方法设计模式组成部分代码实现抽象类实现具体实现类执行 模板方法设计模式 模版方法设计模式&#xff08;Template Method Pattern&#xff09;是一种行为设计模式&#xff0c;它定义了一个操作中的算法骨架&#xff0c;而将一…...

rust语言初识

程序设计实践课上水一篇ing 来源&#xff1a;rust基础入门-1.初识rust-酷程网 (kucoding.com) rust作为一名新兴语言&#xff0c;与go又有些许不同&#xff0c;因为它的目标是对标系统级开发&#xff0c;也就是C、C这两位在编程界的位置。比如我们最常用的windows系统&#x…...

阶跃星辰 GUI-MCP 解读---(2)---决策层

本文是第二篇&#xff0c;主要是介绍决策层&#xff0c;本层在任何情况下&#xff08;是/非MCP&#xff09;都会用到。因为是反推解读&#xff0c;而且时间有限&#xff0c;所以可能会有各种错误&#xff0c;还请大家不吝指出。0x01 LocalServerLocalServer 是本地 GUI Agent 服…...

高并发系统的“救命稻草”——BASE 理论

今天我们要聊的话题&#xff0c;是互联网架构的“遮羞布”&#xff0c;也是高并发系统的“救命稻草”——BASE 理论。如果说 ACID&#xff08;原子性、一致性、隔离性、持久性&#xff09;是传统数据库的“洁癖”&#xff0c;要求数据必须时刻保持完美&#xff0c;那 BASE 就是…...

【Hot 100 刷题计划】 LeetCode 42. 接雨水 | C++ 动态规划与双指针题解

LeetCode 42. 接雨水 | C 动态规划与双指针双解法题解 &#x1f4cc; 题目描述 题目级别&#xff1a;困难 (Hard) 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例 1: 输入&#xff1a;height [0,1,…...

5分钟快速部署:GTA5最强免费防护菜单YimMenu终极指南

5分钟快速部署&#xff1a;GTA5最强免费防护菜单YimMenu终极指南 【免费下载链接】YimMenu YimMenu, a GTA V menu protecting against a wide ranges of the public crashes and improving the overall experience. 项目地址: https://gitcode.com/GitHub_Trending/yi/YimMe…...

AI+社科:当机器学习遇见人类社会,一场静悄悄的革命

AI社科&#xff1a;当机器学习遇见人类社会&#xff0c;一场静悄悄的革命 社会科学的传统研究&#xff0c;常依赖于抽样调查与理论推演&#xff0c;如同“盲人摸象”。如今&#xff0c;AI的介入正将我们带入一个“上帝视角”的时代——通过分析亿万人的数字足迹&#xff0c;我们…...

2026山东大学软件学院项目实训(一)

Vue 3工程化实践与组件设计 核心任务概述 本次项目实训聚焦Vue 3前端工程化配置与全局组件开发&#xff0c;目标是通过模块化设计提升代码复用率&#xff0c;并建立规范的前后端协作流程。核心任务包括&#xff1a; 使用Pinia实现全局状态管理基于Ant Design Vue完成响应式布…...

EasyControl 技术指南:从环境搭建到核心功能配置

EasyControl 技术指南&#xff1a;从环境搭建到核心功能配置 【免费下载链接】Easycontrol 易控&#xff0c;帮助你方便的使用手机远程控制手机。 项目地址: https://gitcode.com/gh_mirrors/ea/Easycontrol 核心价值&#xff1a;重新定义移动设备控制体验 作为开发者&…...

效率利器:用快马平台快速打造openclaw-zero-token成本对比分析工具

最近在团队里做AI项目时&#xff0c;经常遇到一个头疼的问题&#xff1a;API调用成本太高。特别是当需要频繁测试和迭代时&#xff0c;代币消耗就像流水一样。直到发现了openclaw-zero-token技术&#xff0c;才意识到原来有这么多优化空间。为了更直观地对比传统调用和zero-tok…...

“你用AI,那我也会用AI,我还要你干什么?”

这个代码的核心功能是&#xff1a;基于输入词的长度动态选择反义词示例&#xff0c;并调用大模型生成反义词&#xff0c;体现了 “动态少样本提示&#xff08;Dynamic Few-Shot Prompting&#xff09;” 与 “上下文长度感知的示例选择” 的能力。 from langchain.prompts impo…...

MySQL数据库备份实战:全量、增量、差异备份到底怎么选?

MySQL数据库备份实战&#xff1a;全量、增量、差异备份到底怎么选&#xff1f; 作为数据库管理员&#xff0c;每天最担心的莫过于数据丢失。记得去年我们团队遇到过一次硬盘故障&#xff0c;当时如果没有完善的备份策略&#xff0c;后果不堪设想。选择正确的备份方式不仅关系到…...