原生ajax发起post请求,原生Ajax发送get、post请求每一步

最新推荐文章于 2024-04-21 13:45:46 发布
最新推荐文章于 2024-04-21 13:45:46 发布
阅读量3.2k 收藏 8
点赞数 3
文章标签： 原生ajax发起post请求

说明

发送Ajax的请求的核心对象是XMLHttpRequest，因此我们需要了解该对象的相关属性和方法

方法(图一)

51f0de25196dc06347d002556dcb9fc0.png

属性(图二)

eb3ac6fe478b17f8ab677ec9c81f1c0e.png

第一步：创建 XMLHttpRequest对象，下面都简写为 xhr对象

由于XMLHttpRequest不兼容IE6及以下的浏览器，因此在IE6及以下的浏览器不能使用XMLHttpRequest创建 xhr对象，使用ActiveXObject('Microsoft.XMLHTTP')代替。但是我写好之后测试了一波，IE5好像支持 XMLHttpRequest对象，IE6没测，因此技术不断更新，现在看到的不一定是对的。还需要自己动手测试以下。

var xhr = null

if (window.XMLHttpRequest){//如果浏览器存在这个对象 则以这种方式创建

xhr = new XMLHttpRequest()

} else{//否则 以下面这种方式

xhr = new ActiveXObject('Microsoft.XMLHTTP')

}

//或者使用 try catch 这里与上面的 if 语句 效果等同

try{

xhr = new XMLHttpRequest()

}catch(e){

xhr = new ActiveXObject('Microsoft.XMLHTTP')

}

第二步：准备发送，调用open方法

xhr.open(type, url, boolean)，该方法具有三个参数。

type：请求的方式，可以是以下这些值: GET、POST、DELETE、OPTIONS、HEAD、PUT、TRACE、CONNECT，用的最多的是 GET、POST请求。

url： 请求路径和参数。路径和参数以?为分割线例如 : http://localhost:3000?uname="车神-黄杰&age=23"

boolean：操作方式，true(默认值) --->异步发送请求 false ---> 同步发送请求。

第三步：发送，调用send方法

xhr.send()

GET请求：最好传入null，有些浏览器约定好了，在发送GET请求时不传入null会报错。

POST请求：传入向服务器发送的数据。

向服务器发送数据

GET请求

此时数据由open方法传入，数据拼接在第二个参数请求路径的后面 以？为分隔符。

在IE浏览器中，请求参数存在中文会出现乱码 此时需要对请求参数进行编码 使用encodeURI(parme)解决兼容性。

encodeURI() 可把字符串作为 URI 进行编码 但是对于一些ASCLL的字母或者数字不会进行编码， 一些特殊的符号也不会进行编码 例如_ . ! ~ * ' ( ) 等

例如encodeURI('宿舍') 此时结果为 %E5%AE%BF%E8%88%8D 。

var parme = 'username=' + "车神-黄杰" + '&paw='+ 123

//在IE浏览器会出现乱码

//xhr.open('GET', 'http://localhost:3000/?' + parme, true)

xhr.open('GET', 'http://localhost:3000/?' + encodeURI(parme), true)

POST请求

在发送GET请求的时候，send()方法传入null，而在POST请求中，传入需要发送给服务器的数据。

此时不需要对请求字符串进行编码，但是需要设置Content-Type为application/x-www-form-urlencoded。

var parme = 'username=' + "车神-黄杰" + '&paw='+ 123

//调用open方法

xhr.open('POST', 'http://localhost:3000/', true)

//设置Content-Type

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

//发生数据

xhr.send(parme)

第四步：处理请求

绑定 onreadystatechange事件

readyState 为 4说明收到数据

status 为 200 表示数据完整

xhr.onreadystatechange = function () {

// 状态为4 表示收到数据

if (xhr.readyState === 4){

//状态码为 200 表示数据完整

if (xhr.status === 200){

//接收并处理数据

var rel = xhr.responseText

}

}

}

示例

主要的事件 onreadystatechange，属性readyState、status，请看图一、图二即可

GET

getAjax()

