JAVAweb开发中Ajax教程

最新推荐文章于 2022-11-28 10:44:31 发布

Fixiaobai

最新推荐文章于 2022-11-28 10:44:31 发布

阅读量1.2k

点赞数 2

分类专栏：笔记文章标签： ajax web

本文链接：https://blog.csdn.net/Fixiaobai/article/details/109642105

版权

笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

关于JAVAweb开发中Ajax教程

大家好，我是小白！已经很久没向大家分享我的学习内容，这次呢我讲给大家带来Ajax的教程。希望能给大家带来帮助，同时也巩固一下自己的学习！

一、Ajax是什么？

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

二、为什么要使用它

通过异步模式，提升了用户体验
优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。
4.Ajax可以实现动态不刷新（局部刷新），
就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。

三、需要什么来用它

因为他并不是一门新的语言，而是一门技术。所以我们将在实际操作进行演示，怎么去用它。因为原生Ajax较为复杂，这里我们选用jQuery(jQuery 是一个 JavaScript 库)，jQuery 库拥有完整的 Ajax 兼容套件。
大家可以选择官网下载，也可以CDN引入。
这里我给大家提供本地文件下载
链接：https://pan.baidu.com/s/1zMdRq-rQ-MLGTMHdKbXeIQ
提取码：ldp7

四、开始操作

1.我们先创建一个jsp页面叫做（AjaxTest）
2.然后创建一个文本框和按钮
3.再引入Jquery库以及创建Script脚本标签
在这里插入图片描述

4.创建一个severlet用于响应Ajax请求，名字叫(AjaxServlet)
在这里插入图片描述

五、效果展示

在这里插入图片描述
我们看看浏览器控制台打印的内容

再看看编译器控制台

六、代码区可复制

jsp页面代码：
下面展示一些 内联代码片。

<body>
<div class="All">
    <input type="text" id="word">
    <input type="button" id="btn" value="确定">
</div>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
    $('#btn').click(function () {
        var name=$('#word').val();//获取文本框值
        $.ajax({
            url:"/AjaxServlet",//这里写Severlet的路径
            type:"post",//请求方法
            data:{"name":name},//亲求数据
            dataType:"json",//请求格式
            success:function (strs) {//请求成功后可在这里进行Dom操作或者数据处理
                console.log(strs);//将请求后得到的数据打印出来
            }
        });
    });
</script>

sevlet代码：

            request.setCharacterEncoding("UTF-8");//截取字码，防止乱码
            String name=request.getParameter("name");//这里的name是刚才Ajax传过来的值的键,格式有些像JAVA的map集合
            System.out.println(name);//打印Ajax传过来的值
            response.setContentType("text/html;charset=UTF-8");//设置字码，防止乱码
            String n="张三";//声明一个字符串
            response.getWriter().write(n);//将字符串响应数据给Ajax请求

总结

在写Ajax一定注意给它的路径一定要正确，不然就会报404的错误，Ajax只是一门技术并不是语言，所以熟能生巧，各位可以照着我上面举的例子进行举一反三！

大家共同进步

Fixiaobai

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
JAVAweb开发中Ajax教程

关于JAVAweb开发中Ajax教程大家好，我是小白！已经很久没向大家分享我的学习内容，这次呢我讲给大家带来Ajax的教程。希望能给大家带来帮助，同时也巩固一下自己的学习！一、Ajax是什么？AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。二、为什么要使用它通过异步模式，提升了用户体
复制链接

扫一扫

专栏目录