原生js实现ajax请求（带请求头header）和数据传参过程代码

article/2025/10/12 5:40:17

一、Ajax 概述
Ajax 是 Asynchronous Javascript And XML 的简写

Ajax是一门技术，并不是一门语言

使用XHTML+CSS来标准化呈现
使用XML和XSLT进行数据交换及相关操作
使用XMLHttpRequest对象与Web服务器进行异步数据通信
使用Javascript操作Document Object Model进行动态显示及交互
使用JavaScript绑定和处理所有数据
优点：

页面局部刷新：减少用户等待时间，提高用户体验
与服务器异步通信：不需要打断用户的操作，具有更迅速的响应能力
按需获取数据，节约带宽
缺点：

破坏了浏览器的后退机制（ajax局部刷新页面，浏览器后退按钮不可点）；解决方案：HTML5 直接操作浏览历史
不利于搜索引擎优化；解决方案：（待更新）
**安全问题：**Ajax技术就如同对企业数据建立了一个直接通道，这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑
核心：

**组成：**JavaScript、XMLHTTPRequest、DOM对象
通过XMLHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面
工作原理：

相当于在用户和服务器之间加了一个中间层(ajax引擎)，异步请求数据（使用户操作 与 服务器响应异步化）

并不是所有的用户请求都提交给服务器，像一些数据验证（比如判断用户是否输入了数据）和数据处理（比如判断用户输入数据是否是数字）等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求

对比：

传统的JS获取数据：用户每触发一个 Http 请求，都需要空闲等待响应，服务器会返回一个完整的 HTML 页面，每一次数据交互，都是一个新的页面；即使是一次很小的交互，用户也需要等待服务器响应 及 完整的 HTML 页面；缺点：浪费带宽、应用的响应时间依赖于服务器的响应时间

Ajax 突出之处：Ajax 在 Http 协议的基础上，以异步的方式与服务器进行通信；可简单理解为：向服务器请求数据，不用刷新页面（页面局部更新），这样极大的提升了 整体执行效率 及 用户体验

二、Ajax 的核心对象
1. XMLHtttpRequest对象 是Ajax技术 的核心
Javascript通过XMLHttpRequest对象直接与服务器进行交互（ 请求数据，获取数据 ）

XMLHtttpRequest对象，简称xhr对象，是Ajax技术 的核心，即 Ajax技术的引擎

XMLHtttpRequest对象 作为浏览器的内置对象，来实现发送、接收 HTTP请求 与 响应信息

2. xhr对象 的属性
readyState：返回 请求的状态（数字格式）
值有 5种，如下：
状态 名称 描述
0 Uninitialized 初始化状态：XMLHttpRequest 对象已创建 或 已被 abort() 方法重置
1 Open 请求还没有被发送：open() 方法已调用，但是 send() 方法未调用。
2 Send 未接收到响应：Send() 方法已调用，HTTP 请求已发送到 Web 服务器
3 Receiving 所有响应头部都已经接收到 、响应体开始接收但未完成
4 Loaded HTTP 响应已经完全接收
responseText：返回 响应体（字符串格式）
此属性表示：到目前为止接收到的响应体（不含头部）
若没有接收到数据，则返回空字符串
readyState 值小于3时，这个属性的值肯定是空字符串
readyState 值为3时，这是属性的值 可能是整个响应体，也可能是部分响应体
responseXML：返回的响应体（xml格式）
此属性表示：到目前为止接收到的响应体（不含头部）
status：由服务器返回的 HTTP 状态码（数字格式）
当 readyState 小于 3 的时候读取这一属性会导致一个异常

常见状态码如下：

200：请求成功
404：没有发现文件、查询或url
400~499：客户端问题
500 ：服务端问题
statusText：由服务器返回的 HTTP 状态（详细描述）
3. xhr对象 的方法
open( ) 初始化HTTP请求，但不发送请求
语法： open(method, url, async, username, password)

method 请求方式： GET、POST 、HEAD

url 请求地址：同源策略

async 是否异步请求：默认值为 true（可选参数）；如果这个参数是 false，请求是同步的，后续对 send() 的调用将阻塞，直到响应完全接收

