JavaScript和JQuery如何使用Ajax技术

最新推荐文章于 2022-08-19 16:59:49 发布
最新推荐文章于 2022-08-19 16:59:49 发布
阅读量176 收藏
点赞数
分类专栏： JavaWeb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/solecct/article/details/104022672
版权

目录

案例说明：重名验证

JavaScript：

使用AJAX技术通过GET提交到Servlet

使用AJAX技术通过POST提交到Servlet，其它代码不变只需改变以下代码

JQuery实现AJax技术：

案例说明：重名验证

 

JavaScript：

使用AJAX技术通过GET提交到Servlet

Servlet代码：

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException,IOException {
    request.setCharacterEncoding("utf-8");
    response.setContentType("text/html");
    PrintWriter out = response.getWriter();
    String username = request.getParameter("username");
    boolean used = false;
    if (username.equals("ajax")) {
        used = true;
    }
    out.print(used);
    out.flush();
    out.close();
}

JSP代码：

< script type = "text/javascript" > 
$(function() {
    $("#iu").blur(function() {
        alert("a");

        //1.创建XMLHttpRequest对象
        if (window.XMLHttpRequest) { //判断浏览器类型，true为IE新版浏览器(7+)或其他浏览器
            XMLHttpRequest = new XMLHttpRequest();
        } else {
            XMLHttpRequest = new XMLHttpRequest("Microsoft.XMLHTTP");
        }

        //2.设置回调函数
        XMLHttpRequest.onreadystatechange = callBack;

        //3.初始化XMLHttpRequest组件
        var username = $("#iu").val();
        var url = "logicServlet?username=" + username;
        XMLHttpRequest.open("GET", url, true);

        //4.发送请求
        XMLHttpRequest.send(null);
    })
})

//回调callBack函数处理响应结果
    function callBack() {
        if (XMLHttpRequest.readyState == 4 && XMLHttpRequest.status == 200) {
            var data = XMLHttpRequest.responseText;
            if (data == true) {
                $("#display").text("用户名已存在")
            } else {
                $("#display").text("用户名可用")
            }
        }
    } 
</script>

<body>
    <span>查重：</span><input type="text" value="ajaxTest"  name="username" id="iu"/><span id=display></span>
</body>

JavaScript 使用AJAX技术通过POST提交到Servlet，其它代码不变只需改变以下代码

//3.初始化XMLHttpRequest组件
var url = "logicServlet";
XMLHttpRequest.open("POST", url, true);
XMLHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//4.发送请求
var username = $("#iu").val();
var data = "username=" + username;
XMLHttpRequest.send(data);

JQuery实现AJax技术：

JSP Script页面代码：

< script type = "text/javascript" > 
$(function() {
    $("#iu").blur(function() {
        var username = $(this).val();
        $.ajax({
            url: "logicServlet",
            type: "get",
            data: {
                "username": username
            },
            dataType: "text",
            success: callBack,
            error: function() {
                alert("无响应");
            }
        })
    })
})

//回调callBack函数处理响应结果
function callBack(data) {
    if (data == true) {
        $("#display").text("用户名不可用");
    } else {
        $("#display").text("用户名可用");
    }
} 
< /script>

 