function getAjax(){

//发送Ajax的步骤

var parme = 'username=' + "车神-黄杰" + '&paw='+ 123

//第一步： 创建XMLHttpRequest对象

var xhr = null

if (window.XMLHttpRequest){//如果浏览器存在这个对象 则以这种方式创建

xhr = new XMLHttpRequest()

} else{//否则 以下面这种方式

xhr = new ActiveXObject('Microsoft.XMLHTTP')

}

//第二步 准备发送 调用opent方法 (有三个参数) 拼接数据

xhr.open('GET', 'http://localhost:3003/?' + encodeURI(parme), true)

//第三步 发送 调用send方法

xhr.send(null)//get请求 为null

//第四步处理请求 绑定事件onreadystatechange

xhr.onreadystatechange = function () {

// 状态为4 表示收到数据

if (xhr.readyState === 4){

//状态码为 200 表示数据完整

if (xhr.status === 200){

//接收并处理数据

var rel = xhr.responseText

//接收的是json数据 使用JSON.parse()转为js对象

console.log("GET: " + JSON.parse(rel).msg)

}

}

}

}

POST

postAjax()

function postAjax(){

//发送Ajax的步骤

var parme = 'username=' + "车神-黄杰" + '&paw='+ 123

//第一步： 创建XMLHttpRequest对象

var xhr = null

if (window.XMLHttpRequest){//如果浏览器存在这个对象 则以这种方式创建

xhr = new XMLHttpRequest()

} else{//否则 以下面这种方式

xhr = new ActiveXObject('Microsoft.XMLHTTP')

}

//第二步 准备发送 调用opent方法 (有三个参数) 拼接数据

xhr.open('POST', 'http://localhost:3003/?', true)

//第三步 发送 调用send方法

//设置Content-Type

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

xhr.send(parme)//get请求 为null

//第四步处理请求 绑定事件onreadystatechange

xhr.onreadystatechange = function () {

// 状态为4 表示收到数据

if (xhr.readyState === 4){

//状态码为 200 表示数据完整

if (xhr.status === 200){

//接收并处理数据

var rel = xhr.responseText

//接收的是json数据 使用JSON.parse()转为js对象

console.log("POST: " + JSON.parse(rel).msg)

}

}

}

}

node简单服务器 只是部分代码

//GET

router.get('/', (req, res) =>{

res.json({"msg": "发生成功", "code": 1})

})

//POST

router.post('/', (req, res) =>{

res.json({"msg": "发生成功", "code": 1})

})

打印结果

a98da8e9999f987952df19b25d6b4358.png

Ajax发送PUT/DELETE请求时出现错误的原因及解决方案

本文讲什么? 大家应该都知道.在HTTP中,规定了很多种请求方式,包括POST,PUT,GET,DELETE等.每一种方式都有这种方式的独特的用处,根据英文名称,我们能够很清楚的知道DELETE方法的 ...

原生Ajax发送请求

ajax  get&post 1.使用get发送请求,会有请求缓存 1)什么叫请求缓存,请求信息相同浏览器不会再向服务器发送请求,导致访问服务器失败. 2)解决:将随机数添加到请求路径后面参数 ...

Ajax发送和接收请求

首先Ajax的不刷新页面提交数据 基本上浏览器能接收的信息,Ajax都可以接收,ex:字符串,html标签,css标签,xml格式内容,json格式内容等等..... / ...

手动(原生ajax)和自动发送ajax请求 伪ajax(Ifrname)

