JavaWeb之ajax

ajax

同步请求和异步请求

  • 同步请求 服务器响应时,整个页面刷新
  • 异步请求 服务器响应时,局部页面刷新
    在这里插入图片描述

ajax

什么是ajax

是指一种创建交互式网页应用的网页开发技术

ajax有什么用

ajax专门用于浏览器与服务器的异步请求的机制

ajax原生请求代码

<!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>

jQuery中的ajax

$.get()

$.get(url,[data],[callback],[type])

	$.get(
              "s1",
              "username=jack",
              function(data){
                  //处理返回数据
              },
              "text"
          );

$.post()

$.post(url,[data],[callback],[type])

	$.post(
              "s1",
              "username=jack",
              function(data){
                  //处理返回数据
              },
              "json"
          );

$.ajax()

$.ajax(url,[setting])

	 $.ajax({
                url:"s1",
                async:true,
                data:"username="+$("#username").val(),
                type:"post",
                dataType:"json",
                success:function(data){
                   var $show = $("#show_msg");
                    $show.text(data.msg)
                   if (data.code == 1){
                       $show.css("color","red")
                   }else{
                       $show.css("color","green")
                   }
                },
                error:function(){
                    alert("服务器发生错误")
                }
            });

jQuery3.0新特性ajax请求

  • 什么是jQuery3.0新特性GET/POST请求
	$.get({:,:});
	$.post({:,:});
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页