Java课题笔记~ Ajax

这篇具有很好参考价值的文章主要介绍了Java课题笔记~ Ajax。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.1 概述

AJAX (Asynchronous JavaScript And XML):异步的 JavaScript 和 XML。

我们先来说概念中的 JavaScriptXMLJavaScript 表明该技术和前端相关;XML 是指以此进行数据交换。

1.1.1 作用

AJAX 作用有以下两方面:

  1. 与服务器进行数据交换:通过AJAX可以给服务器发送请求,服务器将数据直接响应回给浏览器。

我们先来看之前做功能的流程,如下图:

Java课题笔记~ Ajax,Java,java,笔记,ajax

如上图,Servlet 调用完业务逻辑层后将数据存储到域对象中,然后跳转到指定的 jsp 页面,在页面上使用 EL表达式JSTL 标签库进行数据的展示。

而我们学习了AJAX 后,就可以使用AJAX和服务器进行通信,以达到使用 HTML+AJAX来替换JSP页面了。如下图,浏览器发送请求servlet,servlet 调用完业务逻辑层后将数据直接响应回给浏览器页面,页面使用 HTML 来进行数据展示。

Java课题笔记~ Ajax,Java,java,笔记,ajax

异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用校验,等等…

Java课题笔记~ Ajax,Java,java,笔记,ajax

 上图所示的效果我们经常见到,在我们输入一些关键字(例如 奥运)后就会在下面联想出相关的内容,而联想出来的这部分数据肯定是存储在百度的服务器上,而我们并没有看出页面重新刷新,这就是 更新局部页面 的效果。再如下图:

Java课题笔记~ Ajax,Java,java,笔记,ajax

我们在用户名的输入框输入用户名,当输入框一失去焦点,如果用户名已经被占用就会在下方展示提示的信息;在这整个过程中也没有页面的刷新,只是在局部展示出了提示信息,这就是 更新局部页面 的效果。

1.1.2 同步和异步

知道了局部刷新后,接下来我们再聊聊同步和异步:

  • 同步发送请求过程如下

Java课题笔记~ Ajax,Java,java,笔记,ajaxJava课题笔记~ Ajax,Java,java,笔记,ajax

浏览器页面在发送请求给服务器,在服务器处理请求的过程中,浏览器页面不能做其他的操作。只能等到服务器响应结束后才能,浏览器页面才能继续做其他的操作。

  • 异步发送请求过程如下

  • Java课题笔记~ Ajax,Java,java,笔记,ajax

 浏览器页面发送请求给服务器,在服务器处理请求的过程中,浏览器页面还可以做其他的操作。

1.2 快速入门

1.2.1 服务端实现

在项目的创建 com.ambow.controller ,并在该包下创建名为 AjaxController 的控制器类

@Controller
public class AjaxController {


    @RequestMapping("/testajax")
    @ResponseBody
    public String testAjax(){
        return "Hello Ajax";
    }
}

 

1.2.2 客户端实现

webapp 下创建名为 01-ajax-demo1.html 的页面,在该页面书写 ajax 代码

  • 创建核心对象,不同的浏览器创建的对象是不同的

 var xhttp;
if (window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();
} else {
    // code for IE6, IE5
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

发送请求

//建立连接
xhttp.open("GET", "http://localhost:8080/ajax-demo/testajax");
//发送请求
xhttp.send();

获取响应

xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        // 通过 this.responseText 可以获取到服务端响应的数据
        alert(this.responseText);
    }
};

完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    //1. 创建核心对象
    var xhttp;
    if (window.XMLHttpRequest) {
        xhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //2. 发送请求
    xhttp.open("GET", "http://localhost:8080/ajax-demo/testajax");
    xhttp.send();

    //3. 获取响应
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            alert(this.responseText);
        }
    };
</script>
</body>
</html>
1.2.3 测试

在浏览器地址栏输入 http://localhost:8080/ajax-demo/01-ajax-demo1.html ,在 01-ajax-demo1.html加载的时候就会发送 ajax 请求,效果如下

Java课题笔记~ Ajax,Java,java,笔记,ajax