自动发送  ---> 依赖jQuery文件 实例-->GET请求: function AjaxSubmit() { $.ajax({ url:'/data', type:"GET ...

原生js发送ajax请求

堕落了一阵子了,今天打开博客,发现连登录的用户名和密码都不记得了.2016年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...

原生JS实现ajax 发送post请求

1. [代码]原生JS实现ajax 发送post请求 var oStr = ''; var postData = {}; var oAjax = null; //post ...

原生JS发送Ajax请求、JSONP

一.JS原生Ajax Ajax=异步Javascript+XML: ajax是一种数据请求的方式,不需要刷新整个页面.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ajax的核心 ...

原生JS实现Ajax及Ajax的跨域请求

前  言          如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...

原生ajax的请求函数

ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务器.发送请求.接收响应 ...

随机推荐

NOIP1999邮票面值设计[搜索|DP]

题目描述 给定一个信封,最多只允许粘贴N张邮票,计算在给定K(N+K≤40)种邮票的情况下(假定所有的邮票数量都足够),如何设计邮票的面值,能得到最大值MAX,使在1-MAX之间的每一个邮资值都能得到 ...

Linux下Mongodb安装和启动配置

1.下载安装包 wget http://fastdl.mongodb.org/linux/mongodb-linux-i686-1.8.2.tgz 下载完成后解压缩压缩包 tar zxf mongod ...

2016CCPC东北地区大学生程序设计竞赛 1005 HDU5926

链接http://acm.hdu.edu.cn/showproblem.php?pid=5926 题意:给我们一个矩阵,问你根据连连看的玩法可以消去其中的元素 解法:连连看怎么玩,就怎么写,别忘记边界 ...

转载：CancellationToken

http://www.cnblogs.com/Abbey/archive/2011/09/12/2174208.html 最近在学习.NET中的线程同步.其中一个重要的技术叫线程的取消(中止),涉及的 ...

Python连接Redis连接配置

1. 测试连接: Python 2.7.8 (default, Oct 20 2014, 15:05:19) [GCC 4.9.1] on linux2 Type "help", ...

【bzoj3514】Codechef MARCH14 GERALD07加强版

hzwer上少有的几道需要建一下模的 要不是有这么几道题 我都觉得lct只会考裸题了呢 题解看hzwer吧 http://hzwer.com/4358.html 唯一蛋疼的就是为了处理0这个呵呵的位置 ...

转：Loadrunner上传文件解决办法(大文件)

最近再做一个跟海量存储相关的项目测试,需要通过LR模拟用户大量上传和下载文件,请求是Rest或Soap,同时还要模拟多种大小尺寸不一的文件 通常情况下,都是使用简单的post协议即可: 方法一: we ...

Leetcode题解(23)

69. Sqrt(x) 题目 分析,题目实现求一个int数的平方根,最暴力的算法就是逐个遍历,从1开始到x,判断是否有一个数i,其中满足i*i<=x,并且(i+1)*(i+1)>x;这个算 ...

&lbrack;Android Pro&rsqb; AndroidStudio IDE界面插件开发(进阶篇之Editor)

转载请注明出处:[huachao1001的专栏:http://blog.csdn.net/huachao1001/article/details/53885981] 我们开发AndroidStudio ...

最小生成树(prime算法 &amp&semi; kruskal算法)和 最短路径算法(floyd算法 &amp&semi; dijkstra算法)

一.主要内容: 介绍图论中两大经典问题:最小生成树问题以及最短路径问题,以及给出解决每个问题的两种不同算法. 其中最小生成树问题可参考以下题目: 题目1012:畅通工程 http://ac.jobdu ...

临安散人
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生ajax请求
qq_45683232的博客
03-11 767
ajax笔记
原生javascript实现Ajax之get与post
foryoustudio的博客
04-30 90
原生javascript实现ajax之get与post
原生Ajax发送get、post请求每一步
weixin_30607659的博客
05-29 445
说明 发送Ajax的请求的核心对象是XMLHttpRequest，因此我们需要了解该对象的相关属性和方法 方法(图一) 属性(图二) 第一步：创建 XMLHttpRequest对象，下面都简写为 xhr对象 由于XMLHttpRequest不兼容IE6及以下的浏览器，因此在IE6及以下的浏览器不能使用XMLHttpRequest创建 xhr对象，使用ActiveXObject('Micr...
ajax监听从发送到响应返回,Ajax发送GET、POST请求和响应XML数据案例
weixin_36410316的博客
08-07 450
1、新建工程新建一个java web工程，新建一个Servlet文件 AServlet.java,用于返回get和post请求。public class AServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletExce...
【封装原生ajax请求】也没那么复杂嘛！
小陈的博客
07-21 333
就代表请求发送成功，并且服务器端进行了正确的处理，此时客户端就可以根据服务器返回的数据进行下一步操作了。至此，我们就完成了一个简易版原生Ajax的封装，又多了一项前端技能呢~当声明了xhr对象后，我们就可以着手打开请求和发送请求的工作了。等于其他状态码，我们就需要处理异常，告诉客户端本次请求发送失败。格式的字符串，为了便于回调函数更方便的使用这些数据，我们需要使用。请求，得到服务器返回的数据后，异步渲染在页面上。请求来说，就简单多了，发送请求通过调用。，请求参数，成功之后的回调函数等…...
异步请求ajax介绍，原生ajax，$
2401_84048895的博客
04-21 772
针对以上面试题，小编已经把面试题+答案整理好了。
php原生的异步请求,原生JavaScript实现Ajax异步请求
weixin_39561431的博客
03-10 78
ajax现在是一种非常流行的技术，现在虽然可以利用JQuery或者一些第三方插件甚至微软提供的一些控件可以方面的实现ajax功能，但是明白其原理也是非常重要的，下面是来使用纯javascript实现获取服务器端的功能来展示如何使用纯javascript实现ajax功能，以弄清其原理.在前端页面开发的过程中，经常使用到Ajax请求，异步提交表单数据，或者异步刷新页面。一般来说，使用Jquery中的$...
React ajax 发送请求（六）
weixin_42272869的博客
05-02 989
React ajax 发送请求（六） React 官网链接： 英文官网 中文官网 接着上节 React 代理配置（五） 前言 在实际做React 项目的时候， 前端应用需要通过 ajax 请求与后台进行交互，React本身只关注于界面, 并不包含发送ajax请求的代码，所以一般 React 应用中需要集成第三方ajax库（或自己封装，但是一般还是借助第三方库来封装，没有自己完全去封装的） ajax 请求库 常见的在React 用的 ajax 请求库有以下两个： jQuery： 比较重，如果需要另外引
java处理ajax异步请求_JavaScrpit中异步请求Ajax实现
weixin_29664063的博客
02-13 302
在前端页面开发的过程中，经常使用到Ajax请求，异步提交表单数据，或者异步刷新页面。一般来说，使用Jquery中的$.ajax，$.post，$.getJSON，非常方便，但是有的时候，我们只因为需要ajax功能而引入Jquery比较不划算。所以接下来便用原生JavaScrpit实现一个简单的Ajax请求，并说明ajax请求中的跨域访问问题，以及多个ajax请求的数据同步问题。JavaScript...
Ajax原生实现 [Ajax][前后端交互]
m0_57001006的博客
06-17 347
注意: webback是我们的后端的项目访问路径 后端服务器内容: 我们后端中会输出一个tom, 并且前端中会以弹框的形式输出一个喵喵笑了 然后这个请求还涉及到了一个跨域的问题: 因为前端和后端的程序我们是分离开发的, 所以肯定是不同的两个服务, 也就是这个时候就肯定是不同源的, 所以就会有跨域问题: 所以我们就在后端中使用CORS的方式将跨域问题解决了 因为我们是前后端分离开发的,我的前端内容是在8848端口上运行的, 而后端Servlet是在8080端口上运行的, 所以对于这种只要是: ①协
原生 JS Ajax,GET和POST 请求实例代码
10-22
这里我们将深入探讨原生JS中的Ajax GET和POST请求，并通过实例代码来理解它们的工作原理。 1. **创建XMLHttpRequest对象** 在JavaScript中，Ajax的核心是XMLHttpRequest对象，它提供了与服务器通信的能力。在上面...
浅谈JS原生Ajax,GET和POST
10-22
下面小编就为大家带来一篇浅谈JS原生Ajax,GET和POST。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Javascript原生ajax请求代码实例
10-15
这里我们将深入探讨如何使用原生JavaScript实现一个简单的Ajax请求。 首先，我们需要创建一个名为`Ajax`的类，这个类将包含处理Ajax请求的所有必要方法和属性。在提供的代码实例中，`Ajax`类包含了以下关键组成部分...
pillow_heif-0.17.0-pp39-pypy39_pp73-macosx_14_0_arm64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
cykooz.resizer-3.0.0-cp310-cp310-macosx_11_0_arm64.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
[毕设]Delphi题库管理与试卷自动生成系统.zip
最新发布
07-27
[毕设]Delphi题库管理与试卷自动生成系统
131 种水果、蔬菜和坚果的 90380张的高质量图像数据集+图像识别与定位+该数据集相关的研究论文
07-27
<项目介绍> 包含131 种水果、蔬菜和坚果的 90380张的高质量图像数据集+该数据集相关的研究论文。可供深度学习图像识别与定位。 - 训练集大小：67700 个图像 测试集大小：22888 个图像 文件名格式：image_index_100.jpg（例如 32_100.jpg）或 r_image_index_100.jpg（例如 r_32_100.jpg）或 r2_image_index_100.jpg 或 r3_image_index_100.jpg。 “r”代表旋转水果。 “r2”表示水果绕第三轴旋转。 “100”来自图像尺寸（100x100 像素）。 水果是如何拍摄的: 1:使用 C920 摄像机拍摄水果。最好的网络摄像头之一。 2:在水果后面，我们放了一张白纸作为背景。 3:将水果和蔬菜种植在低速电机（3转/分钟）的轴中，并录制一段20秒的短片。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------
Matlab实现斑点鬣狗优化算法SHO-CNN-BiLSTM-Mutilhead-Attention多变量时序预测.rar
07-27
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
原生ajax发送post请求
06-01
可以使用以下代码发送原生Ajax Post请求： ```javascript var xhr = new XMLHttpRequest(); xhr.open("POST", url, true); xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); xhr....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值