Day10JavaWeb【Jquery进阶】Ajax***

最新推荐文章于 2024-03-13 07:00:00 发布

翁老师的教学团队

最新推荐文章于 2024-03-13 07:00:00 发布

阅读量1.8k

点赞数 7

文章标签： ajax java js javascript

本文链接：https://blog.csdn.net/u013621398/article/details/108659903

版权

2022就业班专栏收录该内容

208 篇文章 5 订阅

订阅专栏

学习目标

如果提交表单给服务器，当服务器处理完成之后，响应给浏览器，你发现浏览器显示页面时，闪烁了一下。
这种方式不是异步提交，而是同步提交，该闪烁是页面整体刷新了。

1.能够理解异步的概念
2.能够了解原生js的ajax
3.能够使用jQuery的$.get()进行访问
4.能够使用jQuery的$.post()进行访问
5.能够使用jQuery的$.ajax()进行访问
6.能够使用jQuery3.0的$.get()新增签名进行访问
7.能够使用jQuery3.0的$.post()新增签名进行访问
8.能够掌握json的三种数据格式
9.能够使用json转换工具Jackson进行json格式字符串的转换
10.能够完成用户名是否存在的查重案例
11.能够完成自动补全的案例

同步请求与异步请求

（1）浏览器和服务器之间数据传输方式
1:同步方式
2:异步方式
在这里插入图片描述

（2）两种方式有什么不同？
同步请求，服务器响应时，页面整体刷新(响应了整个页面）
异步请求，服务器响应时，页面局部刷新(响应了字符串或者json)
（3）异步请求有什么优点？
异步请求可以提高用户的体验性
（4）异步请求应用场景有哪些？
a:用户名检测
b:搜索的自动补全
c:页面的局部刷新

原生的ajax编程(了解)

(1)传统的程序运行原理
用户发送请求，服务器接受请求，处理后返回数据，浏览器接受响应数据，进行显示数据，这个时间就会有处理和接受之间的空闲，导致用户的等待时间
(2) Aajx的程序运行原理是：用户发送请求，到Ajax引擎处理后，发送给服务器接受请求，处理后返回数据Ajax，浏览器接受响应数据，进行显示数据，在者期间浏览器可以一直和Ajax进行交流，减少处理时间

web\0-base-ajax-index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
//            原生的ajax开发:
//            1）创建Ajax引擎对象
//            2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
//            3）绑定提交地址
//            4）发送请求
//            5）接受响应数据
//
        function  clickFn() {
            //1）创建Ajax引擎对象
           var xmlHttp = new XMLHttpRequest();
           //2)为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
            xmlHttp.onreadystatechange = function (ev) {
                //如果state值是4，说明收到响应数据
                //如果状态码是200.说明服务器正常响应
                if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
                   // 5）接受响应数据
                    //获取响应数据
                    alert(xmlHttp.responseText); //response.getWriter().write("hello")
                }
            }
            //3）绑定提交地址
            //参1：表示请求方式
            // 参2：表示服务器的资源访问路径，不用加项目名,
            // 参3：表示是否异步，true是异步

            xmlHttp.open("get","s1",true);
            //4)发送请求
            xmlHttp.send();
        }

    </script>

</head>
<body>
    <!--设计一个按钮，一点击这个按钮，就向服务器发出异步请求-->
    <input type="button" value="点我，发出异步请求" onclick="clickFn()"/>
</body>
</html>

src\com\wzx\pack01_ajax\BaseAjaxServlet.java

@WebServlet("/s1")
public class BaseAjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //响应给浏览器
        System.out.println("s1 doGet");
        //响应
        response.getWriter().println("hello");
    }
}

jQuery框架的ajax简介

（1）原生Ajax编程为什么不用？
代码量大，使用不方便，封装成函数，直接调用
（2)jQuery框架的ajax函数

$.get请求-原理

