1. 全栈程序员必看首页

Ajax练手小案例

全栈程序员-用户IM • • 未分类

Ajax练手小案例一、Ajax介绍1、Ajax不是一项具体的技术，而是几门技术的综合应用。Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest。2、Ajax核心只不过是要在javascript中调用一个叫XMLHttpRequest类，这个类可以与Web服务器使用HTTP协议进行交互，程序不通过浏览器发出请求，而是用这个特殊的JavaScript对象发送请求和接收…

大家好，又见面了，我是你们的朋友全栈君。

一、Ajax介绍

 

1、Ajax不是一项具体的技术，而是几门技术的综合应用。

Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest。

2、Ajax核心只不过是要在javascript中调用一个叫XMLHttpRequest类，这个类可以与Web服务器使用HTTP协议进行交互，程序不通过浏览器发出请求，而是用这个特殊的JavaScript对象发送请求和接收响应。

3、XMLHttpRequest对象在网络上的俗称为Ajax对象。

4、一种不用刷新整个页面便可与服务器通讯的办法(更新网页部分数据)。

Ajax练手小案例

普通浏览器交互方式和基于Ajax技术的交互方式（图解）：

Ajax练手小案例

Ajax练手小案例

 

AJAX缺陷：

1，AJAX大量使用了Javascript和AJAX引擎，而这个取决于浏览器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla虽然也支持AJAX，但是提供XMLHttpRequest的方式不一样。所以，使用AJAX的程序必须测试针对各个浏览器的兼容性。

2，AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。

3，对流媒体的支持没有FLASH、JavaApplet好:Html5+jQuery。 

二、通过简单的一个小案例说明Ajax

首先，项目结构。

Ajax练手小案例

1、先写JdbcUtil类

package util;

import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.Properties;

//  连接数据库
public class JdbcUtil {
	private static Properties p = new Properties();
	static {
		try {
			ClassLoader loader = Thread.currentThread().getContextClassLoader();
			// 从classpath的跟路径去寻找db.properties
			InputStream inStream = loader.getResourceAsStream("db.properties");
			p.load(inStream); // 加载
		} catch (IOException e) {
			throw new RuntimeException("加载classpath路径下的db.properties文件失败", e);
		}
		// 1加载注册驱动
		try {
			Class.forName(p.getProperty("DriverName"));
			System.out.println("加载数据驱动正常");
		} catch (Exception e) {
			throw new RuntimeException("数据库驱动加载失败", e);
		}
	}
	// 返回创建好的Connection对象,用静态的这种方式应该把构造器私有化起来
	public static Connection getConn() {
		try {
			System.out.println("连接数据库正常");
			// 2获取连接对象
			return DriverManager.getConnection(p.getProperty("url"), p.getProperty("username"),
					p.getProperty("password"));
		} catch (Exception e) {
			e.printStackTrace();
		}
		throw new RuntimeException("数据库连接异常");
	}
	// 5):释放资源
	public static void close(Connection conn, Statement st, ResultSet re) {
		try {
			if (re != null) {
				re.close();
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			try {
				if (st != null) {
					st.close();
				}
			} catch (Exception e) {
				e.printStackTrace();
			}
			try {
				if (conn != null) {
					conn.close();
				}
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
	}
	private JdbcUtil() {}
}

 

2、先写domain

 

package domain;
public class User {
	private int id;
	private String username;
	private String password;
	
	public User() {
		super();
	}
	
	public User(String username, String password) {
		super();
		this.username = username;
		this.password = password;
	}

	public User(int id, String username, String password) {
		super();
		this.id = id;
		this.username = username;
		this.password = password;
	}

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public String getUsername() {
		return username;
	}

	public void setUsername(String username) {
		this.username = username;
	}

	public String getPassword() {
		return password;
	}

	public void setPassword(String password) {
		this.password = password;
	}

	@Override
	public String toString() {
		return "User [id=" + id + ", username=" + username + ", password=" + password + "]";
	}
}

 

3、在dao层写方法

 

package dao;


public interface IUserDao {
	/**
	 * ajax 注册
	 * @param userName
	 * @return
	 */
	public long GetCountWithName(String username);
}

在UserDaoImpl写方法的实现。

package dao.impl;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

import dao.IUserDao;
import util.JdbcUtil;

public class UserDaoImpl implements IUserDao{
	@Override
	public long GetCountWithName(String username) {
		int cnt = 0;
		String sql = "SELECT count(1) cnt  FROM  t_user WHERE username = ?";
		Connection conn = null;
		PreparedStatement ps =null;
		ResultSet rs = null;
		System.out.println(username);
		try {//  获取语句
			 conn = JdbcUtil.getConn();
			 ps = conn.prepareStatement(sql);
			 //  设置占位符
			 ps.setString(1, username);  // 需要username参数
			 rs=  ps.executeQuery();
			 
			 while(rs.next()) {
				cnt  = rs.getInt("cnt");
				return cnt;
			 }
		} catch (Exception e) {
			e.printStackTrace();
		}finally {
			JdbcUtil.close(conn, ps, rs);
		}
		return cnt;
	}
}

在这里会涉及到数据库，数据库非常简单，里面就放username一个字段就可以测试效果。
 

4、写IUserService接口

package service;


public interface IUserService {
	/**
	 *   ajax登录
	 * @param userName
	 * @return
	 */
	public long GetCountWithName(String userName);
}

UserServiceImpl.java

package service.impl;

import dao.IUserDao;
import dao.impl.UserDaoImpl;
import service.IUserService;

public class UserServiceImpl implements IUserService {
	
	private IUserDao dao = new UserDaoImpl();
	@Override
	public long GetCountWithName(String userName) {
		
		return dao.GetCountWithName(userName);
	}
}

5、AjaxServlet处理前端请求

package controller;

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;

import service.IUserService;
import service.impl.UserServiceImpl;

@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet{
	private static final long serialVersionUID = 1L;
	private IUserService userService = new UserServiceImpl();

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("请求到AjaxServlet");
		response.setCharacterEncoding("utf-8");
		PrintWriter pw = response.getWriter();
		
		String username=request.getParameter("username");
		System.out.println(username);
		long count = userService.GetCountWithName(username);
		if(count>0){
//			request.setAttribute(name, o);   //  不能用这个req进行跳转（整个页面进行刷新）
			pw.println(username + "已注册");
			pw.flush();
			System.out.println("不可以注册" + username);
		}else{
			pw.println(username+"可以注册");
			System.out.println("可以注册" + username);
			pw.flush();
		}
		pw.close();
	}
	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		this.doGet(request, response);
	}
}

6、AJAX的GET请求

<%@ page language="java" contentType="text/html; charset=UTF-8"   pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!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>AJAX的   GET  请求</title>
<script type="text/javascript">
	var xmlHttp;
	
