day1.2.5.Ajax篇

最新推荐文章于 2023-11-20 21:35:13 发布

暮夏秋风

最新推荐文章于 2023-11-20 21:35:13 发布

阅读量87

点赞数

分类专栏：基地实训文章标签： ajax jsp web service

本文链接：https://blog.csdn.net/lcw19990424/article/details/108671602

版权

基地实训专栏收录该内容

19 篇文章 1 订阅

订阅专栏

文章目录

一种新型的发送请求的方式,能局部刷新数据。Ajax 即"Asynchronous Javascript And XML"（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

请求方式

同步请求

整体更新，返回整个页面，数据量大返回较慢。用户要等请求完毕才能对页面进行操作。

异步请求

局部更新，返回字符串或JSON,数据量小返回快。请求交给Ajax引擎处理，用户可以进行其他操作。

原理

在这里插入图片描述

应用：

输入框提示(如登录,注册,搜索)

如126邮箱:

在这里插入图片描述

百度搜索:

在这里插入图片描述

语法：

原生Ajax

(代码太复杂，一般不写)

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

jQuery框架简化

原生Ajax，代码量大，使用不方便，封装成函数，直接调用

在这里插入图片描述

$.get请求

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

$.post请求

类似于get请求

举例：

（1）在点击事件中调用get请求
（2）在服务端处理业务逻辑返回json或者字符串数据
（3）在回调函数中编写业务逻辑

<%-- （1）在点击事件中调用get请求 --%>
<script type="text/javascript">
    $(function () {
        $("#btn").click(
            $.get(
                "s2",
                "username=wzx&password=123",
                function (data) { //这个data就是服务器返回的字符串
                    //（3）处理数据
                },
                "text"
            );
            $.post(
                "s2",
                "username=wzx&password=123",
                function (data) { //这个data就是服务器返回的字符串  var data = []
                    //（3）处理数据
                },
                "json"
            );
            var url = "s2";
            var param = "username=lft&password=123";
            var func = function (data) {

            };
            var type = "json";
            $.post(url, param, func, type);
         )
    })
</script>
<%-- html --%>
 <button id="btn"></button>

//（2）在服务端处理业务逻辑返回json或者字符串数据
@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方式合成一种请求,type是get就调用get请求，post就调用post请求

（2）如何调用
$.ajax({键：值,键：值,键：值});

（3）举例

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

jquery3.0新特性ajax请求

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

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

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

注意

1，在使用了ajax作为请求方式的时候就不能再使用form表单的默认submit按钮

submit请求会关闭当前页面，并加载响应页面。

另外，如果我们给submit按钮绑定了ajax发送请求事件，那么，submit会默认向后台发送一次请求，然后ajax再向后台发送一次请求

2，使用ajax时，后台的请求转发和请求重定向不会被执行

因为ajax的出现就是为了防止发送请求后刷新整个页面的，请求转发和重定向会返回整个页面

暮夏秋风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day1.2.5.Ajax篇

文章目录Ajax入门请求方式同步请求异步请求原理应用：语法：原生AjaxjQuery框架简化$.get请求$.post请求$.ajax请求方式jquery3.0新特性ajax请求注意Ajax入门一种新型的发送请求的方式,能局部刷新数据。Ajax 即"Asynchronous Javascript And XML"（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。请求方式同步请求整体更新，返回整个页面，数据量大返回较慢。当前野米安要等请求完毕才能进行操作。异步请
复制链接

扫一扫