js一个简单的ajax示例,原生JS简单实现ajax的方法示例

2023-10-26

本文实例讲述了原生JS简单实现ajax的方法。分享给大家供大家参考,具体如下:

HTML部分:

这里有个input按钮,点击会触发click事件,click事件调用Ajax()方法。

JS部分:

//通过这个函数来异步获取信息

function Ajax(){

var xmlHttpReq = null; //声明一个空对象用来装入XMLHttpRequest

if (window.ActiveXObject){//IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest的

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

}

else if (window.XMLHttpRequest){//除IE5 IE6 以外的浏览器XMLHttpRequest是window的子对象

xmlHttpReq = new XMLHttpRequest();//实例化一个XMLHttpRequest

}

if(xmlHttpReq != null){ //如果对象实例化成功

xmlHttpReq.open("GET","test.php",true); //调用open()方法并采用异步方式

xmlHttpReq.onreadystatechange=RequestCallBack; //设置回调函数

xmlHttpReq.send(null); //因为使用get方式提交,所以可以使用null参调用

}

function RequestCallBack(){//一旦readyState值改变,将会调用这个函数

if(xmlHttpReq.readyState == 4){

if(xmlHttpReq.status == 200){

//将xmlHttpReq.responseText的值赋给ID为 resText 的元素

document.getElementById("resText").innerHTML = xmlHttpReq.responseText;

}

}

}

}

Ajax大约分四步,创建Ajax对象,用open()方法偷偷的跑到服务器去获取数据,成功后做相应的处理。用GET方法将要提交的参数写到open方法的url参数中就行了,此时send方法的参数为null。

例如GET方法 :

var url = "login.php?user=XXX&pwd=XXX";

xmlHttpRequest.open("GET",url,true);

xmlHttpRequset.send(null);

例如POST方法:

xmlHttpRequest.open("POST","login.php",true);

xmlHttpRequest.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");

xmlHttpRequest.send("user="+username+"&pwd="+password);

如果需要在send里传递参数则setRequestHeder是必须的

需要注意的是根据提交方式的不同,两种提交方式分别调用后台的doGet方法和doPost方法处理。

PHP部分:

echo "Hello Ajax!";

?>

Ajax获取了PHP的数据后,就会偷偷的将数据放到相应的div层中。这个click事件并没有使得页面刷新,就偷偷的获取了服务器端的数据,服务端的数据也可以是从数据库里读取出来的,获取数据后,Ajax还可以进行一些动作的处理。

一切都在悄无声息中。

希望本文所述对大家JavaScript程序设计有所帮助。

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

js一个简单的ajax示例,原生JS简单实现ajax的方法示例 的相关文章

