AJAX - 实现一个简单的登录验证
2024-08-28 00:56:40
/**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
最新文章
- deepsooncms在Ubuntu 14.04上部署教程
- JVM快速学习
- linux下安装python
- CGGeometry Reference (一)
- 最小集合(51nod 1616)
- loghelper.cs 代码
- spark新能优化之数据本地化
- systick优先级的理解
- Android RelativeLayout
- SDK Manager.exe 无法启动,一闪而过的解决办法
- Android开发app如何设定应用图标下的应用名称为汉字以及自定义图标
- decode()与case then 学习与使用
- Median of Two Sorted Arrays (找两个序列的中位数,O(log (m+n))限制) 【面试算法leetcode】
- 类与对象 - PHP手册笔记
- 原生js实现 五子棋
- 利用ZYNQ SOC快速打开算法验证通路(2)——数据传输最简方案:网络调试助手+W5500协议栈芯片
- static(静态)关键字
- 【工具大道】ssh登录Linux服务器,并显示图形化界面
- Exception in Spark
- 2017ICPC南宁赛区网络赛 Train Seats Reservation (简单思维)
热门文章
- Vuex 学习笔记一
- C++数组读入MATLAB数据
- Codeforces 512B: Fox And Jumping
- 使用vue进行国际化
- LeetCode--057--插入区间(java)
- common pom
- Springboot ,1开启配置与2.扫描包(控制层,service层)二个注解@EnableAutoConfiguration,@ComponentScan 合并成一个注解@SpringBootApplication
- 四-3、Mirror(镜像)、Spin(旋转)、创建组
- QGIS SDK下载
- HelloServlet类继承HttpServlet利用HttpServletResponse对象