username 、password：为 url 所需的授权提供认证资格（可选，一般不写）

作用：

把 readyState 设置为 1

保存供send()方法使用的请求参数，重置 XMLHttpRequest 对象，以便复用

删除之前的请求头、接收到的响应头

将响应体、响应状态码设为默认值

send( ) 发送 HTTP 请求（会打开一个Web 服务器的网络连接）
语法： send(body)

body 请求体：get请求时 body 为 null；post请求时 body 为 请求体（一个字符串 或 对象），参数 body 应该由 以下几部分组成：
之前调用 open( ) 时指定的 HTTP 方法、url 以及认证资格（如果有的话）
之前调用 setRequestHeader( ) 时指定的请求头部（如果有的话）
传递给这个方法的 body 参数
作用：

把 readyState 设置成2，并 打开一个 Web 服务器的网络连接

接受部分响应后，send() 或 后台线程 把 readyState 设置为 3

接受全部响应后，send() 或 后台线程 把 readyState 设置为 4

特殊情况：

如果 readyState 不是1（也就是没调用 open( ) 方法），会抛出异常

如果 open() 参数 async 为 false，send( ) 方法会阻塞 并不会返回，直到 readyState 为 4 并且服务器的响应被完全接收才返回

setRequestHeader() 设置请求头
语法： setRequestHeader(name, value)

name 头部的名称：这个参数不应该包括空白、冒号或换行

value 头部的值：这个参数不应该包括换行

约束：此方法设置请求头信息，必须在 调用 open( ) 之后 且 调用 send( ) 之前

请求头中包含：

Host
Connection
Keep-Alive
Accept-charset
Accept-Encoding
If-Modified-Since
If-None-Match
If-Range
Range
getResponseHeader() 获取指定请求头
语法： getResponseHeader(name)
getAllResponseHeaders(); 获取所有请求头
语法： getAllResponseHeaders( )
4. xhr对象 的事件
onreadystatechange readyState 改变时 会触发 此事件

代码如下：

