/**Ajax 编写流程
* 1、创建 XHR (XMLHttpRequest)对象

 var xmlHttpReq = false; // var xmlHttpReq = "";       数据类型改变--弱类型

 //Part1:创建 [一个函数，初始化] XHR 对象--->是 Ajax的基础

 function createXmlHttpRequest() {

     /**这里要完成两个步骤：

      * 1.IE7+、FireFox、Chrome、Safari、Opera浏览器下的  XHR  是如何初始化的

      * 2.IE5、IE6 浏览器下的 XHR 有是如何初始化的

      **/

     if(window.XMLHttpRequest){ //IE7+、FireFox、Chrome、Safari、Opera下创建的 XHR

         xmlHttpReq = new XMLHttpRequest();

     }else if(window.ActiveXObject){ //IE5、IE6下创建的 XMLHttpRequest

         try{ // 所有现代浏览器均支持 XHR 对象（IE5 和 IE6 使用 ActiveXObject）。

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

         }catch(e){

             console.log("=====Fail======");

         }

     }

 }

* 2、利用XHR发送Ajax请求

* 3、写一个回调函数来解析服务器端返回的数据

* 4、把数据渲染到HTML页面上

 //Part2:利用XMLHttpRequest发送Ajax请求---->将请求发送到服务器 用 XHR 对象的 open() 和 send() 方法

 function sendRequest(url, params){

     // 1创建 XMLHttpReq对象（先调用，使xmlHttpReq初始化）

     createXmlHttpRequest();

     // 2向服务器发送请求---->设置发送请求相关属性

     xmlHttpReq.open("POST",url,true);// 2.1 规定请求的类型、URL 以及是否异步处理请求。

     xmlHttpReq.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 2.2 设置Http请求头

     xmlHttpReq.send(params); // 2.3 将请求发送到服务器  发送数据

     // Part3 回调函数  处理服务器返回的数据

     xmlHttpReq.onreadystatechange = function() {

         if(xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200){

             //Part4 数据解析---> 把数据渲染到HTML页面上

             // nodeValue 返回元素值

             var res = xmlHttpReq.responseXML.getElementsByTagName("res")[0].firstChild.nodeValue;

             window.alert(res);

         }

     }

 }

完整代码如下：

1.html文件

 <!-- 01_ajax.html -->

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Ajax案例</title>

 <script src="js/01_ajax.js"></script>

 </head>

 <body>

   <form action="" method="post">

     <p><label>账号:</label><input type="text" name="uname" id="uname"></p>

     <p><label>密码:</label><input type="password" name="upass" id="upass"></p>

     <p><input type="button" value="登录"  onclick="login()"></p>

   </form>

 </body>

 </html>

01_ajax.html

2.js文件

 /**Ajax编写流程

  * 1、创建 XHR (XMLHttpRequest)对象

  * 2、利用XHR发送Ajax请求

  * 3、学会写一个回调函数来解析服务器端返回的数据

  * 4、把数据渲染到HTML页面上

  */

 $ = function(obj){

     return document.getElementById(obj);

 }

 var xmlHttpReq = false; // var xmlHttpReq = "";       数据类型改变--弱类型

 //Part1:创建 [一个函数，初始化] XHR 对象--->是 Ajax的基础

 function createXmlHttpRequest() {

     /**这里要完成两个步骤：

      * 1.IE7+、FireFox、Chrome、Safari、Opera浏览器下的  XHR  是如何初始化的

      * 2.IE5、IE6 浏览器下的 XHR 有是如何初始化的

      **/

     if(window.XMLHttpRequest){ //IE7+、FireFox、Chrome、Safari、Opera下创建的 XHR

         xmlHttpReq = new XMLHttpRequest();

     }else if(window.ActiveXObject){ //IE5、IE6下创建的 XMLHttpRequest

         try{ // 所有现代浏览器均支持 XHR 对象（IE5 和 IE6 使用 ActiveXObject）。

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

         }catch(e){

             console.log("=====Fail======");

         }

     }

 }

 //Part2:利用XMLHttpRequest发送Ajax请求---->将请求发送到服务器 用 XHR 对象的 open() 和 send() 方法

 function sendRequest(url, params){

     // 1创建 XMLHttpReq对象（先调用，使xmlHttpReq初始化）

     createXmlHttpRequest();

     // 2向服务器发送请求---->设置发送请求相关属性

     xmlHttpReq.open("POST",url,true);// 2.1 规定请求的类型、URL 以及是否异步处理请求。

     xmlHttpReq.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 2.2设置Http请求头

     xmlHttpReq.send(params); // 2.3 将请求发送到服务器  发送数据

     // Part3 使用回调函数  处理服务器返回的数据

     xmlHttpReq.onreadystatechange = function() {

         if(xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200){

             // Part4 数据解析 ---> 把数据渲染到HTML页面上

             var res = xmlHttpReq.responseXML.getElementsByTagName("res")[0].firstChild.nodeValue;  //   nodeValue 返回元素值

             window.alert(res);

         }

     }

 }

 // 登录点击事件方法

 function login(){

     var uname  = $("uname").value;

     var upass  = $("upass").value;

     var params = "uname=" + uname + "&upass=" + upass;

     sendRequest("01_ajax.do",params);

 }

