Ajax基础 (五)

最新推荐文章于 2024-07-25 10:06:21 发布
最新推荐文章于 2024-07-25 10:06:21 发布
阅读量235 收藏
点赞数
分类专栏： Ajax 文章标签： ajax function servlet xmlhttprequest import table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/caoxianlong/article/details/4222387
版权

Ajax应用

4.4 创建自动刷新页面

注意的function----setTimeout()；

Web端：

<html>
  <head>
    <title>Ajax Dynamic Update</title>
    <script type="text/javascript">
        var xmlHttp;

        function createXMLHttpRequest() {
            if (window.ActiveXObject) {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else if (window.XMLHttpRequest) {
                xmlHttp = new XMLHttpRequest();               
            }
        }
       
        function doStart() {
            createXMLHttpRequest();
            var url = "DynamicUpdateServlet?task=reset";
            xmlHttp.open("GET", url, true);
            xmlHttp.onreadystatechange = startCallback;
            xmlHttp.send(null);
        }

        function startCallback() {
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200) {                   
                    setTimeout("pollServer()", 5000);
                    refreshTime();
                }
            }
        }
       
        function pollServer() {
            createXMLHttpRequest();
            var url = "DynamicUpdateServlet?task=foo";
            xmlHttp.open("GET", url, true);
            xmlHttp.onreadystatechange = pollCallback;
            xmlHttp.send(null);
        }
       
        function refreshTime(){
            var time_span = document.getElementById("time");
            var time_val = time_span.innerHTML;

            var int_val = parseInt(time_val);
            var new_int_val = int_val - 1;
           
            if (new_int_val > -1) {
                setTimeout("refreshTime()", 1000);
                time_span.innerHTML = new_int_val;               
            } else {
                time_span.innerHTML = 5;
            }
        }
       
        function pollCallback() {
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200) {               
                    var message = xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;                   
                   
                    if (message != "done") {
                        var new_row = createRow(message);
                        var table = document.getElementById("dynamicUpdateArea");
                        var table_body = table.getElementsByTagName("tbody").item(0);
                        var first_row = table_body.getElementsByTagName("tr").item(1);
                        table_body.insertBefore(new_row, first_row);                       
                        setTimeout("pollServer()", 5000);
                        refreshTime();
                    }
                }
            }
        }
       
        function createRow(message) {
            var row = document.createElement("tr");
            var cell = document.createElement("td");
            var cell_data = document.createTextNode(message);
            cell.appendChild(cell_data);
            row.appendChild(cell);
            return row;
        }
    </script>
  </head>
  <body>
    <h1>Ajax Dynamic Update Example</h1>
    This page will automatically update itself:
        <input type="button" value="Launch" id="go" οnclick="doStart();"/>
    <p>
    Page will refresh in <span id="time">5</span> seconds.
    <p>
    <table id="dynamicUpdateArea" align="left">
        <tbody>
            <tr id="row0"><td></td></tr>
        </tbody>
    </table>
  </body>
</html>

Server端：

package ajaxbook.chap4;

import java.io.*;
import java.net.*;

import javax.servlet.*;
import javax.servlet.http.*;

/**
 *
 * @author nate
 * @version
 */
public class DynamicUpdateServlet extends HttpServlet {
    private int counter = 1;
   
    /** Handles the HTTP <code>GET</code> method.
     * @param request servlet request
     * @param response servlet response
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        String res = "";
        String task = request.getParameter("task");
        String message = "";       
       
        if (task.equals("reset")) {
            counter = 1;
        } else {
            switch (counter) {
                case 1: message = "Steve walks on stage"; break;
                case 2: message = "iPods rock"; break;
                case 3: message = "Steve says Macs rule"; break;
                case 4: message = "Change is coming"; break;
                case 5: message = "Yes, OS X runs on Intel - has for years"; break;
                case 6: message = "Macs will soon have Intel chips"; break;
                case 7: message = "done"; break;
            }
            counter++;
        }

        res = "<message>" + message + "</message>";
       
        PrintWriter out = response.getWriter();
        response.setContentType("text/xml");
        response.setHeader("Cache-Control", "no-cache");
        out.println("<response>");
        out.println(res);
        out.println("</response>");
        out.close();
    }
   
    /** Handles the HTTP <code>POST</code> method.
     * @param request servlet request
     * @param response servlet response
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        doGet(request, response);
    }
   

    /** Returns a short description of the servlet.
     */
    public String getServletInfo() {
        return "Short description";
    }
}