随机推荐

  • 基于Vue + SpringBoot的支付宝支付功能【沙箱测试】

    1 演示说明 1 1 先来看看最终效果 2 1 说明 这并不是真正的支付 是支付宝提供的一个测试 之所以没有使用正式的支付 是因为支付宝 微信也是 不提供个人开发者功能 只有商户审核通过了才可以有这个功能 所有这里使用的是沙箱测试 2 环境
  • DPDK Rx flexible descriptor 在Intel E810 网卡中的使用

    什么是Rx flexible descriptor Intel E810系列网卡支持Rx flexible descriptor 这是一种可以通过软件定义格式并配置到网卡硬件中的Rx descriptor 接收描述符 Flexible de
  • 数据提取之lxml

    1 lxml的认识 在前面学习了xpath的语法 那么在代码中我们如何使用xpath呢 对应的我们需要lxml 安装方式 pip install lxml 2 lxml的使用 2 1 lxml模块的入门使用 1 导入lxml 的 etree
  • 4.HLSL Effect(效果框架)

    4 HLSL Effect 效果框架 进行到这里 读者可能会觉得使用着色器多少有些繁琐 Effect 效果框架 被提出以解决这些问题 作为一种方法 Effect简化了使用着色器的操作 作为一个框架 Effect把顶点着色器和像素着色器有机地
  • 11.网络爬虫—多线程详讲与实战

    11 网络爬虫 多线程详讲与实战 程序 进程 线程 线程常用方法 多线程的优点 join 案例 共享全局变量资源竞争 互斥锁 死锁 互斥锁 死锁 多线程实战 某果多线程实战 前言 个人简介 以山河作礼 Python领域新星创作者 CSDN实
  • mysql查询前5条记录_各个数据库中,查询前n条记录的方法

    SQL查询前10条的方法为 1 select top X from table name 查询前X条记录 可以改成需要的数字 比如前10条 2 select top X from table name order by colum name
  • 【Python技巧】(虚拟环境报错、pycharm)无法加载文件 ...\venv\Scripts\activate.ps1,因为在此系统上禁止运行脚本。

    一 问题出现 使用Pycharm设置虚拟环境后 打开终端出现如下报错 无法加载文件 venv Scripts activate ps1 因为在此系统上禁止运行脚本 二 解决方式 已管理员的身份打开powershell终端 然后查询get e
  • c++ main函数调用 类中的枚举_利用Doxygen给C程序生成注释文档

    利用Doxygen为C程序生成注释文档 一 Doxygen工具的安装 利用Doxygen工具生成API帮助文档需要下载安装以下三个软件 1 Doxygen 可以从一套归档源文件开始 生成HTML格式的在线类浏览器 或离线的 LATEX RT
  • 图像去雾算法学习

    现有的图像采集设备对外界环境的干扰非常敏感 在雾霾环境中 获取的户外图像往往退化严重 主要表现为场景特征信息模糊 对比度低 色彩失真 不利于计算机视觉系统对图像真实特征的提取 从而影响其后续的分析 理解 识别等一系列处理 很大程度上降低了视
  • vue3.0安装sass(scss)以及报错解决

    本篇文章主要记录了笔者安装sass的过程 1 安装ruby 首先在官网中下载 https rubyinstaller org downloads 下载之后进行安装 在安装过程中 要记得勾选添加环境变量的选项 其他的就是一直next就可以了
  • jq的核心函数

    jquery的核心函数 1 代表接受一个函数 也就是我们平常用的入口函数 2 接受一个字符串 2 1 接受一个字符串选择器 2 2 接受一个代码片段 3 接受一个dom对象 会被包装成jquery对象返回给我们
  • apk内部存储路径

    首先内部存储路径为 data data youPackageName 下面讲解的各路径都是基于你自己的应用的内部存储路径下 所有内部存储中保存的文件在用户卸载应用的时候会被删除 一 files Context getFilesDir 该方法
  • 数据结构之链栈

    栈介绍 首先 它是一个线性表 准确的说 应该是一个插入 删除受限制的线性表 它仅仅在表尾进行插入和删除操作的线性表 我们把这种受限制的线性表称为栈 如果栈的元素在使用时出现了元素变化不可预测的情况 有时很大 有时又很小 这种情况下 则建议使
  • linux查看jvm内存

    查看内存大小 free h free命令相关知识 判断Java程序对内存的消耗 top top命令相关知识 查看tomcat信息 ps ef grep tomcat 4 1分析内存实例 pid 21069 使用jmap来查看jvm的堆的快照
  • MySQL数据库基本操作

    一 数据库的操作 CURD 重点 1 创建数据库的语法 基本语法 create database 数据库名称 2 查看数据库 show databases 查看所有数据库 use 数据库名称 使用数据库 show create databa
  • Node.js 应用的御用品: Node.js 错误处理系统

    开发中 有些开发者会积极寻求处理错误 力求减少开发时间 但也有些人完全忽略了错误的存在 正确处理错误不仅意味着能够轻松发现和纠正错误 而且还意味着能够为大型应用程序开发出稳健的代码库 特别是对于 Node js 开发人员 他们有时会也发现自
  • 上班一个月,我的几点体会

    这篇博文其实在去年就已经在CSDN发过的 后来 某次误操作不小心删除了 今天找出来重新发一下 我是从3月1号开始上班的 今天3月31号 刚好一个月结束 在这一个月里 我收获不少 感受颇深 现谈谈自己的几点感受 与大家分享 1 由于在学校里做
  • JDBC与MySQL数据库的连接

    一 Jdbc连接池 概念 一个容器 存放数据库连接的容器 好处 节约资源 用户访问高效 规范 1 用连接池管理连接 可以重复利用 2 不是 自己创建连接 而是通过连接池获取连接 3 使用完之后调用连接的close 方法归还连接 不是关闭连接
  • Unity中可用Lua版本效率分析比较

    欢迎来到你的代码我的鱼 oooofish com 本篇文章主要介绍Unity中可用的lua版本对比及分析 目前常见的unity lua库有以下 luainterface ulua nlua unilua 简单介绍 luainterface
  • js一个简单的ajax示例,原生JS简单实现ajax的方法示例

    本文实例讲述了原生JS简单实现ajax的方法 分享给大家供大家参考 具体如下 HTML部分 这里有个input按钮 点击会触发click事件 click事件调用Ajax 方法 JS部分 通过这个函数来异步获取信息 function Ajax