我们可以通过 开发者模式 查看发送的 AJAX 请求。在浏览器上按 F12 快捷键  

Java课题笔记~ Ajax,Java,java,笔记,ajax

 这个是查看所有的请求,如果我们只是想看 异步请求的话,点击上图中 All 旁边的 XHR,会发现只展示 Type 是 xhr 的请求。如下图:

Java课题笔记~ Ajax,Java,java,笔记,ajax

 

1.3 案例

需求:在完成用户注册时,当用户名输入框失去焦点时,校验用户名是否在数据库已存在

Java课题笔记~ Ajax,Java,java,笔记,ajax

Java课题笔记~ Ajax,Java,java,笔记,ajax

 

 

1.3.1 分析
  • 前端完成的逻辑

    1. 给用户名输入框绑定光标失去焦点事件 onblur

    2. 发送 ajax请求,携带username参数

    3. 处理响应:是否显示提示信息

  • 后端完成的逻辑

    1. 接收用户名

    2. 调用service查询User。此案例是为了演示前后端异步交互,所以此处我们不做业务逻辑处理

    3. 返回标记

整体流程如下:

Java课题笔记~ Ajax,Java,java,笔记,ajax

 

1.3.2 后端实现

com.ambow.controller 包中的名为 AjaxController 的控制器类中,添加代码如下:

@RequestMapping(value = "/check")
@ResponseBody
public Object check(String username,String password){
    System.out.println(username);
    if ("admin".equals(username)){
        return "false";
    }
    return "true";
}

 

1.3.3 前端实现

写一个简单的注册页面。并在 register.html 页面的 body 结束标签前编写 script 标签,在该标签中实现如下逻辑

第一步:给用户名输入框绑定光标失去焦点事件 onblur

//1. 给用户名输入框绑定 失去焦点事件
document.getElementById("username").onblur = function () {
    
}

第二步:发送 ajax请求,携带username参数

第一步 绑定的匿名函数中书写发送 ajax 请求的代码

//2. 发送ajax请求
//2.1. 创建核心对象
var xhttp;
if (window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();
} else {
    // code for IE6, IE5
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.2. 发送请求
xhttp.open("GET", "http://localhost:8080/ajax-demo/check);
xhttp.send();

//2.3. 获取响应
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        //处理响应的结果
    }
};

而携带数据需要将 URL 修改为:

xhttp.open("GET", "http://localhost:8080/ajax-demo/selectUserServlet?username="+username);

第三步:处理响应:是否显示提示信息

this.readyState == 4 && this.status == 200 条件满足时,说明已经成功响应数据了。

此时需要判断响应的数据是否是 "false" 字符串,如果是说明用户名已经占用给出错误提示;如果不是说明用户名未被占用清除错误提示。代码如下

var resp = xmlhttp.responseText;
if (resp == "false"){
    document.getElementById("msg").innerHTML= "用户名已存在!";
}else {
    document.getElementById("msg").innerHTML= "";
}

综上所述,前端完成代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function checkUsername()
        {
            var xmlhttp;
            if (window.XMLHttpRequest)
            {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                // IE6, IE5 浏览器执行代码
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    var resp = xmlhttp.responseText;
                    if (resp == "false"){
                        document.getElementById("msg").innerHTML= "用户名已存在!";
                    }else {
                        document.getElementById("msg").innerHTML= "";
                    }

                }
            }
            var username = document.getElementById("username").value;
            xmlhttp.open("GET","check?username="+username,true);
            xmlhttp.send();
        }
    </script>
</head>
<body>
  <form action="register" method="get">
      <input type="text" id="username" name="username" onblur="checkUsername()" />
      <span id="msg" style="color: red"></span><br>
      <input type="password" name="password" /><br>
      <input type="submit" value="提交">
  </form>
</body>

 文章来源地址https://www.toymoban.com/news/detail-662899.html