<html><head><meta charset="utf-8"><title>demo</title><style>.btn{height:30px;width:100px;background:red;margin:10px 0;text-align:center;line-height:30px;color:#fff;}</style></head><body><div class="postbtn btn">POST请求</div><div class="getbtn btn">GET请求</div></body><script type="text/javascript">//post请求document.querySelector(".postbtn").onclick= function(){var xmlhttp = new XMLHttpRequest();var obj = {name: 'zhansgan',age: 18};xmlhttp.open("POST", "http://192.168.1.200:8080/php/test.php", true);xmlhttp.setRequestHeader("token","header-token-value"); // 可以定义请求头带给后端xmlhttp.setRequestHeader("dingyi","header-dingyi-value");xmlhttp.send(JSON.stringify(obj));  // 要发送的参数，要转化为json字符串发送给后端，后端就会接受到json对象// readyState == 4 为请求完成，status == 200为请求陈宫返回的状态xmlhttp.onreadystatechange = function(){if(xmlhttp.readyState == 4 && xmlhttp.status == 200){console.log(xmlhttp.responseText);}}};//get请求document.querySelector(".getbtn").onclick= function(){var xmlhttp = new XMLHttpRequest();// get方法带参数是将参数写在url里面传过去给后端xmlhttp.open("GET", "http://192.168.1.200:8080/php/test.php?name='zhansgang'&age=12", true);xmlhttp.setRequestHeader("token","header-token-value");xmlhttp.setRequestHeader("dingyi","header-dingyi-value");xmlhttp.send();// readyState == 4 为请求完成，status == 200为请求陈宫返回的状态xmlhttp.onreadystatechange = function(){if(xmlhttp.readyState == 4 && xmlhttp.status == 200){console.log(xmlhttp.responseText);}}};</script>
</html>

这里写图片描述


http://chatgpt.dhexx.cn/article/bpyA7eE3.shtml

相关文章

ajax的三种传参方式

ajax的三种传参方式

ajax的三种传参方式 ajax的第一种第二种传递参数的方式&#xff0c;如下图&#xff1a; ajax的第三种传递参数的方式&#xff0c;通过serialize()序列化方法传递参数&#xff0c;如下图&#xff1a;
阅读更多...
Java类加载顺序

Java类加载顺序

引言 在日常工作中&#xff0c;比较少的机会会探究类加载机制&#xff0c;类加载顺序&#xff0c;但是这部分在代码优化&#xff0c;深入学习jvm有着极大的帮助&#xff0c;本文帮助不太了解类加载顺序的人从代码层级了解类加载顺序。 示例1-普通类 class Foo{private int x…
阅读更多...
Java类加载器(ClassLoader)

Java类加载器(ClassLoader)

Java中一个类从它的class文件被加载进入虚拟机到被JVM卸载&#xff0c;其生命周期大致可以分为以下几步&#xff1a; 每个步骤详细内容可以参考相关JVM书籍&#xff0c;在整个流程中除了加载之外的几个步骤主要都是由JVM控制执行的&#xff0c;留给我们手动干涉的空间不是很大…
阅读更多...
java中类的加载

java中类的加载

类加载器的作用&#xff1a; java中源文件通过java编译器产生了字节码文件&#xff0c;而类加载器及时负责将字节码文件加载到内存中。并将这些静态数据转化成方法区中运行时数据结构。然后再堆中生成一个代表个类的class对象&#xff0c;即java.lang.class类对象。 类缓存&am…
阅读更多...
Java类加载过程详解

Java类加载过程详解

类的生命周期 类的加载类加载过程加载链接验证准备解析 初始化 总结 首先我们先简单了解一下整个JVM的体系结构是怎样的&#xff0c;如下图所示&#xff08;图1&#xff09;&#xff1a; 再详细具体一点&#xff08;图2&#xff09;&#xff1a; 上面的图片有些地方看不懂没关系…
阅读更多...
什么是类的加载（Java）

什么是类的加载（Java）

一、什么是类的加载 java文件通过编译器变成了.class文件&#xff0c;接下来类加载器又将这些.class文件加载到JVM中。其中类装载器的作用其实就是类的加载。 其实&#xff0c;类加载器并不需要等到某个类被“首次主动使用”时再加载它&#xff0c;JVM规范允许类加载器在预料某…
阅读更多...
【JVM】Java类加载机制详解

【JVM】Java类加载机制详解

【JVM】Java类加载机制详解 文章目录 【JVM】Java类加载机制详解一&#xff1a;类加载子系统1&#xff1a;类加载器子系统的作用2&#xff1a;加载器 ClassLoader 的角色 二&#xff1a;类的加载过程1&#xff1a;加载阶段2&#xff1a;验证阶段&#xff1a;确保被加载的类的正…
阅读更多...
JAVA开发（java类加载过程）

JAVA开发（java类加载过程）

1、java语言的平台无关性。 因为java语言可以跑在java虚拟机上&#xff0c;所以只要能装java虚拟机的地方就能跑java程序。java语言以后缀名 .java为文件扩展名。通过java编译器javac编译成字节码文件.class 。java字节码文件通过java虚拟机解析运行。在虚拟机级别对class文件…
阅读更多...
图解Java类加载机制

图解Java类加载机制

文章目录 前言类加载的概述双亲委派加载机制类加载的隔离机制contextClassLoaderSPI用处找文件用处 类加载的顺序顺序概述类加载的一般方式类加载的触发点 类的实例化多线程环境下&#xff0c;为何也只有一个Class的对象 图解和举例普通Java应用日常Web应用 附录 前言 网上有很…
阅读更多...
【Java 】Java 类加载和类加载器

【Java 】Java 类加载和类加载器

文章目录 前言一、加载二、链接验证准备解析 三、初始化发生的时机不会触发类的初始化 四、类加载器双亲委派模式 前言 Java 的类加载阶段分为&#xff1a;加载、链接、初始化&#xff0c;而链接的过程中包括&#xff1a;验证、准备、解析。 一、加载 将类的字节码载入方法区…
阅读更多...
Java类加载过程图解

Java类加载过程图解

朋友给我发了一道有意思的题目&#xff0c;如下 为什么用.class的方式加载类和以Class.forName()的方式加载的结果不同呢&#xff0c;原因很简单&#xff0c;就是类加载过程的不同。 这就扯到基础理解上了&#xff0c;就是Java是如何加载一个类的呢&#xff1f; 上图是我绘制的…
阅读更多...
Java类加载器加载类顺序

Java类加载器加载类顺序

java ClassLoader的学习 java是一门解释执行的语言&#xff0c;由开发人员编写好的java源文件先编译成字节码文件.class形式&#xff0c;然后由java虚拟机(JVM)解释执行&#xff0c;.class字节码文件本身是平台无关的&#xff0c;但是jvm却不是&#xff0c;为了实现所谓的一次…
阅读更多...
java类如何加载

java类如何加载

最近研究java的进阶知识&#xff0c;先从java类加载机制学起&#xff0c;原先看过《深入理解java虚拟机》这本书&#xff0c;奈何书的知识面太广及自身只看了一遍&#xff0c;很多知识并不是很理解&#xff0c;今天看了几篇别人讲解的java类加载机制&#xff0c;觉得讲的很好&a…
阅读更多...
JVM——Java类加载机制总结

JVM——Java类加载机制总结

1. 类加载器的组织结构 转载请注明出处&#xff1a;JVM——Java类加载机制总结_SEU_Calvin的博客-CSDN博客 类加载器 ClassLoader是具有层次结构的&#xff0c;也就是父子关系。其中&#xff0c;Bootstrap是所有类加载器的父亲。 &#xff08;1&#xff09;Bootstrapclass lo…
阅读更多...
深入理解Java类加载器(1)：Java类加载原理解析

深入理解Java类加载器(1)：Java类加载原理解析

1 基本信息 每个开发人员对java.lang.ClassNotFoundExcetpion这个异常肯定都不陌生&#xff0c;这背后就涉及到了java技术体系中的类加载。Java的类加载机制是技术体系中比较核心的部分&#xff0c;虽然和大部分开发人员直接打交道不多&#xff0c;但是对其背后的机理有一定理解…
阅读更多...
深入理解Java类加载器(一)：Java类加载原理解析

深入理解Java类加载器(一)：Java类加载原理解析

摘要&#xff1a; 每个开发人员对java.lang.ClassNotFoundExcetpion这个异常肯定都不陌生&#xff0c;这个异常背后涉及到的是Java技术体系中的类加载机制。本文简述了JVM三种预定义类加载器&#xff0c;即启动类加载器、扩展类加载器和系统类加载器&#xff0c;并介绍和分析它…
阅读更多...
【Java · 类加载】类加载器

【Java · 类加载】类加载器

1. 概述 类加载器是 JVM 执行类加载机制的前提。 ClassLoader的作用&#xff1a; ClassLoader是Java的核心组件&#xff0c;所有的Class都是由ClassLoader进行加载的&#xff0c;ClassLoader负责通过各种方式将Class信息的二进制数据流读入JVM内部&#xff0c;转换为一个与目…
阅读更多...
java类加载

java类加载

当程序主动使用某个类时&#xff0c;如果该类还未被加载到内存中&#xff0c;则JVM会通过加载、连接、初始化3个步骤来对该类进行初始化。如果没有意外&#xff0c;JVM将会连续完成3个步骤&#xff0c;所以有时也把这个3个步骤统称为类加载或类初始化。 一、类加载过程 加载指…
阅读更多...
Java的类加载

Java的类加载

1、类的加载过程 Java文件通过javac编译成.class二进制字节码文件&#xff0c;然后交给类加载器加载到我们的虚拟机内存中,最后我们通过new 对象来实现对象的初始化&#xff0c;才能调用和执行这个类&#xff0c;类的加载有三步&#xff1a;加载、连接、初始化。 1.1、加载 …
阅读更多...
Java类的加载

Java类的加载

类的生命周期 当java源代码文件被javac编译成class文件后&#xff0c;并不能直接运行&#xff0c;而是需要经过加载&#xff0c;连接和初始化这几个阶段后才能使用。在使用完类或被销毁后&#xff0c;JVM会将类卸载掉。 类加载的过程 类加载的过程需要经过三个阶段分别是&a…
阅读更多...
推荐文章

Copyright @ 2022~2023