使用javascirpt实现原生的ajax

于 2020-06-03 23:10:27 发布
阅读量124 收藏
点赞数
分类专栏： 前端 文章标签： post js ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaozhuangyumaotao/article/details/106535123
版权

 前边说了ajax的概念以及ajax里面最重要的XMLHttpRequest对象，这次我们来看看如何使用javascript来实现ajax，并向服务器后台发送get和post类型的请求。例子效果如下：

GIF.gif

    这个例子很小，但ajax的特性却从中一览无遗：

1.ajax是异步的，一个请求的执行完成与否并不影响另一个请求的发送，这大大改善了网页程序的用户体验

2.ajax是局部刷新的，一个ajax请求可以只影响整个网页中的一小部分，而不是刷新整个网页。

那我们就来看一下，这个例子是怎么实现的吧，新建ajaxTest.html:

1

2

3

4

5

6

7

8

9

10

11

12

13

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>ajaxTest</title>

</head>

<body>

    <div><span id="get">显示get方式得到的内容</span></div>

    <input id="getBtn" type="button" value="get方式">

    <div><span id="post">显示post方式得到的内容</span></div>

    <input id="postBtn" type="button" value="post方式">

</body>

</html>

 javascript实现原生的ajax代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

<script>

    window.onload=function(){

        document.getElementById("getBtn").onclick=function(){

            var xmlhttp;

            if (window.XMLHttpRequest){//code for IE7+, Firefox, Chrome, Opera, Safari

              xmlhttp=new XMLHttpRequest();

            }else{// code for IE6, IE5

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

            }

            xmlhttp.onreadystatechange=function(){

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

                document.getElementById("get").innerHTML=xmlhttp.responseText;

              }

            }

            xmlhttp.open("GET","/testAjax/ajaxTestServlet?flag=get&uname=zdw",true);

            xmlhttp.send();

            document.getElementById("get").innerHTML="<img src='/testAjax/imgs/loading.gif' width='24px'>";

        }

        document.getElementById("postBtn").onclick=function(){

            var xmlhttp;

            if (window.XMLHttpRequest){//code for IE7+, Firefox, Chrome, Opera, Safari

              xmlhttp=new XMLHttpRequest();

            }else{// code for IE6, IE5

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

            }

            xmlhttp.onreadystatechange=function(){

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

                document.getElementById("post").innerHTML=xmlhttp.responseText;

              }

            }

            xmlhttp.open("POST","/testAjax/ajaxTestServlet?flag=post",true);

            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

            xmlhttp.send("pwd=zdw&uname=zdw");

        }

    }

</script>

后台的java代码如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

@Override

    protected void doPost(HttpServletRequest req, HttpServletResponse resp)

            throws ServletException, IOException {

        req.setCharacterEncoding("utf-8");

        resp.setContentType("text/html;charset=utf-8");

        String flag = req.getParameter("flag");

        PrintWriter writer = resp.getWriter();

        if ("get".equals(flag)) {

            try {

                Thread.sleep(5000);

            } catch (InterruptedException e) {

                // TODO Auto-generated catch block

                e.printStackTrace();

            }

            String uname = req.getParameter("uname");

            writer.write("用户名"+uname+"已存在");

        }else if ("post".equals(flag)) {

            String pwd = req.getParameter("pwd");

            writer.write("密码"+pwd+"不正确");

        }

    }

代码释疑：

结合上一篇介绍XMLHttpRequest对象的教程，上边的javascript代码也是很好理解的，我这里说说需要注意的地方吧，再啰嗦一下：

    1.XMLHttpRequest的获取注意兼容ie的写法别忘记了，不然程序不健壮

    2.XMLHttpRequest对象发送post请求的时候，要设置请求头application/x-www-form-urlencoded

    3.XMLHttpRequest对象发送get请求时，请求参数直接附加在请求地址后边即可，post的时候放在send()函数里面

