原生js php ajax,原生Ajax怎么写

2023-11-20

写原生Ajax的方法:首先创建XMLHttpRequest对象;然后编写回调函数onreadystatechange;接着配置请求信息;最后发送请求即可。

27351c7c69bad527ddfd50824e7a3b26.png

Ajax(Asynchronous JavaScript and XML的缩写)是一种异步请求数据的web开发技术,对于改善用户的体验和页面性能很有帮助。

简单地说,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并在网页上呈现出来。常见运用场景有表单验证是否登

入成功、百度搜索下拉框提示和快递单号查询等等。

想要对Ajax有一个全面的了解,这里可以去Js教程中对它进行一个全方面认识。

现在Ajax经过各种优化已经变得非常方便了,例如使用Jquery只需要一行便可以使用Ajax了。

52e10b9594901228579294a49c89a328.png

那么原生的Ajax是什么样呢?

让我们来看一下吧。

function ajax(url){

//创建XMLHttpRequest对象,新版本的浏览器可以直接创建XMLHttpRequest对象,IE5或IE6没有

//XMLHttpRequest对象,而是用的ActiveXObject对象

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject("microsoft.XMLHttp")

xhr.open("get",url,true);

xhr.send();//发送请求

xhr.onreadysattechange = () =>{

if(xhr.readystate == 4){//返回存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

if(xhr.status == 200){//返回状态码

var data = xhr.responseTEXT;

return data;

}

}

}

}

readystate:

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成,且响应已就绪

status :

200: "OK"

404: 未找到页面

405:请求方式不正确

500:服务器内部错误

403:禁止请求

Ajax有两种请求方式:

get请求方式