01_ajax.js

3.java文件

 package com.lsy.ajaxtest1;

 import java.io.IOException;

 import java.io.PrintWriter;

 import javax.servlet.ServletException;

 import javax.servlet.annotation.WebServlet;

 import javax.servlet.http.HttpServlet;

 import javax.servlet.http.HttpServletRequest;

 import javax.servlet.http.HttpServletResponse;

 // 服务器端  ---> ervlet

 @WebServlet("/01_ajax.do")

 /*只要在Servlet上设置@WebServlet标注，容器就会自动读取当中的信息。上面的@WebServlet告诉容器，

   如果请求的URL是“/01_ajax.do”，则由HelloServlet的实例提供服务。可以使用@WebServlet提供更多信息*/

 public class AjaxServelet_01 extends HttpServlet {

     private static final long serialVersionUID = 4776153483702612333L;

     /**服务器端要做怎样的操作

      * 1、获得数据（请求）

      * 2、返回数据（响应）

      **/

     @Override

     protected void doPost(HttpServletRequest request,HttpServletResponse response)

             throws ServletException,IOException {

         request.setCharacterEncoding("utf-8");  //请求的中文处理

         response.setCharacterEncoding("utf-8"); //响应的中文处理

         response.setContentType("text/xml;charset=utf-8"); //响应类型的设置

         PrintWriter out = response.getWriter(); //输出流（字符流），输出xml格式数据

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

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

 //        System.out.println(uname + "---" + upass);

 //        String xml = "<response><res>欢迎光临...</res></response>";

         StringBuffer xml = new StringBuffer();

         xml.append("<response>");

         if("zs".equals(uname) && "123".equals(upass)) {

             xml.append("<res>欢迎光临...</res>");

         }else {

             xml.append("<res>输入信息有错！</res>");

         }

         xml.append("</response>");

         out.println(xml.toString());

         out.flush();

         out.close(); //输出流关闭

     }

 }

AjaxServelet_01.java