乐之者java
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
博客
解锁swing技术新姿势，坦克大战游戏-java swing项目再实战
09-20 827
这，这是一个围绕Java swing技术趣味级的学习，助你解锁swing技术新姿势，更给力的项目，更用心的创作。除了可以巩固swing必备的基础之外，尤其涉及swing绘图技术、多线程操作、线程安全，io流的实际应用场景，分析透彻，说实话，不看，你亏大发了！！！ 来看看界面和游戏功能。1.欢迎界面：2.游戏界面3.菜单功能新鲜不新鲜？作为程序员，是不是想一探究竟，我相信，你是你这个好奇心的，GO!第一种方法:http://www.roadjava.com/...
博客
ye读春秋左传系列视频讲解
06-12 911
ye读春秋左传系列第一部之鲁隐公篇,左传名篇解读,左传故事1.左传这本书,春秋这个时代2.郑伯克段于鄢3.黄泉相见4.周郑交恶5.宋宣公知人6.石碏谏宠州吁7.东门之役8.玩火自焚原来是来自这里9.大义灭亲的故事10.臧僖伯谏观鱼11.怙恶不悛的故事12.姓与氏不同13.公子突败戎师14.围郑救宋15.郑庄公戒饬守臣16.鲁隐公之死ye读春秋左传系列第二部之鲁桓公篇,左传名篇解读,春秋左传故事https://www.bilibili.c
博客
五分钟搭建ftp服务器，真的不含糊
11-11 1223
五分钟搭建ftp服务器，真的不含糊
博客
sftp、ftp、ssh以及vsftpd、sshd的区别与关系
11-11 2293
sftp、ftp、ssh以及vsftpd、sshd的区别与关系
博客
服务器日常维护命令
06-23 805
查看最占用内存的前十条进程：psaux|grep-vPID|sort-rn-k+3|head查看正在监听的端口：netstat-anptop命令简化(以兆为单位返回linux系统内存)：free-mtop:shift+m(按内存使用大小排序)服务器重启之后01、如果防火墙firewalld未自动启动，需要手动启动：systemctlstartfirewalld02、启动web容器cd/usr/local/tomcat/bin./s...
博客
linux文章迁移之一
06-23 513
一、passwd文件x:表示有密码用户id0：超级管理员，要想让某个用户像root一样，就需要改为0 1-499：伪用户 500以上：普通用户初始组（创建用户的时候就创建了一个和用户名一样的组名）id[跟group文件匹配] ，另有附加组的概念禁止某人登录，改为/sbin/nologin每个用户的邮箱：/var/spool/mail/user1每次加新用户时在其家目录下生成的文件：/etc/skel二、linux中错误处理1和2描述 设备文件名 描述符 ...
博客
Bourne和c shell
06-23 614
shell的两大分支：Bourne家族(.sh)和c shellbshell：bshell就是sh(unix) ksh bash等。linux中/etc/shells文件显示本机器支持的shell，如：执行shell脚本的方式：sh 绝对路径或相对路径或者 ./helo.sh注意点：记得脚本要赋予可执行权限...
博客
数据库表设计最佳实践
06-14 414
为了表良好的扩展性，设计数据库表的时候需要格外注意，基于多年经验，给出如下最佳的建表模板：CREATETABLE`user_info`(`id`bigint(24)NOTNULLAUTO_INCREMENTCOMMENT'标识',`name`varchar(50)DEFAULTNULLCOMMENT'用户名',--其他业务字段`gmt_created`datetimeNOTNULLDEFAULTCURRENT_TIMESTAM...
博客
mybatis中${value}的使用
06-12 1801
为什么要使用${value}？ 上篇文章介绍了mybatis的select标签，我们知道在mybatis中，查询语句可以写在select标签内部即可完成相应的查询工作，但是由于业务的复杂性，有时候难免要自己去拼接sql并执行，如果你使用了spring的话，你可能会想到使用jdbctemplate来执行自己的sql，但是这个时候有个问题，什么问题呢？理论上来说，JdbcTemplate应该这样使用：@RepositorypublicclassBackupDaoIm...
博客
selectKey
06-12 678
有时候我们新增一条数据之后，还需要获取到这条新增数据的主键，以便在其他业务中继续使用，当然拿mysql来举个例子，你可以在执行完插入之后，再去执行一下“SELECT LAST_INSERT_ID()”来获取刚才插入后的主键id，但是这样显得既麻烦又没有效率，用mybatis可以通过selectKey标签一次性完成这种需求。分两种情况的主键来说，一是自增主键，就是自增类型的int了，一是非自增的主键，比如使用uuid（mysql有 uuid()函数）。一、自增类型的主键：ma...
博客
Mybatis配置useGeneratedKeys 参数
06-12 839
Mybatis 配置文件 useGeneratedKeys 参数只针对 insert 语句生效，默认为 false。当设置为 true 时，表示如果插入的表以自增列为主键，则允许 JDBC 支持自动生成主键，并可将自动生成的主键返回。配置mybatis的配置文件，设置useGeneratedKeys属性值为true：<settings><settingname="useGeneratedKeys"value="true"/>&l...
博客
迁移html和css之四
05-13 396
五十一、display: flex;与justify-content实现均匀分布html： <divclass="box"> <section>条目1</section> <section>条目2</section> <section>条目3</section> </div>css:.box{ display:flex; justify-content:...
博客
js实现上下文菜单
05-13 401
上下文菜单在web开发中也叫作右键菜单，在web开发中比较常见。如果后台系统用的前端插件，比如easyui等，本身就附带了这种上下文控件，但是如果想要自己实现，该如何做呢？这里我分享一个给各位朋友，先看下最终的整体效果：这里面有两个要解决的问题：如何准确的获取鼠标右键点击的位置，并让原本隐藏的菜单在该位置显示出来。当页面高度很高，以至于在页面最右边出现滚动条的时候也要确保弹出菜单的位置是正确的。如何解决？我们来看，如果想要获取鼠标的点击位置，我们可以通过事件的pageX或者clientX，但
博客
迁移html和css之三
05-12 518
三十一、css代表着什么，css规则是什么意思？CSS（全拼是 Cascading Style Sheets，翻译过来就是"层叠样式表"的意思）控制 DOM 元素的视觉外观，css控制的是元素的样式，不然怎么叫样式表呢。下面就是一条简单的 CSS 样式：body{background-color:white;color:black;}css如何书写？CSS 样式由选择符和属性组成。选择符后面跟着属性，但被一对花括号所包围。属性和值由冒号分隔，每个属性声...
博客
迁移html和css之二
05-12 374
二十一、CSS3前缀 浏览器 厂商前缀 chrome、safari -webkit- opera -o- firfox -moz- internetexplorer -ms- 上标列出的是css前缀，为什么会有这些前缀呢？新的css属性发布还未纳入w3c标准之前如果各个厂商想使用，一般加..
博客
迁移html和css之一
05-12 544
一、html元素的理解html元素，也叫html标签，是用来改变网页结构的作用。也就是说“标记”的作用 ：就是通过给内容添加标签来创建元素的过程。html标签写法注意点：01.HTML 标签以 < 开头，以 > 结束，比如表示段落文本的 <p>。02.标签一般都成对出现，一个开始标签和一个结束标签就在文档中创建了一个元素。03.结束标签用一个斜杠表示元素的关闭或结束，比如 </p>。如...
博客
迁移其他jquery文章之二
05-12 346
十一、jquery动画show,slideUp,fadeIn,fadeTo等对比jquery的动画方法：1.显示与隐藏show([数值/预设],[fn])和hide([数值/预设],[fn])和toggle([数值/预设])，这些方法的实质其实就是设置display属性2.向上滑动与向下展开slideUp([数值/预设],[fn])和slideDown([数值/预设],[fn])和slideToggle([数值/预设])...
博客
bootstrap-datetimepicker使用
05-12 620
bootstrap-datetimepicker官方网址：http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm，上边有更详细的介绍，这里我举一个综合的例子，效果如下：使用的bootstrap是v3.3.5.<!doctypehtml><html><head><metacharset="utf-8"><title>bootstrap-datetimepicke..
博客
jquery ui 之datepicker的使用
05-12 2555
一、jquery插件机制介绍jquery插件机制的介绍jquery因为他的开源特性，大家都愿意聚集在它的周围，这也直接导致了jquery丰富的插件，据不完全统计，其插件个数已经超过千种，大致可以归为ui类（如jquery ui）、验证类（如表单验证插件jquery-validate.js）、特效类(如eayui等各种组件)、工具类(如json操作工具JSON2.js)等。jquery插件分为哪几种？一、自定义插件(可以提高系统的封装性)：基...
博客
easyui使用易错点
05-12 630
一、easyui报错:form[0].submit is not a function使用easyui提交表单的时候报错：easyui报错:form[0].submit is not a function。原因：easyui表单提交可以提交文件和普通字段，相当于jquery-from.js了，当然了，要想提交文件，设置form标签的enctype="multipart/form-data"是前提，但是使用easyui提交表单的时候却报了如上的错误，检查了该设置的都设置了，最后发现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值