AJAX.

news2024/11/5 20:46:12

概念:AJAX:异步的 JavaScript 和 XML

AJAX作用:

        1.与服务器进行数据交换: 通过AJAX可以给服务器发送请求,并获取服务器响应的是数据

        使用了AJAX和服务器进行通讯,就可以使用HTML和AJAX来替换JSP页面了

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

AJAX快速入门:

        1.编写AjaxServlet,并使用response输出字符串

        2.创建XML HttpRequest 对象: 用于和服务器交换数据

        3.向服务器发送请求

        4.获取服务器响应数据

<script>
    // 1.创建核心对象
    var xhttp ;
    if (window.XMLHttpRequest){
        xhttp=new XMLHttpRequest();
    }else {
        xhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    // 2.发送请求
    xhttp.open("GET", "http://localhost:8080/brand-demo/ajaxServlet");
    xhttp.send();

    // 3.获取相应
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
           alert(this.responseText);
        }
    };

</script>

案例:使用AJAX验证用户名是否存在

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

<script>


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

        // 2.发送AJAX请求
        // 获取用户名的值
        var username= this.value();



        // 2.1创建核心对象
        var xhttp ;
        if (window.XMLHttpRequest){
            xhttp=new XMLHttpRequest();
        }else {
            xhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        // 2.2 发送请求
        xhttp.open("GET", "http://localhost:8080/brand-demo/selectUserServlet?username="+username);
        xhttp.send();

        // 2.3获取相应
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
               // alert(this.responseText);
                // 判断
                if (this.responsesSent=="true"){
                    // 用户名存在,显示提示信息
                    document.getElementById("username_err").style.display='';
                }else {
                    // 用户名不存在,清楚提示信息
                    document.getElementById("username_err").style.display='none';
                }
            }
        };
    }
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1463526.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

VSCode The preLaunchTask ‘C/C++: clang++ 生成活动文件‘ terminated with exit code -1

更改tasks.json文件里面的type为shell 选择g 选择g&#xff0c;然后点回到text.c&#xff0c;按下F5. 得到结果。 文中内容参考: 从零开始手把手教你配置属于你的VS Code_哔哩哔哩_bilibili https://blog.csdn.net/qq_63872647/article/details/128006861

Windows7安装指南

概要&#xff1a; 本篇演示Windows7的安装过程 一、说明 1、电脑 笔者的电脑品牌是acer(宏碁/宏基) 电脑开机按F2可进入BIOS 2、Windows7启动U盘 Windows7启动U盘作为Windows7的安装来源 该U盘的制作可参考笔者的文章 Windows制作Windows的U盘启动盘 Windows7没有USB…

《图解HTTP》笔记1:http的诞生

1&#xff0c;http的诞生&#xff1a; 1.1 为共享知识而生 我们现在使用web&#xff08;World Wide Web的简称&#xff0c;即万维网&#xff09;浏览器&#xff0c;目前可以输入一个网址&#xff08;http://www.baidu.com)&#xff0c;就会有一个网页显示出来。 最开始设想出…

百面嵌入式专栏(经验篇)如何在面试中介绍自己的项目经验

文章目录 1. 在面试前准备项目描述,别害怕,因为面试官什么都不知道2. 准备项目的各种细节,一旦被问倒了,就说明你没做过3.不露痕迹地说出面试官爱听的话4.一定要主动,面试官没有义务挖掘你的亮点5.一旦有低级错误,可能会直接出局6.引导篇:准备些加分点,在介绍时有意提到…

36、IO进程线程/进程和线程之间的通信练习

