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. Kubernetes 从懵圈到熟练 – 集群网络详解(转)

    阿里云K8S集群网络目前有两种方案,一种是flannel方案,另外一种是基于calico和弹性网卡eni的terway方案.Terway和flannel类似,不同的地方在于,terway支持Pod弹性 ...

  2. 第119题：杨辉三角II

    一． 问题描述 给定一个非负索引 k,其中 k ≤ 33,返回杨辉三角的第 k 行. 在杨辉三角中,每个数是它左上方和右上方的数的和. 示例: 输入: 3 输出: [1,3,3,1] 二． 解题思路 ...

  3. 006_软件安装之_Proteus 8.6 SP2 Professional

    安装好像已经是直接破解的版本了 链接:https://pan.baidu.com/s/1NQDFJeJwmzoMIPZWhWNtFA提取码:ql8g 复制这段内容后打开百度网盘手机App,操作更方便哦

  4. bzoj 3629

    给出数 $n$记 $f(x)$ 表示 $x$ 的因子和求出所有 $x$ 使得 $f(x) = n$考虑 $x = p_1 ^{a_1} * p_2 ^ {a_2} * \cdots * p_k ^ { ...

  5. 块状链表 codevs 2333弹飞绵羊

    块状链表,分块处理,先预处理每一个点跳到下一个块 跳到哪,步数.然后修改的时候,修该那一个块即可 #include<cstdio>#include<cmath>int a[20 ...

  6. syniverse是一家怎样的公司

    syniverse是一家怎样的公司?(详见问题描述)? 李超   核心业务当然是国际漫游了.简单来说就是做全球各个运营商之间的hub. 打个比方说,一家运营商A做通信,它的覆盖范围肯定是有限的(比如中 ...

  7. C++标准库分析总结(四)——<Vector、Array、Forward_list设计原则>

    本节主要总结标准库Vector和Array的设计方法和特性以及相关迭代器内部特征 1.Vector 1.1 Vector 内部实现 Vector是自增长的数组,其实在标准库中没有任何一种容器能原地扩充 ...

  8. Java基础系列 - 接口（功能，用途和优势）

    package com.test1; /** * 接口的使用 */ public class test1 { public static void main(String[] args) { //创建 ...

  9. stdu1309(不老的传说)

    题目链接:http://acm.sdut.edu.cn/onlinejudge2/index.php/Home/Index/problemdetail/pid/1309.html 不老的传说问题 Ti ...

  10. 学习OpenCV双目测距原理及常见问题解答

    学习OpenCV双目测距原理及常见问题解答 转自博客:https://blog.csdn.net/angle_cal/article/details/50800775 一. 整体思路和问题转化.  图 ...