Ajax技术

最新推荐文章于 2024-07-25 13:40:37 发布

牧马人-

最新推荐文章于 2024-07-25 13:40:37 发布

阅读量68

点赞数

文章标签： java Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_43473236/article/details/129023119

版权

同步和异步的区别

Ajax：Asynchronous JavaScript and xml （json）

异步的js和xml，js中的异步方法

Asynchronous：异步的，同时可以有多个线程执行，效率高，不安全

Synchronized：同步的，同时只有一个线程能被执行，效率低，安全

什么是Ajax

Ajax 即Asynchronous Javascript And XML（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

Ajax的优点和缺点

优点：

1.最大的优点就是页面局部刷新，在页面内与服务器通信，非常好的用户体验。

2.使用异步的方式与服务器通信，不需要中断操作。

3.可以把以前服务器负担的工作转嫁给客户端，减轻服务器和带宽，可以最大程度减少冗余请求。

缺点：

1.AJAX干掉了Back和History功能，即对浏览器机制的破坏。在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。

2.ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。

3.对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。

Ajax第一例之发送GET请求

使用ajax GET请求完成输入完用户名后离开输入框，校验用户名是否存在

创建login.jsp登录页面原生的Ajaxget请求。

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/2/25
  Time: 18:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="jquery-1.7.2.js"></script>
</head>
<form action="AjaxGetServlet" method="post" onsubmit="return $('#sp').html()=='ok'">
   名字： <input type="text" name="username" id="username"><span id="sp"></span><br>
   密码： <input type="password" name="password" ><br>
<input type="submit" value="提交">
</form>
<body>
<script>
$("#username").blur(function () {
//   获取输入框的值
    var un=$(this).val();
 1.创建ajax的对象，创建一个http的请求对象
          var ajax=new XMLHttpRequest();
//    打开链接
    //            请求方式      url
        ajax.open("get","/AjaxGetServlet?un="+un);
//    发送请求
        ajax.send(null);
//    监听  看ajax的状态是否发生改变
        ajax.onreadystatechange=function (ev) {
if (ajax.readyState==4){
$("#sp").html(ajax.responseText);
            }
        }

    })
</script>
</body>
</html>

java后台代码

package servlet;

import pojo.User;
import service.UserService;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

@WebServlet("/AjaxGetServlet")
public class AjaxGetServlet extends HttpServlet {
@Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       resp.setContentType("text/html;charset=UTF-8");
        String un = req.getParameter("un");
     if (un.length()==0){
            resp.getWriter().write("不能为空");
            return;
        }
        UserService service=new UserService();
        List<User> userList = service.showAll();
       for (User user : userList) {
      if (user.getName().equals(un)){
          resp.getWriter().write("名字重复");
               return;
            }
        }
        resp.getWriter().write("ok");
    }
}

Ajax第一例小结

1. 原生Ajax操作步骤：
    - 创建XMLHttpRequest对象；
    - 调用open()方法打开与服务器的连接；
    - 调用send()方法发送请求；
    - 为XMLHttpRequest对象指定onreadystatechange事件函数，这个函数会在XMLHttpRequest的1、2、3、4，四种状态时被调用；
2. XMLHttpRequest对象的5种状态：
    - 0：初始化未完成状态，只是创建了XMLHttpRequest对象，还未调用open()方法；
    - 1：请求已开始，open()方法已调用，但还没调用send()方法；
    - 2：请求发送完成状态，send()方法已调用；
    - 3：开始读取服务器响应；
    - 4：读取服务器响应结束。
通常我们只关心4状态。

Ajax之Jquery的实现方式

$.get方式

语法：$.get(url, [data], [callback], [type])
参数：
    url：请求路径
    data：请求参数
    callback：回调函数
    type：响应结果的类型

$.post方式

 语法：$.post(url, [data], [callback], [type])
 参数：
     url：请求路径
     data：请求参数
     callback：回调函数
     type：响应结果的类型

$.ajax方式

语法：$.ajax({键值对});
 可选字段：
    1）url：链接地址，字符串表示
    2）data：需发送到服务器的数据，GET与POST都可以，格式为{A: '...', B: '...'}
    3）type："POST" 或 "GET"，请求类型
    4）contentType：内容类型，默认为"application/x-www-form-urlencoded"
    5）dataType：服务器响应的数据类型，字符串表示；当填写为json时，回调函数中无需再对数据反序列化为json
    6）success：请求成功后，服务器回调的函数
    7）error：请求失败后，服务器回调的函数
8）async：是否异步处理，bool表示，默认为true；设置该值为false后，JS不会向下执行，而是原地等待服务器返回数据，并完成相应的回调函数后，再向下执行

定义jquery_ajax.jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>使用jQuery发送ajax请求</title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        //页面加载完成后执行的事件
        $(function () {
            //为用户名输入框绑定失去焦点事件
            $("#username").blur(function() {
                // 当用户输入完成账号之后，我就进行账号的验证操作
                var username = $("#username").val();
                //$.get发GET请求
                /*$.get("/day11/user?method=findByUsername&username="+username,
                    // 调用服务端成功后的回调函数
                    function(data){
                        // 完成了响应了，获取响应结果
                        $("#spanText").text(data);
                    }
                );*/
                //$.post发POST请求
                /*$.post("/day11/user",{"method":"findByUsername","username":username},
                    // 调用服务端成功后的回调函数
                    function(data){
                        // 完成了响应了，获取响应结果
                        $("#spanText").text(data);
                    }
                );*/
                //$.ajax发ajax请求
                $.ajax({
                    url:"/day11/user",
                    data:{"method":"findByUsername","username":username},
                    type:"POST",
                    dataType:"text",
                // 调用服务端成功后的回调函数
                    success: function(data){
                                // 完成了响应了，获取响应结果
                                $("#spanText").text(data);
                            }
                });
            });
        });
    </script>
</head>
<body>
    <form action="${pageContext.request.contextPath}/login" method="post">
        账号：<input type="text" name="username" id="username"><span style="color:red;" id="spanText"></span><br>
        密码：<input type="password" name="password"><br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

牧马人-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax技术

ML（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。1.最大的优点就是页面局部刷新，在页面内与服务器通信，非常好的用户体验。异步的js和xml，js中的异步方法。
复制链接

扫一扫