一、使用有名管道完成两个进程的相互通信(提示&#xff1a;可以使用多进程或多线程完成)。 代码1&#xff1a;创建两个有名管道文件 #include<myhead.h>int main(int argc, const char *argv[]) {if(mkfifo("./mingtohua",0664)-1)//创建小明向小华发信息的管…

【CSS】设置文字(文本)的渐变色

# 渐变色 文字 第一步 设置渐变颜色 background: linear-gradient(278.83deg, #5022bd 31.42%, #8636d1 75.55%); // 先设置渐变色背景&#xff1b; 第二步 设置颜色的使用范围 background-clip: text; // 背景被裁剪成文字的前景色。 -webkit-background-clip: text; 第三步…

C#使用一个泛型方法操作不同数据类型的数组

目录 一、泛型方法及其存在的意义 二 、实例 1.源码 2.生成效果 再发一个泛型方法的示例。 一、泛型方法及其存在的意义 实际应用中&#xff0c;查找或遍历数组中的值时&#xff0c;有时因为数组类型的不同&#xff0c;需要对不同的数组进行操作&#xff0c;那么,可以使用…

大工程 从0到1 数据治理 数仓篇(sample database classicmodels _No.7)

大工程 从0到1 数据治理 之数仓篇 我这里还是sample database classicmodels为案列&#xff0c;可以下载&#xff0c;我看 网上还没有类似的 案列&#xff0c;那就 从 0-1开始吧&#xff01; 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参…

ChatGPT学习第二周

&#x1f4d6; 学习目标 自然语言处理&#xff08;NLP&#xff09;简介 探索自然语言处理的基本原理&#xff0c;理解其在ChatGPT中的应用。 GPT模型概述 了解生成式预训练变换器&#xff08;GPT&#xff09;的工作原理。 ✍️ 学习活动 学习资料 《走进AI(三) | 解构 NLP…

WEB APIs (4)

日期对象 实例化 代码中出现new关键字&#xff0c;创建时间对象 得到当前时间&#xff1a; const date new Date&#xff08;&#xff09; 获得指定时间&#xff1a; const date new Date&#xff08;‘2022-5-1’&#xff09; 方法作用说明getFullYear()获取年份获取…

【IDEA关闭项目一直转圈】

IDEA关闭项目一直转圈&#xff1a; IDEA启动时&#xff0c;会自动打开上次关闭时所有显示的窗口&#xff0c;如果本次工作不需要上次打开的所有窗口&#xff0c;可以基于选择窗口界面的右上角去关闭。 项目关闭失败 但是偶尔会出现窗口关闭时&#xff0c;一直显示“正在关闭项…

【2024软件测试面试必会技能】Charles(5):Charles设置过滤

设置过滤 一、只展示window/mac上的指定网址 方法一&#xff1a;右击域名——Focus——可针对该域名以外的其他域名都进行过滤&#xff0c;只展示该域名的请求数据。如下图&#xff1a; 方法二&#xff1a; 在Filter输入框中输入指定域名对其他的进行过滤&#xff1b;只展示指…

51单片机学习(3)-----独立按键控制LED的亮灭状态

前言&#xff1a;感谢您的关注哦&#xff0c;我会持续更新编程相关知识&#xff0c;愿您在这里有所收获。如果有任何问题&#xff0c;欢迎沟通交流&#xff01;期待与您在学习编程的道路上共同进步了。 目录 一. 器件介绍及实验原理 1.独立按键 &#xff08;1&#xff09;独…

【算法】复杂度分析

第一章、如何分析代码的执行效率和资源消耗 我们知道&#xff0c;数据结构和算法解决的是“快”和“省”的问题&#xff0c;也就是如何让代码运行得更快&#xff0c;一级如何让代码更节省计算机的存储空间。因此&#xff0c;执行效率是评价算法好坏的一个非常重要的指标。那么&…

【PX4学习笔记】04.QGC地面站的使用

目录 文章目录 目录PX4代码烧入PX4固件代码的烧入方式1PX4固件代码的烧入方式2 QGC地面站的基础使用连接地面站的方式查看关键的硬件信息 QGC地面站的Application Settings模块Application Settings模块-常规界面单位其他设置数据持久化飞机中的数传日志飞行视图计划视图自动连…

【软件测试】如何有效的进行用例设计和评审

作为一个合格的测试工程师&#xff0c;必须掌握测试的日常工作流程。 那么在一个产品周期里面&#xff0c;测试工程师是什么时候介入工作的呢&#xff1f;具体承担了哪些工作呢&#xff1f; 这两问题&#xff0c;也是在日常面试中经常遇到的&#xff0c;这里我用一张思维导图进…

10种常见的光伏发电量计算方法

光伏发电是一种将太阳能转化为电能的清洁能源技术。随着环境保护意识的日益增强和能源结构的转型&#xff0c;光伏发电得到了广泛的应用。对于光伏系统来说&#xff0c;发电量的准确计算是评估系统性能、预测长期收益和优化系统运行的关键。以下是常见的光伏发电量计算方法&…

Android---Jetpack Compose学习007

Compose 附带效应 a. 纯函数 纯函数指的是函数与外界交换数据只能通过函数参数和函数返回值来进行&#xff0c;纯函数的运行不会对外界环境产生任何的影响。比如下面这个函数&#xff1a; fun Add(a : Int, b : Int) : Int {return a b } “副作用”&#xff08;side effe…

鱼哥赠书活动第⑧期:《基础软件之路:企业级实践及开源之路》

鱼哥赠书活动第⑧期&#xff1a;《基础软件之路&#xff1a;企业级实践及开源之路》 作者介绍&#xff1a;1.静态分析工具在当前软件开发流程中的应用2.编译相关技术在静态分析工具中的应用3.编译相关技术在提升软件质量和性能上的更多应用4. 未来展望图书推荐&#xff1a;赠书…

[计算机网络]---TCP协议

前言 作者&#xff1a;小蜗牛向前冲 名言&#xff1a;我可以接受失败&#xff0c;但我不能接受放弃 如果觉的博主的文章还不错的话&#xff0c;还请点赞&#xff0c;收藏&#xff0c;关注&#x1f440;支持博主。如果发现有问题的地方欢迎❀大家在评论区指正 目录 一 、TCP协…