jquery如何实现ajax技术,使用JavaScript和jQuery简单实现Ajax技术(示例代码)

Ajax的定义

Ajax被认为是(Asynchronous JavaScript and XML的缩写)。 允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax。

Ajax的工作原理

Ajax的核心是JavaScript对象XmlHttpRequest。XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。

一、使用JavaScript实现Ajax技术

1.首先建立一个jsp页面,导入js页面并且新建一个测试按钮。

2.其中我们在js页面先需要获取XmlHttpRequest对象,并且需要处理兼容问题

获取XmlHttpRequest对象functiongetXMLHttpRequest() {var xmlHttpReq=null;if (window.XMLHttpRequest) {//Mozilla 浏览器

xmlHttpReq = newXMLHttpRequest();

}else{if (window.ActiveXObject) {//IE 浏览器

try{

xmlHttpReq= new ActiveXObject("Microsoft.XMLHTTP");

}catch(e) {try {//IE 浏览器

xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");

}catch(e) {

}

}

}

}return xmlHttpReq;

3.接着在相同页面下开始写onload事件(get方法发送数据)

window.onload = function(){var btnDom=document.getElementById("btn");

btnDom.οnclick= function(){//ajax步骤

//1

var xhr =getXMLHttpRequest();//2.监听响应 如何判断能够正确请求和响应

xhr.onreadystatechange = function(){if(xhr.readyState == 4){ //响应结束

if(xhr.status == 200){ //正确响应

//接收响应数据

var data =xhr.responseText;

alert(data);

}

}

};//3.打开连接

/** method: get 或 post

* url: 请求路径

* async: true(表示异步,默认) false*/xhr.open("get","../ajaxGetServlet?age=18&userName=jack",true);//4.发送数据

xhr.send(null); //使用get请求send发送的数据都为null,且不能省略这一步

};

};

或者使用(post请求//第3第4步骤有区别)

window.onload = function(){var btnDom=document.getElementById("btn");

btnDom.οnclick= function(){//1

var xhr =getXMLHttpRequest();//2.

xhr.onreadystatechange = function(){if(xhr.readyState == 4){if(xhr.status == 200){var data =xhr.responseText;

alert(data);

}

}

};//3.

xhr.open("post","../ajaxPostServlet",true);/** 4.发送数据

* send() string或null

* String类型一般为键值对 "username=zhangsan"

* get请求 都是send(null)

* post请求要send数据需要设置请求头*/xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xhr.send("user=admin&age=12");

};

};

其中步骤3的url需要我们创建一个servlet

public class AjaxGetServlet extendsHttpServlet {public voiddoGet(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException {

String age= request.getParameter("age");

String userName= request.getParameter("userName");

System.out.println(age+"------"+userName);//响应数据

response.getWriter().print("hello"); //js中步骤2监听响应

}public voiddoPost(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException {

doGet(request, response);

}

}

代码写完以后,我们只需要按一下(value="ajax")测试按钮就可以使用ajax技术实现异步请求与响应。

二、使用jQuery实现Ajax技术

案例:如何使用ajax技术实现用户注册时用户名是否被占用?

1.jsp注册页面

jquery 实现 ajax

用户名:

2.js页面(无需手动获取XmlHttpRequest对象)

$(function(){

$("#userName").blur(function(){var name = $(this).val();if(name.trim() == ""){return;

}//jquery 实现 ajax

$.ajax({

url:"../jqueryUserName", //请求的路径

type:"post", //请求方式 默认是get

data: { //要发送的数据

"name":name

},

dataType:"text", //响应数据的类型

success:function(result){ //正确响应

if(result == "yes"){

$("#msg").html("用户名可以使用");

}else{

$("#msg").html("用户名被占用");

}

},

error:function(){

alert("请求失败!");

}

});

});

});

3.servlet页面(获取用户名比较是否被占用)

public class JqueryUserName extendsHttpServlet {public voiddoGet(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException {

System.out.println("jquery ajax 验证用户名!");

PrintWriter out=response.getWriter();

String name= request.getParameter("name");if("ajax".equals(name) || "admin".equals(name) || "jack".equals(name)){//用户名已被使用

out.print("no");

}else{

out.print("yes");

}

}public voiddoPost(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException {

doGet(request, response);

}

}

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

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

相关文章

值得永久收藏的 C# 设计模式套路(一)

设计模式知道,套路是个啥?关于设计模式的说法,网上一搜一大堆,咱就不再去说了。我的理解,设计模式就是很多NB的大佬们总结出来的,用来处理特定情况的标准解决方案。那既然是标准方案,就一定会有…

如何让你的碎片化时间更有价值?

全世界只有3.14 % 的人关注了爆炸吧知识不知道大家有没有发现,我们开始变得浮躁起来了,我们不再愿意花大量时间去做成一件事情,也无法下定决心,改变自己糟糕的现状。却羡慕着手机屏幕里各种各样的成功人士,活出了自己最…

窥探Swift编程之强大的Switch

之前初识Swift中的Switch语句时,真的是让人眼前一亮,Swift中Switch语句有好多特有而且特好用的功能。说到Switch, 只要是写过程序的小伙伴对Switch并不陌生。其在程序中的出镜率还是比较高档。Switch属于程序的分支语句,Switch的功能便于处理…

安富莱v6开发板网口通讯_安富莱嵌入式周报第170期:2020.07.202020.07.26

说明:谢谢大家的关注,继续为大家盘点上周精彩内容。1、沁恒推出带USB3.0,千兆以太网,光纤接口的RISC内核单片机CH569 CH569/565 微控制器使用 RISC-V3A 内核, 支持 RISC-V 指令的 IMAC 子集。片上集成超高速USB3.0主…

postfix搭建及配置

一. 电子邮件系统概述1. 邮件系统角色MUA(邮件用户代理)、MTA(邮件传输代理)、MDA(邮件分发代理)2. 邮件应用协议SMTP,简单邮件传输协议,TCP 25端口POP3&…

连续子数组的最大和

有一个整数数组,求出连续子数组的和的最大值。有一个首尾相连的整数数组,求出连续子数组的和的最大值。在数组中,数字减去它右边的数字得到一个数对之差。求所有数对之差的最大值。1、思路: 动态规划思路:用函数f(i)表…

Android之常用开发框架

Android之常用开发框架 1、Rajawali 介绍: 安卓的OpenGL ES 2.0/3.0 引擎。可以用于制作普通应用或者动态壁纸,当然也可以用于制作游戏。 项目地址: https://github.com/Rajawali/Rajawali 2、RxAndroid 介绍: RxAndroid是RxJava的一个针对Android平台的扩展。它包含了一些…

servlet需要和ajax,如何使用Servlet和Ajax?

我是Web应用程序和Servlet的新手,我有以下问题:每当我在Servlet中打印某些内容并由网络浏览器调用它时,它将返回一个包含该文本的新页面。 有没有一种方法可以使用Ajax在当前页面中打印文本?#1楼我将向您展示servlet的整个示例以及…

如何阻止给 一个程序 开启多个实例 ?

咨询区 C. Dragon 76:在 .NET 中是否有比较好的方法可以阻止一个 application 被同时开启了多个实例?如果没有好的办法,那么只能退其次,给每个 application 配一些操作规范。回答区 ImJustPondering:我总结有两种解法。…

WPF中设置了WindowStyle=None后,窗口仍然有边框的解决方法

1. 设置了窗体的WindowStyle"None",窗口还是右边框,如下图: 2. 这是因为窗体默认是可以改变大小的,所以需要修改ResizeMode的值 ResizeMode"NoResize", 这样设置后,上图中的边框就没有了

两度破译“白宫密码”,让美国政府部门崩溃,却称自己是抱娃敲代码的普通妈妈

全世界只有3.14 % 的人关注了爆炸吧知识抱娃敲代码称成功是幸运而已今天我们来点正经的,来跟大家分享一位乘风破浪的姐姐--王小云教授。自踏入2020年以来,山东大学网络空间安全学院(研究院)院长,双聘院士、讲席教授王小…

github java开源项目经验_10月份Github上最热门的Java开源项目

10 月份 GitHub 上最热门的Java开源项目排行已经出炉啦,在本月的名单中,实战项目类居多,当然也有像JavaGuide这样学习指南类项目,下面就是本月上榜的10个开源项目:1、Java(Star 18468)https://g…

转载:保护模式1

实模式与保护模式 摘自ITWIKI,为我和还没搞明白真实模式保护模式的XDJM们 真实模式 Intel 8086和8088有14个16位缓存器。其中四个(AX, BX, CX, DX)是通用目的(尽管每个缓存器有额外的目的;举个例子:CX可以被用来当作lo…

浙江移动无线dns服务器地址,浙江移动4g的dns服务器地址

浙江移动4g的dns服务器地址 内容精选换一换当创建文件系统后,您需要使用云服务器来挂载该文件系统,以实现多个云服务器共享使用文件系统的目的。本章节以Windows 2012版本操作系统为例进行NFS文件系统挂载,其他版本请参考以下主要步骤根据实际…

Android之给gridview的单元格加上分割线

有时候需要给gridview加上分割线,没有现成的解决方案,这里写好一个可以直接用的自定义gridview,就叫做LineGridView吧。先上图,zaker客户端第三方分享的gridview样式: 可以看到靠边的格子都是半封闭的,要实…

Azure Machine Learning - 如何使用 GPT-4 Turbo with Vision

介绍如何在Azure中使用GPT-4 Turbo with Vision 关注TechLead,分享AI全维度知识。作者拥有10年互联网服务架构、AI产品研发经验、团队管理经验,同济本复旦硕,复旦机器人智能实验室成员,阿里云认证的资深架构师,项目管理…

系统命名与 SQL 命名之争 - 第 1 部分

创建数据库对象的命名规范 创建数据库对象时,开发人员可以选择一种命名方法,可以选择遵循传统 IBM i 行为的系统命名模式 (*SYS),也可以选择遵循SQL 标准规则的 SQL 命名规范 (*SQL)。 DB2 for i 与其他数据库管理系统 (DBMS) 之间的主要差别…

C++ const 关键字使用

2019独角兽企业重金招聘Python工程师标准>>> 为什么使用const?采用符号常量写出的代码更容易维护;指针常常是边读边移动,而不是边写边移动;许多函数参数是只读不写的。const最常见用途是作为数组的界和switch分情况标号…

论大象如何装进冰箱

全世界只有3.14 % 的人关注了爆炸吧知识在这美好的一天,想和大家讨论一个有趣的数学话题:怎么才能将一只大象装进冰箱呢?数学的方法把大象放到冰箱里的分析学方法1)先把大象微分,然后把它放到冰箱里,再在冰…

2020下半年新机最新消息_提前剧透 2020 年下半年五大新机

华为 Mate40系列 美帝一系列封杀骚操作,并没有影响到华为手机下一代的处理器——台积电代工的、采用了 5nm 进程的 Mate40 处理器——麒麟 1020。为了 3D 脸部识别,可能还是采用刘海屏。Mate40 Pro 的曲率更大,正面屏幕的视觉冲击更加震撼&am…