	//创建ajax的核心对象creatxmlhttpRequest
	function createXMLhttpRequest() {
		xmlHttp = new XMLHttpRequest();
	}
	
	function check() {
		var username = document.getElementById("username").value;
		// 发送请求
		sendRequest("${pageContext.request.contextPath}/AjaxServlet?username=" + username);
	}
	function sendRequest(url) {
		createXMLhttpRequest();
		xmlHttp.open("get",url,true);  //  true 就是异步NN
		//   send()里面也可以指定发送内容
		xmlHttp.send(null);   //  发送
		xmlHttp.onreadystatechange=callBack;   //回调函数
	  
	}
    function callBack(){
    	 //当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
 	   if(xmlHttp.readyState==4  && xmlHttp.status==200){
 		  var uname=xmlHttp.responseText;  //返回的内容:且字符串的方式返回
 		 	 var div=document.getElementById("result");
 		  		div.innerHTML=uname;
 	   }
    }
</script>
</head>
<body>
<h3>Ajax的Get请求</h3>
	<form action="" method="get">
		用户名:<input type="text" name="username"  onblur="check()"  id="username">
		 <div id="result"></div><br> 
	</form>
</body>
</html>

Get请求效果图：

Ajax练手小案例Ajax练手小案例

7、Ajax的Post请求

<%@ 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>Ajax的Post请求</title>
<script type="text/javascript">
	var xmlHttp;
	var username;
	//创建ajax的核心对象creatxmlhttpRequest
	function createXMLhttpRequest() {
		xmlHttp = new XMLHttpRequest();
	}
	