湖底冰火
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端AJAX基础
qq_45149045的博客
11-23 1456
AJAX Ajax的概念： Ajax用来实现客户端网页请求服务器的数据，当用户有操作时可以实时更新部分模块或者整个网页 axios基本语法： 模板： axios({ method: '', url: '', }).then((result) => { //.then 用来指定请求成功之后的回调函数 // 形参中的result是请求成功之后的结果 })； then方法（或回调函数）负责接受发过来的数据 属性区分大小
ajax基础
sandy_star
07-18 840
Ajax基础 一、什么是ajax？ 简单来说，ajax相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部刷新页面数据，从而提高用户体验。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yZJSkcRh-1595061406434)(C:\Users\sandy燕\AppData\Roaming\Typora\typora-user-images\image-20200718113314646.png)] 二、ajax的实现步骤 1.创建ajax对
Ajax基础
qq_50352386的博客
02-07 922
1，Ajax介绍 1.1 什么是Ajax AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。它是一套综合了多项技术的浏览器端网页开发技术。这些技术包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.通过在浏览器与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 1.2 Ajax优...
AJAX技术基础介绍
10-30
#### 五、AJAX开发的最佳实践 为了充分利用AJAX技术，开发者需要注意以下几点： - **优化用户体验**：确保AJAX应用能够快速响应用户操作，并提供良好的反馈机制。 - **错误处理**：实施健壮的错误处理机制，以应对...
ajax基础教程
01-20
### 五、现代Web中的Ajax 随着Fetch API和Promise的出现，现在使用Ajax更加简洁。Fetch API提供了更现代、更易用的接口，Promise解决了异步操作的复杂性问题。此外，库和框架如jQuery、axios和Vue.js等也提供了更高...
Ajax基础.md
07-15
### Ajax基础知识概览 #### 一、Ajax简介 Ajax（Asynchronous JavaScript and XML，异步JavaScript和XML）是一种创建交互式网页应用的技术组合。通过在后台与服务器进行少量数据交换，Ajax可以实现网页的部分更新...
ajax 入门基础之 XMLHttpRequest对象总结
10-29
**Ajax入门基础之XMLHttpRequest对象总结** Ajax，即异步JavaScript和XML，是一种在无需刷新整个页面的情况下更新部分网页的技术。在Ajax的核心中，XMLHttpRequest（XHR）对象扮演着至关重要的角色，它允许...
AjaX 数据爬取
qq_39217312的博客
07-25 1160
Ajax 全称： Asynchronous JavaScript and XML , 即异步的 JavaScript 和 XML， 它不是一门编程语言，而是利用 JavaScript 在保证页面不被刷新，页面链接不改变的情况下与服务器交换数据，并更新部分网页内容的技术对于传统网页，如果想要更新内容，就必须刷新整个页面， 但有了 Ajax ，可以在页面不被全部刷新的情况下更新。这个过程实际是页面在后台与服务器进行了数据交互，获取数据后，在利用 JavaScript 改变网页，这样网页内容就会更新了。
JNDIExploit使用
07-29
一款用于 JNDI注入利用的工具，大量参考/引用了 Rogue JNDI项目的代码，支持直接植入内存shell，并集成了常见的bypass 高版本JDK的方式，适用于与自动化工具配合使用。 使用说明 使用 java -jar JNDIExploit.jar -h查看参数说明，其中 --ip参数为必选参数 Usage: java -jar JNDIExploit.jar [options] Options: * -i, --ip Local ip address -l, --ldapPort Ldap bind port (default: 1389) -p, --httpPort Http bind port (default: 8080) -u, --usage Show usage (default: false) -h, --help Show this help Dockerfile git clone https://github.com/feihong-cs/JNDIExploit.git cd ./JN
基于MATLAB的人体行为识别.zip
最新发布
07-29
在MATLAB中，可以使用机器学习和计算机视觉技术来实现人体行为识别。下面是一个基本的人体行为识别过程的程序： 1. 数据收集和准备： - 收集包含不同人体行为的视频数据。 - 使用视频处理技术提取每个视频中的人体姿势和关键点信息。 2. 特征提取： - 使用计算机视觉技术，如OpenPose或者其他姿势估计算法，提取每个视频中的人体关键点位置。 - 根据关键点位置计算特征向量，例如关节角度、运动速度等。 3. 数据标记和标签： - 根据人体行为类型，对收集的数据进行标记和分类，例如步行、跑步、打球等。 - 为每个人体行为类型分配一个标签。 4. 训练模型： - 使用机器学习算法，如支持向量机（SVM）、决策树、深度神经网络等，对标记和分类的数据进行训练。 - 使用训练数据和标签训练模型，以学习不同行为类型之间的关系。 5. 测试和识别： - 使用训练好的模型对新的测试数据进行预测和识别。 - 输入测试数据的特征向量到训练好的模型中，根据模型的输出来确定人体行为类型。 6. 评估和改进： - 根据测试结果评估
【创新未发表】Matlab实现蝗虫优化算法GOA-Kmean-Transformer-BiLSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【SCI一区】Matlab实现向量加权平均算法INFO-CNN-LSTM-Attention的风电功率预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
5份个人单页简历素材-清新单页.zip
07-29
【简历模板】工作总结、商业计划书、述职报告、读书分享、家长会、主题班会、端午节、期末、夏至、中国风、卡通、小清新、岗位竞聘、公司介绍、读书分享、安全教育、文明礼仪、儿童故事、绘本、防溺水、夏季安全、科技风、商务、炫酷、企业培训、自我介绍、产品介绍、师德师风、班主任培训、神话故事、巴黎奥运会、世界献血者日、防范非法集资、3D快闪、毛玻璃、人工智能等等各种样式的ppt素材风格。 设计模板、图片素材、PPT模板、视频素材、办公文档、小报模板、表格模板、音效配乐、字体库。 广告设计：海报，易拉宝，展板，宣传单，宣传栏，画册，邀请函，优惠券，贺卡，文化墙，标语，制度，名片，舞台背景，广告牌，证书，明信片，菜单，折页，封面，节目单，门头，美陈，拱门，展架等。 电商设计：主图，直通车，详情页，PC端首页，移动端首页，钻展，优惠券，促销标签，店招，店铺公告等。 图片素材：PNG素材，背景素材，矢量素材，插画，元素，艺术字，UI设计等。 视频素材：AE模板，会声会影，PR模板，视频背景，实拍短片，音效配乐。 办公文档：工作汇报，毕业答辩，企业介绍，总结计划，教学课件，求职简历等PPT/WORD模板。
【创新未发表】Matlab实现星雀优化算法NOA-Kmean-Transformer-BiLSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
和语音活动检测相关的数据集
07-29
语音活动检测数据集 数据说明： 语音活动检测任务可以区分出现人类语音和其他类型声音(如沉默和声)的信号段。 它是许多语音/音频应用的起点，包括语音编码，语音识别和语音增强。 由于这类任务没有特定的公共数据集，所以该数据集是从三个不同的数据库收集的719个音频。包括： ·TIMIT:是一个读语音语资料库，旨在为声学和语音研究提供语音数据，并评估自动语音识别系统。 · PTDB-TUG:是一个用于音高跟踪的语音数据库，提供20个讲英语者的麦克风信号。 ·Noizeus:包含30个句子的语音数据。噪音信号被人为添加到语音信号中，特别是该数据库包含被胡言乱语(人群)、街道、火车、火车站、汽车和餐馆噪音破坏的音频，SNR为5分贝，以及原始噪音。
刚体不稳定自由旋转的简单MATLAB仿真-SpinSpin-四元数- v2-MATLAB
07-29
旋转物体运动学是基于“标量第一单位四元数”的。 项目“SpinSpin_Quaternion_v1”与此项目类似。 项目“SpinSpin_RotationVector”与此项目类似，但基于“RotationVector”。 标量第一单位四元数定义： 标量第一单位四元数是长度为4的一维行或列向量。 使用Matlab的“ode45”函数求解常微分方程（ODE），应用Dorman-Prince 4（5）显式嵌入式自适应时间步长龙格-库塔方法。 Matlab“ode45”函数中的误差限制设置为10-13。
AI绘画介绍及应用场景.pdf
07-29
AI绘画的应用场景非常广泛。在艺术创作领域，AI可以为艺术家提供灵感和创作素材，帮助他们探索新的艺术风格和表现手法。同时，AI绘画也可以用于游戏、动画、电影等娱乐产业的视觉制作中，提高制作效率和降低成本。此外，AI绘画还可以用于教育、医疗等领域，为学生提供更加直观、生动的学习材料，为医生提供更加准确的诊断依据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值