神奇的Ajax

槿辰_00

已于 2022-04-25 21:56:46 修改

阅读量296

点赞数 1

文章标签： java eclipse jar

于 2022-04-25 21:51:20 首次发布

本文链接：https://blog.csdn.net/cxy_06/article/details/124415291

版权

1.Ajax: 不刷新整个页面，只刷新局部

1.1无刷新的好处：

1.1.1 提供连续的用户体验

1.1.2提供类似C/S的交互效果，操作更方面

2.常用属性:

2.1onreadystatechange：指定回调函数 readystate: XMLHttpRequest的状态信息

2.2status：HTTP的状态码

2.3 responseText：获得响应的文本内容

2.4responseXML：获得响应的XML文档对象

3.使用Ajax：

技术实现异步交互

创建XMLHttpRequest对象

通过 XMLHttpRequest对象设置请求信息

向服务器发送请求创建回调函数，根据响应状态动态更新页面

代码块

登录login

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function  login() {
		//接收用户名
		var uname = document.getElementById("uname").value;
		var upwd = document.getElementById("upwd").value;
		//声明一个xmlhttpRequest对象
		var xmlhttp;
		try{
			xmlhttp=new ActiveObject("Microsoft.XMLHTTP");
		}
		catch(e){
			xmlhttp=new XMLHttpRequest();
		}
		//连接服务器
		xmlhttp.open("post","LoginServlet?uname="+uname+"&upwd="+upwd,true);
		//设置请求头信息
		xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		//设置回调函数
		xmlhttp.onreadystatechange=function(){
			//判断请求响应结束
			if(xmlhttp.readyState==4){
				//服务器正常
				if(xmlhttp.status==200){
					//接收响应的数据
					var str = xmlhttp.responseText;
					if(str=="ok"){
						document.getElementById("sp").innerHTML="✔";
					}else{
						document.getElementById("sp").innerHTML="×";
					}
				}
			}
		}
		//发送
		xmlhttp.send(null);
	}
	
</script>
</head>
<body>
<form action="">
		用户名：<input type="text" id="uname"><br>
		密码：<input type="password" id="upwd" onblur="login()"><br>
		<span id="sp"></span>
		<input  type="submit" value="登录">
		<input  type="reset" value="重置">
</form>
</body>
</html>

package com.zking.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.zking.dao.T277Dao;
import com.zking.entity.T277;

/**
 * Servlet implementation class LoginServlet
 */
@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		System.out.println("来了 老弟");
		//接收数据
		String uname = request.getParameter("uname");
		String upwd = request.getParameter("upwd");
		String uinfo = request.getParameter("uinfo");
		System.out.println("uname:"+uname);
		System.out.println("upwd:"+upwd);
		request.setCharacterEncoding("utf-8");
		
		//获取响应的 输出流
		PrintWriter out = response.getWriter();
		T277Dao dd = new T277Dao();
		ArrayList<T277> tt = dd.getAll();
		int c = 0;
		for (int j = 0; j < tt.size(); j++) {
			if(tt.get(j).getUname().equals(uname) && tt.get(j).getUpwd().equals(upwd)) {
				c=1;
				break;
			}else {
				c=2;
			}
			}
			if(c==1) {
				out.print("ok");
			}else {
				out.print("no");
			}
			out.close();
		}
			
		
	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

槿辰_00

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
神奇的Ajax

1.Ajax: 不刷新整个页面，只刷新局部1.1无刷新的好处：1.1.1 提供连续的用户体验1.1.2提供类似C/S的交互效果，操作更方面2.常用属性:2.1onreadystatechange：指定回调函数 readystate: XMLHttpRequest的状态信息2.2status：HTTP的状态码 2.3responseText：获得响应的文本内容2.4responseXML：获得响应的XML文档对象3.使用Ajax：技术实现异步交互创建...
复制链接

扫一扫