	function check() {
		username = document.getElementById("username").value;
		// 发送请求
		sendRequest("${pageContext.request.contextPath}/AjaxServlet");
	}
	function sendRequest(url) {
		createXMLhttpRequest();
		xmlHttp.open("post",url,true);  //  true 就是异步
		
		//post提交,必须设置一下header头信息
  		xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		
		//send()里面指定发送内容
		xmlHttp.send("username=" + username);   //  发送
		xmlHttp.onreadystatechange=callBack;   //回调函数
	  
	}
    function callBack(){
    	 //当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
 	   if(xmlHttp.readyState==4  && xmlHttp.status==200){
 		  var uname=xmlHttp.responseText;  //返回的内容:且字符串的方式返回
 		 	 var div=document.getElementById("result");
 		  		div.innerHTML=uname;
 	   }
    }
</script>
</head>
<body>
	<h3>Ajax的doPost请求</h3>
	<form action="" method="post">
		用户名:<input type="text" name="username"  onblur="check()"  id="username">
		 <div id="result"></div><br> 
	</form>
</body>
</html>

Post请求效果图：

Ajax练手小案例Ajax练手小案例

三、总结

例子虽小，但是ajax的Get和Post请求全部已实现。

注意：在写ajax项目时，一定要注意回调函数的XMLHttpRequest大小写问题。

 

源码：Ajax源码。本想着0积分的，但是没有0积分选项，有积分想下载就下载，不想下载评论区留言，我发你邮箱。

如果你完全复制我的代码，还报错，这个时候很有可能是环境问题，因为我都是测试了好几遍完全正确才截图的，有问题欢迎留言讨论。

 

如果有不同看法，或者是文中写错的地方，麻烦大佬留言指正文章错误，谢谢！！！ 

版权声明：本文为博主原创文章，未经博主允许不得转载。

原文出处：https://blog.csdn.net/BlackPlus28/article/details/80925156

 

 

 

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/147268.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

赞 (0)
全栈程序员-用户IM全栈程序员-用户IM
0 0
blank

相关推荐

  • 溢出OF和进位CF标志位的判定

    溢出OF和进位CF标志位的判定

    溢出OF和进位CF标志位的判定一、学习CF与OF，要始终牢记一点。CF是无符号数溢出标志，OF是有符号数溢出标志。通俗一点说就是，即使有符号数相加/相减导致了CF=1也没什么意义，不能说明结果的正确与否。此时，OF=1，则说明结果溢出，出现错误；OF=0，说明结果正确。这个过程根本和CF没关系，CF=1/0，都不会影响。同理也可以得出OF对无符号数也无影响。举个例子：[9-6]补=[9]补-[6]补=[9]补+[-6]补[9]…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年7月12日
  • EC20开发流程[通俗易懂]

    EC20开发流程[通俗易懂]

    EC20开发流程[通俗易懂]EC20开发流程一、环境二、编译工具的使用三、准备工作四、编写代码五、烧录程序一、环境1、虚拟机ubuntu16.042、ql-ol-sdk对应的编译工具二、编译工具的使用1、将ql-ol-sdk.tar压缩包解压到虚拟机中的路径（最好是U盘挂载后，直接从U盘中解压过去），之后再在终端中ql-ol-sdk/ql-ol-crosstool$sourceql-ol-crosstool-e…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年10月22日
  • 大数据监控平台实践之路

    大数据监控平台实践之路

    大数据监控平台实践之路大数据监控平台实践之路一、监控体系业务层：应用层：系统层：二、架构设计Telegraf：input：output：调度频率：服务启动：InfluxDB：服务启动：常用命令：Grafana：Grafana主要特性：简单使用介绍：原文地址：大数据监控平台实践之路一、监控体系监控粒度、监控指标完整性、监控实时性是评价监控系统的三要素。从分层体系可以把监控系统分为三个层次：业务层：业务系统…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年5月27日
  • Pikachu-XXE「建议收藏」

    Pikachu-XXE「建议收藏」

    Pikachu-XXE「建议收藏」0x00XXE-“xmlexternalentityinjection”既”xml外部实体注入漏洞”。概括一下就是”攻击者通过向服务器注入指定的xml实体内容,从而让服务器按照指定的配置进行执行,导致问题”也就是说服务端接收和解析了来自用户端的xml数据,而又没有做严格的安全控制,从而导致xml外部实体注入。现在很多语言里面对应的解析xml的函数默认是禁止解析外部实体内容的,从…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年5月24日
  • java打印数组全部内容_java迭代数组

    java打印数组全部内容_java迭代数组

    java打印数组全部内容_java迭代数组今天输出数组遇到问题，学习一下打印输出数组内容的几种方式错误示范：System.out.println(array);　　//这样输出的是数组的首地址，而不能打印出数组数据。（唉，我开始就是这么写的。。。）一维数组：int[]array={1,2,3,4,5,6};方式一：for循环for(inti=0;i<array.length;i++){System.out.println(array[i]);}输出为：（自动换行格式的）方式二：for

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年10月7日
  • 深入剖析MSAA_MSA分析报告

    深入剖析MSAA_MSA分析报告

    深入剖析MSAA_MSA分析报告本文打算对MSAA(Multisampleantialiasing)做一个深入的讲解，包括基本的原理、以及不同平台上的实现对比（主要是PC与Mobile）。为了对MSAA有个更好的理解，所以写下了

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年8月3日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号