到了这里,关于Java课题笔记~ Ajax的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Java后端开发——Ajax、jQuery和JSON

    Ajax全称是Asynchronous Javascript and XML,即异步的JavaScript和 XML。Ajax是一种Web应用技术,该技术是在JavaScript、DOM、服务器配合下,实现浏览器向服务器发送异步请求。 Ajax异步请求方式不向服务器发出请求,会得到数据后再更新页面(通过DOM操作修改页面内容),整个过程不会发

    2024年02月03日
    浏览(51)
  • 【Java Web】使用ajax在论坛中发布帖子

    AJAX 异步的JavaScript与XML,不是一门新技术,只是一个新术语; 使用AJAX,网页能增量更新在页面上,不需要刷新整个页面; JSON的使用比XML使用更加普遍; 示例 使用jQuery发送AJAX请求; 实践 采用AJAX请求,实现发布帖子功能。 1. DiscussPost类 2. mapper 3. Service 4. Controller 5. 前端jq

    2024年02月10日
    浏览(41)
  • BCSP-玄子Java开发之Java Web编程CH011_Ajax交互扩展

    $.ajax( )$.get() $.post() $.getJSON() .load() …… 常用参数 参数 类型 说明 url String 必选,发送请求的地址 data PlainObject 或 String 发送到服务器的数据 success Function(PlainObject result, String textStatus, jqXHR jqxhr) 请求成功后调用的函数参数result:可选,服务器返回的数据 dataType String 预期服务器

    2024年02月11日
    浏览(55)
  • Java课题笔记~ Axios

    Axios 对原生的AJAX进行封装,简化书写。 Axios官网是: https://www.axios-http.cn 2.1 基本使用 axios 使用是比较简单的,分为以下两步: 引入 axios 的 js 文件 使用axios 发送请求,并获取响应结果 发送 get 请求 发送 post 请求 axios() 是用来发送 异步请求 的,小括号中使用 js 对象传递请

    2024年02月12日
    浏览(32)
  • Java课题笔记~JSON

    3.1 概述 概念: JavaScript Object Notation 。JavaScript 对象表示法. 如下是 JavaScript 对象的定义格式: 接下来我们再看看 JSON 的格式: 通过上面 js 对象格式和 json 格式进行对比,发现两个格式特别像。 只不过 js 对象中的属性名可以使用引号(可以是单引号,也可以是双引号);而

    2024年02月12日
    浏览(32)
  • Java课题笔记~ ServletContext

    单个Servlet的配置对象  web.xml 获取单个Servlet的初始化参数

    2024年02月13日
    浏览(37)
  • Java课题笔记~ Servlet编程

    (1)什么是Servlet Servlet是基于Java语言的Web编程技术,部署在服务器端的Web容器里,获取客户端的访问请求,并根据请求生成响应信息返回给客户端。 创建Servlet的方式,有 如下图:一般创建Servlet都是通过继承HttpServlet来实现,如图中的HelloServlet。 (类图快捷键:Ctrl + Alt + U)

    2024年02月13日
    浏览(33)
  • Java课题笔记~ SpringBoot概述

    问题导入 学习了SpringBoot入门案例之后,感觉对比SpringMVC哪一个更加方便简洁? SpringBoot是由Pivotal团队提供的全新框架,其设计目的是用来 简化 Spring应用的 初始搭建 以及 开发过程 Spring程序缺点 配置繁琐 依赖设置繁琐 SpringBoot程序优点 自动配置 起步依赖(简化依赖配置)

    2024年02月11日
    浏览(40)
  • Java课题笔记~Maven基础

    下载安装 配置:修改安装目录/conf/settings.xml 本地仓库:存放的是下载的jar包 中央仓库:要从哪个网站去下载jar包 - 阿里云的仓库        

    2024年02月14日
    浏览(34)
  • Java课题笔记~ Fastjson 概述

    3.3 JSON串和Java对象的相互转换 学习完 json 后,接下来聊聊 json 的作用。 以后我们会以 json 格式的数据进行前后端交互。前端发送请求时,如果是复杂的数据就会以 json 提交给后端;而后端如果需要响应一些复杂的数据时,也需要以 json 格式将数据响应回给浏览器。 在后端我

    2024年02月12日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包