AJAX - 实现一个简单的登录验证的更多相关文章

  1. Web开发技术---简单的登录验证

    制作一个APP或系统最基础的是登录界面,下面通过一个简单的登录注册界面的程序,来熟练掌握Web开发的技术. 一.知识点: 1.在网页界面获取用户的输入信息 2.标签的基本应用 3.用户输入结果的错误提 ...

  2. Asp.Net WebApi一个简单的Token验证

    1.前言: WebAPI主要开放数据给手机APP,Pad,其他需要得知数据的系统,或者软件应用.Web 用户的身份验证,及页面操作权限验证是B/S系统的基础功能.我上次写的<Asp.Net MV ...

  3. 第四章 .net core做一个简单的登录

    项目目标部署环境:CentOS 7+ 项目技术点:.netcore2.0 + Autofac +webAPI + NHibernate5.1 + mysql5.6 + nginx 开源地址:https ...

  4. asp.net 一个简单的登录控制

    如果说一个网站需要用户登录后才能浏览,那么用户登录控制就不可避免.但是对于几百个以上的页面,不可能每个页面都做一次登录验证.因此,这需要在母版页中进行登录控制,这样就可以使得每一个使用这个母版页的子页 ...

  5. jmeter 压力测试（一）一个简单的登录

    写在最前面,之所以记录这个最最简单的http的登录,是因为捣鼓了一天,真的是找错也找不错了,后来请教的同事,重新写了一个ok了,最后发现竟然是因为[http信息头]写的有问题,简直是!!醉了 如下,这 ...

  6. SSM框架完成Ajax简单用户登录验证

    一.前端JSP <%@ page contentType="text/html;charset=UTF-8" language="java" %> ...

  7. struts-spring-mybatis实现最简单的登录验证

    1.导入项目相关的jar包 2.建立项目结构 3.配置文件的配置及代码 db.properties: jdbc.driver=com.mysql.jdbc.Driverjdbc.url=jdbc:my ...

  8. 7. Swift 基于Xmpp和openfire实现一个简单的登录注册

    1. 基本步骤:首先导入Xmpp框架,配置环境 ->由于我们使用的是OC的Xmpp框架,再进行Swift开发时需要进行桥接. 具体方法就是创建一个基于c的.h的头文件,然后将我们需要编译OC的语 ...

  9. node.js 实现一个简单的登录拦截器

    拦截器在web开发中随处可见,比如站点的管理后台,不说所有人都能进入,所以就需要做一个拦截器并友好的跳转到提示页. 下面我们简单实现一种,判断用户是否登录成功,登录不成功的用户自动重定向到登录页面. ...

随机推荐

  1. $2019$ 暑期刷题记录1:(算法竞赛DP练习)

    $ 2019 $ 暑期刷题记录: $ POJ~1952~~BUY~LOW, BUY~LOWER: $ (复杂度优化) 题目大意:统计可重序列中最长上升子序列的方案数. 题目很直接的说明了所求为 $ L ...

  2. 4. jaxp----dom解析器（DocumentBuilderFactory、DocumentBuilder）

    1.DocumentBuilderFactory--解析器工厂(抽象类 javax.xml.parsers.DocumentBuilderFactory) newInstance()  获取 Docu ...

  3. python TypeError: must be str, not bytes错误

    TypeError: must be str, not bytes错误: 解答: 写文件处 f=open(filename, 'w')应该写为 open(filename, 'wb') 读文件时 f= ...

  4. Python---基础---爱因斯坦阶梯问题

    写一个程序,打印出0-100所有奇数 ls = range(0, 101)for i in ls: if i % 2 == 1: print(i)--------------------------- ...

  5. final、finally、 finalize区别

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11444366.html final final可以用来修饰类.方法.变量,分别有不同的意义,final ...

  6. 【leetcode】813. Largest Sum of Averages

    题目如下: 解题思路:求最值的题目优先考虑是否可以用动态规划.记dp[i][j]表示在数组A的第j个元素后面加上第i+1 (i从0开始计数)个分隔符后可以得到的最大平均值,那么可以得到递归关系式: d ...

  7. B/S大文件断点续传

    一. 功能性需求与非功能性需求 要求操作便利,一次选择多个文件和文件夹进行上传:支持PC端全平台操作系统,Windows,Linux,Mac 支持文件和文件夹的批量下载,断点续传.刷新页面后继续传输. ...

  8. linux vim设置和 快捷命令配置

    1.vim配置 set tabstop= set shiftwidth= set softtabstop= set fileencodings=utf-,ucs-bom,gb2312,gbk,gb18 ...

  9. DELPHI 把数据库中的数据转换成XML格式

    function ReplaceString(AString: string): string; begin Result := StringReplace(AString, '&', '&a ...

  10. Best Practices For Running On The PS4

    原文:https://forums.unrealengine.com/showthread.php?54448-Best-Practices-For-Running-On-The-PS4 Hey gu ...