关于JAVAweb开发中Ajax教程

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

一、Ajax是什么？

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

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

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

二、为什么要使用它

  1. 通过异步模式，提升了用户体验
  2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
  3. 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脚本标签

java里的ajax是什么意思 java ajax_web

4.创建一个severlet用于响应Ajax请求，名字叫(AjaxServlet)

java里的ajax是什么意思 java ajax_服务器_02

五、效果展示

java里的ajax是什么意思 java ajax_服务器_03


我们看看浏览器控制台打印的内容

java里的ajax是什么意思 java ajax_web_04


再看看编译器控制台

java里的ajax是什么意思 java ajax_数据_05

六、代码区可复制

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只是一门技术并不是语言，所以熟能生巧，各位可以照着我上面举的例子进行举一反三！