Ajax(Asynchronous JavaScript and Xml)

整合了JavaScript,XML,CSS,DOM,Ajax引擎(XMLHttpRequest).

JavaScript语言:Ajax技术主要开发语言。

XML/JSON/HTML等:用来封装请求或响应数据格式。

DOM(文档对象模型)通过DOM属性或方法修改页面元素,实现页面局部刷新。

CSS:改变样式,美化页面效果,提升用户体验度。

Ajax引擎:即XMLHttpRequest对象,以异步方法在客户端与服务器端回见专递数据.

                                        Ajax流程图

下面我们来下一个例子了解一下Ajax检验

首先

1.搭建一个web工程

2.在index.jsp ajax 验证用户名是否重复

步骤1:
根据能力检测创建和核心对象

步骤2:
xhr.open(请求类型,请求地址,是否异异步)

步骤3:
设置回调函数
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
//响应状态已经切换到了4,并且状态码是200
//xhr.responseText;
}

}

步骤4:发送
xhr.send();
2.使用ajax发送post请求 必须指定Content-Type
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

下面来 看一下代码展示

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript"> //给文本框注册一个失去焦点事件
window.onload=function(){
var dom=document.getElementById("txtName");
dom.onblur=function(){
myajax();
}; }; function myajax(){ //01.定制出 xhr对象
var xhr;
//02.能力检测
if(window.XMLHttpRequest){
//非IE浏览器
xhr=new XMLHttpRequest();
}else{
//IE内核
xhr=new ActiveXObject("Microsoft.XMLHttp");
}
var dom=document.getElementById("txtName");
var myspan=document.getElementById("msg");
var myval=dom.value;
//03.构建请求地址
//xhr.open("请求类型","请求地址","是否异步");
xhr.open("get","<%=path%>/servlet/CheckUserServlet?uname="+myval,true); //04.设置回调函数 响应回来的数据
xhr.onreadystatechange=function(){
//什么
if(xhr.readyState==&&xhr.status==){
//获取响应数据
var data=xhr.responseText;
if(data=='OK'){ myspan.innerText="已被注册";
}else{ myspan.innerText="可注册,是否使用";
}
}
}; //05.用send真正的发送请求
xhr.send(null); } </script>
</head> <body>
用户名:<input type="text" name="txtName" id="txtName"/> <span id="msg"></span><br/>
密 码:<input type="password" name="txtPwd"/>
</body>
</html>

第二步:创建一个Servlet文件

public class CheckUserServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request,response); } public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String uname = request.getParameter("uname");
if (uname.equals("admin")) {
//用户已经被注册了
//回送 信息
response.getWriter().write("OK");
}else {
response.getWriter().write("NO");
} } }

效果:

Ajax校验--最近更新的更多相关文章

  1. PHP与Ajax的交互更新页面

    PHP与Ajax的交互更新页面 本次主要学习ajax的概念以及怎么与PHP之间进行交互操作 1.什么是Ajax?    国内翻译常为“阿贾克斯”和阿贾克斯足球队同音,AJAX 是一种用于创建快速动态网 ...

  2. SSM整合框架实现ajax校验

    SSM整合框架实现ajax校验   刚学习了ssm框架,ajax校验成功,分享下 1.导入jar包

  3. 详细讲解:tp3.2.3生成验证码并进行验证(ajax校验返回及自定义返回)

    TP3.2.3的验证码也是比较经典的小功能,框架对这个小功能的封装还是比较完美的,废话不多说,开始记录 1.总体效果: (1)初始界面 (2)自定义的返回校验效果: (3)ajax的校验返回: 2.代 ...

  4. struts2中Ajax校验

    Ajax(Asynchronous JavaScript and Xml),整合了JavaScript,XML,CSS,DOM,Ajax引擎(XMLHttpRequest). JavaScript语言 ...

  5. Ajax校验

    一.Ajax简介 AJAX即(Asynchronous JavaScript and Xml)(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. Ajax的关键元素包括以 ...

  6. 【SSH网上商城项目实战28】使用Ajax技术局部更新商品数量和总价

         转自: https://blog.csdn.net/eson_15/article/details/51487323 昨天把项目部署了一下,玩了玩,今天完善了一下购物车中修改商品数量就能局部 ...

  7. 十七 Ajax&校验用户名功能

    Ajax: 即"Asynchronous JavaScript And XML", 异步JavaScript和XML , 是指一种创建的交互式页面应用的网页开发技术,它并不是新的技 ...

  8. JavaWeb网上图书商城完整项目--day02-6.ajax校验功能之页面实现

    1 .现在我们要在regist.js中实现ajax的功能,使用用户名到后台查询是否注册,邮箱是否到后台注册,验证码是否正确的功能 我们来看regist.js的代码 //该函数在html文档加载完成之后 ...

  9. Struts2 Ajax校验

    Ajax(Asynchronous javascript and xml):异步刷新技术 技术组成:  CSS + xml +JavaScript +DOM Ajax核心对象: XMLHttpRequ ...

随机推荐

  1. Linux环境下安装mysql5.6(二进制包不是rpm格式)

    一.准备: 1.CentOS release 6.8 2.mysql-5.6.31-linux-glibc2.5-x86_64.tar.gz 3.Linux下MySQL5.6与MySQL5.7安装方法 ...

  2. vue 对象更改检测注意事项

  3. springboot项目对接支付宝支付

    支付宝对接文档 一.准备工作 1. 首先要到 蚂蚁金服开发者中心 https://openhome.alipay.com/platform/home.htm 注册商家账户,并认证. 2.下载java版 ...

  4. 46、[源码]-Spring容器创建-注册BeanPostProcessors

    46.[源码]-Spring容器创建-注册BeanPostProcessors 6.registerBeanPostProcessors(beanFactory);注册BeanPostProcesso ...

  5. luogu 5505 [JSOI2011]分特产 广义容斥

    共有 $m$ 种物品,每个物品 $a[i]$ 个,分给 $n$ 个人,每个人至少要拿到一件,求方案数. 令 $f[i]$ 表示钦定 $i$ 个没分到特产,其余 $(n-i)$ 个人随便选的方案数,$g ...

  6. 爬虫(十八):scrapy分布式部署

    scrapy部署神器-scrapyd -->GitHub地址  -->官方文档 一:安装scrapyd 安装:pip3 install scrapyd 这里我在另外一台ubuntu lin ...

  7. 全栈开发工程师微信小程序-下

    app.json { "pages": ["pages/index/index"] } index.wxml <text>Hello World&l ...

  8. PHP全栈学习笔记27

    数组概述,类型,声明,遍历,输出,获取数组中最后一个元素,删除重复数组,获取数组中指定元素的键值,排序,将数组中的元素合成字符串. 数组概述,数组是存储,管理和操作一组变量. 数组类型为一维数组,二维 ...

  9. 数据结构实验之查找五:平方之哈希表 (SDUT 3377)

    Hash表的平方探测思路:如果当前这个没存放数值,就放进去,如果当前这个地方Hash [ i ] 已经有数值了,就以平方的间隔左右寻找没有存放数的空白 Hash [ i ]. #include < ...

  10. 用混入的方法引入vuex,并且解决vuex刷新页面值丢失的问题

    前段时间,做了个官网项目,客户要求将首页的域名后面的参数去除干净,然后就把#去掉了,一转脸,客户让去掉子页面地址栏上的参数,这很棘手,因为子页面的内容是根据子页面地址栏上的参数而定的,如果要去掉这些参 ...