凡是.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
异步ajax验证用户名(防止重名)
11-11
<%@ WebHandler Language="C#" Class="Handler" %> using System; using System.Web; using System.Data; using DAL; public class Handler : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; context.Response.Write("Hello World"); string username= context.Request.QueryString.Get("username"); if (username.ToString() == null || username.ToString() == "") { //禁止缓存 context.Response.Expires = -1;//相对过期时间 context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);//绝对过期时间 context.Response.CacheControl = "no-cache"; context.Response.AddHeader("pragma", "no-cache"); context.Response.AddHeader("cache-control", "private"); string sql = string.Format("select * from MIS.JZG_REGISTER_TOTAL where USER_NAME='{0}'", username); DataTable ds = DBHelper.GetDataSet(sql); context.Response.Clear();//清除缓冲区流中所有内容 context.Response.Write("2"); context.Response.End(); }
Jquery的Ajax技术使用方法
10-17
JQuery的Ajax技术是JavaScript库JQuery中用于实现异步数据交互的核心功能，它使得开发者无需刷新整个网页就能从服务器获取或更新数据。Ajax技术基于JavaScript的XMLHttpRequest对象，但JQuery通过其强大的API简化了...
javascript中AJAX的使用
llc950819的博客
08-29 1142
首次使用博客，记录一些自己感兴趣的东西。 参考文章地址：http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_create.asp AJAX使用的方法： 1、创建XMLHttpReques对象 浏览器使用XMLHttpRequest对象与服务器进行交互，获取数据。一般现下流行的浏览器均支持XMLHttpRequest对象（IE5 和 IE6...
jquery如何实现ajax技术,使用JavaScript和jQuery简单实现Ajax技术(示例代码)
weixin_39631263的博客
08-06 221
Ajax的定义Ajax被认为是(Asynchronous JavaScript and XML的缩写)。允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax。Ajax的工作原理Ajax的核心是JavaScript对象XmlHttpRequest。XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。一、使用JavaScript实现Ajax...
javaScript与jQuery中Ajax技术
热门推荐
WEN38306482的博客
05-14 16万+
简介:Ajax技术是异步传输技术,多种已有的技术的组合。通过Ajax客户端可以实现异步请求操作。请用Ajax可以实现不刷新页面的情况下服务器通信,减少用户等待时间,减轻服务器负担,从而提供更好的服务器响应。 一,概述 1.什么是Ajax技术,Ajax是JavaScript,XML,CSS,Dom等多种已有技术的组合,可以实现客户端的异步请求操作,这样可以实现需要刷新页面的情况下与服务器进行通信,从而减轻了用户的等待时间。 Ajax是由Jesse James Garrett创造的 Ajax是Asynchro
ajax 原生js操作ajax
fagdg的博客
07-25 1万+
1.不需要插件支持（一般浏览器且默认开启JavaScript即可）；2.用户体验极佳（不刷新页面即可获取可更新的数据）；3.提升Web程序的性能（在传递数据方面做到按需放松，不必整体提交）；4.减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）；...
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
01-21
本文实例讲述了javascript和 jQuery中的AJAX技术。分享给大家供大家参考，具体如下： 1.什么是AJAX？ AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发...
JavaScript jquery及AJAX小结
10-22
JavaScript、jQuery和AJAX之间的关系是：JavaScript是基础，jQuery是对JavaScript库的封装，提供了更方便的DOM操作和事件处理；AJAX则是一种使用JavaScript实现的页面局部更新技术。jQuery通过其内置的Ajax方法，...
ajax 详解 以及如何使用ajax
最新发布
weixin_69114755的博客
08-19 331
ajax 是async JavaScript and xml 异步的js和xml 主要用来实现页面局部刷新的一门技术。1，需要对核心对象进行实例化 ：var 变量=new XMLHttpRequest（）if(变量.readystate==4 && 变量.status==200){}4 为请求发送之后 只有请求发送之后后方才会返回数据 对数据进一步操作 渲染页面。2，建立连接：变量.open（‘请求方式’，‘请求地址’）3，发送请求 ：变量.send（‘写请求所需要的参数’）1为创建ajax实例化对象。
js-AJAX
qq_43975332的博客
09-08 196
AJAX AJAX即“Asynchronous Javascript And XML”（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX描述了一种主要使用脚本操作HTTP的Web应用架构，AJAX应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。 谈谈Ajax AJAX是异步的
Ajax（Ajax使用js包）
02-27
使用Ajax实现从服务器读取数据，包括Ajax实现的详细步骤
在JS中使用Ajax
weixin_33920401的博客
03-03 680
为什么80%的码农都做不了架构师？>>> ...
js 如何使用ajax,在 JS 中如何使用 Ajax 来进行请求
weixin_39690401的博客
08-05 845
本人已经过原Danny Markov授权翻译在本教程中，我们将学习如何使用 JS 进行AJAX调用。1.AJAX术语AJAX 表示 异步的 JavaScript 和 XML。AJAX 在 JS 中用于发出异步网络请求来获取资源。当然，不像名称所暗示的那样，资源并不局限于XML，还用于获取JSON、HTML或纯文本等资源。有多种方法可以发出网络请求并从服务器获取数据。我们将一一介绍。2.XMLH...
JavaScript的AJAX
不睡觉的怪叔叔的博客
12-24 3266
一、传统的前后端交互方式 1.1、异步和同步的概念 同步（synchronous） —— 指一个时间段内系统只能有一个进程在执行 异步（asynchronous） —— 指一个时间段内系统可以有多个进程在执行 1.2、传统前后端交互的原理 传统的前后端交互过程： 传统的前后端交互方式（无AJAX）是同步交互的方式，同步的过程只允...
AJAX技术简单介绍及使用
weixin_46837969的博客
07-05 508
AJAX Asynchronous JavaScript And Xml ：异步JavaScript和XML； 用于快速创建动态网页的技术； 对页面进行局部更新； 异步同步 同步方式：正常情况下，浏览器与服务器之间是串行操作，类似于一个Java线程的操作。 异步方式：浏览器与服务器是并行操作，类似于Java中多个线路同时工作。 AJAX使用的技术 JavaScript：用于后台发送数据给服务器，并且对服务器返回的结果进行处理。 XML：用于接收服务器返回的数据，但是已经被JSON格式代替。 原生AJAX [
AJAX的使用方式及教程
qq_55880012的博客
03-01 2183
1. 概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML 1. 异步和同步：客户端和服务器端相互通信的基础上 * 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。 * 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。 Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 [1] 通过在后台与服务器...
jQuery ajax 简单的实例
1号帅比的博客
10-06 3万+
通过jQuery ajax实现从服务器查询数据，返回给前端并显示到html页面 html文件 &lt;!DOCTYPE html&gt; &lt;html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;ti
JavaScript与jQuery中的AJAX技术详解
"本资源主要讲解了jQuery中的AJAX技术，包括AJAX的基本概念、XMLHTTPRequest对象以及jQuery中相关的Ajax方法和事件。内容涵盖了HTTP状态码的解释，如300、301、302、303、304、305、306、307、400、401、402、403、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值