Ajax动态显示时间

心凡138

已于 2023-12-15 10:42:09 修改

阅读量169

点赞数 4

文章标签： ajax 前端 javascript tomcat java ecmascript

于 2023-12-15 10:41:16 首次发布

本文链接：https://blog.csdn.net/weixin_73509711/article/details/135010418

版权

这里要使用JQuery来封装Ajax

一、jQuery概述

jQuery是一个快速、简洁的JavaScript代码库。jQuery设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript操作方式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

二、jQuery特点

具有独特的链式语法。
支持高效灵活的CSS选择器。
拥有丰富的插件。
兼容各种主流浏览器

三、jQuery实现Ajax

1：

JQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(), 第三层是 $.getScript() 和 $.getJSON()。

2：

load方法：（传递方式: load() 方法的传递参数根据参数 data 来自动自定. 如果没有参数传递, 采用 GET 方式传递, 否则采用 POST 方式）

load(url,[data],[callback]);

* url:请求的服务器的资源地址

* data:向服务器端发送数据，JSON串格式.如果有此参数，就以POST方式提交数据，没有就是get方式提交数据

* callback:function(data,textStatus,xhr){}

data:服务器端返回的数据

textStatus:状态。succuss, error, notmodify, timeout

xhr：XmlHttpRequest对象本身

3、引入jQuery库

四、示例

index2.jsp文件：

<html>
  <head>
    <title>$Title$</title>
    <script src="js/jquery-1.4.2.min.js"></script>
  </head>
  <body>

  <a href="#" onclick="time()">ajax</a>
  <div id="div1" style="border: 1px royalblue solid;width: 200px;height: 200px;"></div>

  </body>
  <script type="text/javascript">
    function fun1() {
        $("#div1").load("AjaxController2",function(date,texStatus,xhr){
            $("#div1").innerHTML=date;
        });
    }
    function time() {
        window.setInterval("fun1()",1000)
    }
  </script>
</html>

AjaxController层：

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.text.SimpleDateFormat;
import java.util.Date;

@WebServlet("/AjaxController2")
public class AjaxController2 extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        req.setCharacterEncoding("utf-8");
        Date date = new Date();
        SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        String formatData = format.format(date);
        resp.getWriter().print(formatData);
      

    }

}