（1）get函数
$.get(url, [data], [callback], [type])
url:表示服务器的访问路径,如:“s1”
data:表示向服务器发送的参数, 格式: 1: "username=wzx&password=123"2:json串
callback：匿名函数，表示接收服务器发送过来的响应，这个函数自动执行
type :表示浏览器期望服务器发送过来的数据类型，格式："text" "json"
（2）get请求原理

 $.get(
	     "s2",
         "username=wzx&password=123",
		 function(data){ //这个data就是服务器返回的字符串
			//处理数据
		 },
		 "text"
	 ); 
	 $.post(
	     "s2",
         "username=wzx&password=123",
		 function(data){ //这个data就是服务器返回的字符串  var data = []
			//处理数据
		 },
		 "json"
	 );

	var url = "s2";
	var param =  "username=lft&password=123";
    var func = function(data){
	 
	};
	var type = "json";
	$.post(url,param,func,type);

$.get请求-代码实现

（1）在点击事件中调用get请求
（2）在服务端返回json或者字符串数据
（3）在回调函数中编写业务逻辑
web\1-juqery-get_post_index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>

    <script type="text/javascript">
        function clickFn() {
            //向服务器发送异步请求
            $.post(
                "s2",
                "username=宝强x&password=123",
                function (data) {
                    alert(data);
                },
                "text"
            );
        }
    </script>


</head>
<body>
    <!--设计一个按钮，一点击这个按钮，就向服务器发出异步请求-->
    <input type="button" value="点我，发出jquery$.get异步请求" onclick="clickFn()"/>
</body>
</html>

src\com\wzx\pack02_jquery_ajax\Demo2Servlet.java

@WebServlet(name = "Demo2Servlet",urlPatterns = "/s2")
public class Demo2Servlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
         //解决请求乱码
        request.setCharacterEncoding("UTF-8");
           //1:接收参数
        String username = request.getParameter("username");
        String password = request.getParameter("password");

        System.out.println("username:"+username);
        System.out.println("password:"+password);
//        System.out.println(1/0);
        //解决响应乱码
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().write("你好  ajax!");
    }
}

$.ajax请求方式***

（1）什么是$.ajax请求方式
这种方式是将$.get和$.post方式合成一种请求
（2）如何调用
$.ajax({键：值,键：值,键：值});
web\2-jquery-ajax-index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>

    <script type="text/javascript">
        function clickFn() {
          $.ajax({
              url:"s2",
              async:true,
              data:"username=bingbing&password=456",
              type:"post",
              dataType:"text",
              success:function (data) {
                  alert(data)
              },
              error:function () {
                    alert("服务器发生了错误")
              }
          });
        }
    </script>


</head>
<body>
    <!--设计一个按钮，一点击这个按钮，就向服务器发出异步请求-->
    <input type="button" value="点我，发出ajax异步请求" onclick="clickFn()"/>
</body>
</html>

以上调用$.ajax的函数代码最好是复制过来，因为方法内的键不能随意修改，保能修改值
type 如果是get 表示get请求，反之就是post请求

jquery3.0新特性ajax请求

（1）什么是juqery3.0新特性GET/POST请求

 $.get({键：值,键：值});
$.post({键：值,键：值});

因为方法指定get与post，所以要比$.ajax少一个键,type:post或者type:get，其他都一样。
企业中一般还是使用1.x

翁老师的教学团队

关注

7
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Day10JavaWeb【Jquery进阶】Ajax***

学习目标如果提交表单给服务器，当服务器处理完成之后，响应给浏览器，你发现浏览器显示页面时，闪烁了一下。这种方式不是异步提交，而是同步提交，该闪烁是页面整体刷新了。1.能够理解异步的概念2.能够了解原生js的ajax3.能够使用jQuery的$.get()进行访问4.能够使用jQuery的$.post()进行访问5.能够使用jQuery的$.ajax()进行访问6.能够使用jQuery3.0的$.get()新增签名进行访问7.能够使用jQuery3.0的$.post()新增签名进行访问8
复制链接

扫一扫