function ajax() {

//创建核心对象

xhr = null;

if (window.XMLHttpRequest) {// 新版本的浏览器可以直接创建XMLHttpRequest对象

xhr = new XMLHttpRequest();

} else if (window.ActiveXObject) {// IE5或IE6没有XMLHttpRequest对象

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

//编写回调函数

xhr.onreadystatechange = function() {

if (xhr.readyState == 4 && xhr.status == 200) {

alert(xhr.responseText)

}

}

//open设置请求方式和请求路径

xhr.open("get", "/Ajax/ajax?userId=10");//一个url还传递了数据,后面还可以写是否同步

//send 发送

xhr.send();

}

post请求方式

function ajax() {

//创建核心对象

xhr = null;

if (window.XMLHttpRequest) {// 新版本的浏览器可以直接创建XMLHttpRequest对象.

xhr = new XMLHttpRequest();

} else if (window.ActiveXObject) {// IE5或IE6没有XMLHttpRequest对象

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

//编写回调函数

xhr.onreadystatechange = function() {

if (xhr.readyState == 4 && xhr.status == 200) {

alert(xhr.responseText)//警告框,显示返回的Text

}

}

//open设置请求方式和请求路径

xhr.open("post", "/Ajax/ajax2");//一个servlet,后面还可以写是否同步

//设置请求头

xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")

//send 发送

xhr.send("userId=10");

}

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

原生js php ajax,原生Ajax怎么写 的相关文章

  • 后台-husky提交代码规范使用

    husky是一个git hook工具 可以帮助我们触发git提交的各个阶段 pre commit commit msg pre push 1 如何使用husky呢 npx husky init npm install Windows安装不成
  • 一个基于SpringBoot2+Vue+Redis的企业级聚合支付系统可二次开发接私活

    点击关注 Java开发宝典 2022 01 20 08 50 收录于话题 项目分享28个 项目介绍 Jeepay是一套适合互联网企业使用的开源支付系统 支持多渠道服务商和普通商户模式 已对接微信支付 支付宝 云闪付官方接口 支持聚合码支付
  • 微信小程序读取服务器数据,微信小程序前端获取后端数据

    webMessage 测试 index js Page getMessage function var self this wx request url http localhost 8080 demo 仅为示例 需填写自己服务器的地址 d
  • word2vec深入理解及实践

    以前对于word2vec的理解就是通过训练能得到词向量 对应有两种方法 skip gram和CBOW 两者差别其实不大 但关于具体的细节也不是很了解 今天来深入理解并记录一下 理论方面 word2vec是一种基于神经网络的语言模型 是goo
  • 网络协议之ARP协议解析

    ARP协议简介 ARP Address Resolution Protocol 是个地址解析协议 最直白的说法是 在IP以太网中 当一个上层协议要发包时 有了该节点的IP地址 ARP就能提供该节点的MAC地址 OSI 模式把网络工作分为七层
  • Spring项目如何部署项目到Linux

    部署前先将项目所需的数据库添加到linux的mysql中 部署jar包到linux 修改项目pom文件 将打包方式改为jar 在pom中添加springboot插件
  • 春考计算机服务器配置,考试系统的服务器配置有什么要求?

    处理器 CPU类型 Intel 至强E5 2600 CPU型号 Xeon E5 2650 CPU频率 2GHz 智能加速主频 2 8GHz 标配CPU数量 1颗 最大CPU数量 2颗 制程工艺 32nm 三级缓存 20MB 总线规格 QPI
  • Matlab运行程序_暂停方法

    pause函数 官方文档 其调用格式为 pause 延迟数秒 必须启用暂停 此调用才能生效 暂停执行matlab 并等用户按下任意键 pause on 启用暂停设置 若想省略延迟时间 则直接使用pause函数 则将程序暂停 直到用户按任意键
  • 如何在 CentOS 中下载包含所有依赖项的 RPM 包

    翻译于ostechnix com 上 Senthil Kumar的 How To Download A RPM Package With All Dependencies In CentOS 我们可以使用curl或wget命令下载任何包 对
  • 火焰识别python_基于Python的火焰识别程序

    本期介绍一下笔者在试验数据处理时写的一个用于火焰识别的小程序 该小程序的功能是对拍摄到的火焰图像进行提取 增强 降噪和识别 并输出相应处理过的火焰图像以及火焰参数 如传播距离 面积等 该程序基于Python 3语言 用到了前面提到的图像和数
  • EditText设置监听

    在开发中有的需要对编辑框进行监听如果编辑框中没有值 登录按钮就是无法点击并且颜色为灰色 当编辑框中的值满足添加的时候 按钮可以点击同时颜色发生改变 由于自己是个菜鸟 代码中也有注释 也比较简单 有什么bug希望各位大神也能指点一二 acti
  • SSRS使用MySql作为数据源遇到的问题。

    因为工作需求 SSRS需要取到MySql数据源 还好有了ODBC 谷歌了很多 都是不完整的Solution 放上完整版的供大家评价参考 下面是StepByStep 问题1 使用ODBC数据源 填入正确的MySql连接字符串 却显示 ERRO
  • Python File seek() 方法和File read()方法

    read 方法用于从文件读取指定的字节数 如果未给定或为负则读取所有 语法 read 方法语法如下 fileObject read size 参数 size 从文件中读取的字节数 默认为 1 表示读取整个文件 返回值 返回从字符串中读取的字
  • 最小花费爬楼梯(C语言)

    本周第二题 数组的每个索引做为一个阶梯 第 i个阶梯对应着一个非负数的体力花费值 索引从0开始 每当你爬上一个阶梯你都要花费对应的体力花费值 然后你可以选择继续爬一个阶梯或者爬两个阶梯 您需要找到达到楼层顶部的最低花费 在开始时 你可以选择
  • 53. 翻转字符串

    思路 首先翻转字符串整体 然后对于每个单词进行翻转 两次翻转的函数使用同一个函数 翻转函数的思路 使用队列 将String转成char 然后反过来存储 下面就是使用的这种方法 用两个指针 进行前后字符的对换 StringBuilder类中有
  • 使用Retrofit过程中碰到的一些问题(持续更新。。。。)

    1 服务端成功返回数据 但解析返回的json格式失败 解决方法 1 在使用默认推荐的JSON解析配置 GsonConverterFactory create 时 我们自己创建的json对象基类中的各个变量名称要与服务器返回的JSON中的各名
  • 深度学习RuntimeError: CUDA error: CUBLAS_STATUS_EXECUTION_FAILED when calling `cublasSgemm( handle, opa,

    错误记录 在使用GPU跑程序时 前面加载数据是没问题的 后面relu 开始报错 错误为 RuntimeError CUDA error CUBLAS STATUS EXECUTION FAILED when calling cublasSg
  • HDU - 1002 A + B Problem II

    I have a very simple problem for you Given two integers A and B your job is to calculate the Sum of A B Input The first
  • 【golang】error parsing regexp: invalid or unsupported Perl syntax (正则表达式校验密码)

    要在 Go 中编写密码校验规则 确保密码不少于8位且包含数字和字母 你可以使用正则表达式和 Go 的 regexp 包来实现 以下是一个示例代码 错误示范 package main import fmt regexp func valida

随机推荐

  • 一、机器学习简介

    一 机器学习简介 1 1 机器学习简介 人工智能 Artificial Intelligence 简称AI 是对人的意识 思维过程进行模拟的一门新学科 如今 人工智能从虚无缥缈的科学幻想变成了现实 计算机科学家们在 机器学习 Machine
  • sc_project

    服务计算项目 总结报告 项目介绍 工作说明 实现效果 实验心得 项目介绍 本次项目是一个文章的博客 其功能有用户的登录 查找获取文章 删除文章 编辑评论 查看评论等等 除此之外用户登录时还会获得TOKEN 而用户添加评论时需要进行TOKEN
  • c++使用继承类实现异常处理

    sales h pragma once include
  • Linux Container(lxc)分析和配置使用

    前提 本文翻译 有道翻译 自linux container lxc 根据重点摘录学习 介绍 最好将容器化定义为 通过操作系统中的特性启用的进程隔离机制 容器是与系统其他部分隔离的一个或多个进程的集合 Containers VMs lxc通过
  • Node.js的基本模块,global、process详解

    基本模块 因为Node js是运行在服务区端的JavaScript环境 服务器程序和浏览器程序相比 最大的特点是没有浏览器的安全限制了 而且 服务器程序必须能接收网络请求 读写文件 处理二进制内容 所以 Node js内置的常用模块就是为了
  • 2023 华子(华为)硬件岗位面试2

    写在前面 本内容仅作参考 如有侵权或者其他问题 立马删除 也仅作为笔者个人经历或者回忆 不一定完全准确 一切都在改变 也祝愿大家面试顺利 顺利取得自己心仪的offer 编辑切换为居中 添加图片注释 不超过 140 字 可选 本次是业务主管面
  • 代码随想录算法训练营19期第42天

    01背包问题 二维 代码随想录 视频讲解 带你学透0 1背包问题 关于背包问题 你不清楚的地方 这里都讲了 动态规划经典问题 数据结构与算法 哔哩哔哩 bilibili 初步思路 动态规划 背包问题 总结 dp i j 表示从下标为 0 i
  • Spring Boot(十):Druid的监控统计和多数据源配置

    Druid的监控统计 Druid内置提供一个StatFilter 用于统计监控信息 下面我们就来做一些配置 启动Druid的监控 1 配置pom xml
  • JS阻止事件冒泡的几种方式

    JS阻止事件冒泡的几种方式 事件委托 将元素的绑定事件写起其父元素上 防止事件冒泡 example div div div div 将事件绑定在父元素上 不管子元素是不是动态生成的 将第一种绑定事件写成第二种方式 son click fun
  • Tomcat启动乱码

    修改tomcat的conf下的logging properties中的参数 java util logging ConsoleHandler encoding GBK 将UTF 8改到GBK就行了保存后重启tomcat就正常了
  • 如何调整oracle参数,使它支持更多的用户连接

    在参数文件中有三个参数 processes license max sessions license max users 这三个参数相互作用影响着用户连接数 license max sessions 同时连接数据库的会话数 license
  • 手把手教你通过端口映射,轻松搭建Windows远程桌面

    市面上有很多的远程桌面软件 如TeamViewer 向日葵等 但无一例外 它们提供的免费服务连接质量普遍不高 而付费服务价格又偏高 并不能使人满意 但众所周知 微软自带的Windows远程桌面其实在连接质量和稳定性方面一点都不输给第三方软件
  • jquery中$()的使用

    在jquery中最常使用的就是 这个符号了 在我没有系统的学习jquery之前 我用到的 都是用于对元素的选择 而这只是 的很简单的用法 在jquery 函数一共有三种用法 selector context 在这个方法中selector是选
  • error: GLES2/gl2.h: No such file or directory

    最近一个朋友让帮忙编译android程序 中间遇到了很多问题 大概都解决了 最后又遇到了一个问题 GLES2 gl2 h No such file or directory 这个问题 我大概知道是怎么回事 关键是没有指定ndk的编译版本号
  • 公司刚上市就来了个从字节拿28K的人,让我见识到了什么才是测试天花板···

    5年测试 应该是能达到资深测试的水准 即不仅能熟练地开发业务 而且还能熟悉项目开发 测试 调试和发布的流程 而且还应该能全面掌握数据库等方面的技能 如果技能再高些的话 甚至熟悉分布式组件等高级技能 或者说 做个项目小组长 管个3 4号人 应
  • router-link 和 router-view 的 关系

  • vue整合ueditor

    一 前端代码 Ueditor官网地址为 http ueditor baidu com website download html ueditor 下载好之后 将Jsp版本解压 解压后文件夹改名为ueditor 将文件夹中的jsp目录删掉 之
  • Elasticsearch7 清空指定Index 相关数据

    注意 Elasticsearch7 起 Index索引已经不支持创建指定Type 类型 默认取值为 doc Elasticsearch7 清空指定Index 语法 POST 请求 http es 服务器地址 索引名称 delete by q
  • go 进阶 gin实战相关: 五. gin_scaffold 企业脚手架

    目录 一 gin scaffold 企业级脚手架 二 gin scaffold 脚手架安装及使用演示 文件分层解释 开始使用 1 配置开启go mod 功能 2 下载 安装 gin scaffold 3 整合 golang common 4
  • 原生js php ajax,原生Ajax怎么写

    写原生Ajax的方法 首先创建XMLHttpRequest对象 然后编写回调函数onreadystatechange 接着配置请求信息 最后发送请求即可 Ajax Asynchronous JavaScript and XML的缩写 是一种