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


相关推荐

  • php 0xffffffff,0xffffffff – 依睛(IT blog) 我回来了，PHPC/C++ LINUX – IT博客「建议收藏」

    php 0xffffffff,0xffffffff – 依睛(IT blog) 我回来了，PHPC/C++ LINUX – IT博客「建议收藏」

    php 0xffffffff,0xffffffff – 依睛(IT blog) 我回来了，PHPC/C++ LINUX – IT博客「建议收藏」今早ssjjll问我一个位操作的问题，原本以为非常easy的，可是程式的输出总是不尽人意。开始认为是编译器的错误，后来看文件才知道是自己学业不精，乃功力不足所致。失望！对C我一直认为全掌控了，而C++也练到了7、8重的境界，不料今日还是阴沟翻船。记下来，勿忘瓜耻！先看出现问题的代码：inta=32;intx=0xFFFFFFFF;cout<<int(0xFFFFFFFF…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年5月17日
  • java把string转int类型_java把String类型转换为int类型的方法

    java把string转int类型_java把String类型转换为int类型的方法

    java把string转int类型_java把String类型转换为int类型的方法java把String类型转换为int类型的方法发布时间：2020-08-2014:32:03来源：亿速云阅读：73作者：小新这篇文章将为大家详细讲解有关java把String类型转换为int类型的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。在java中，实现String类型转换为int类型的方法有：Integer.parseInt(String)方法、…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年10月28日
  • java最简单最全入门基础笔记(不简单，不全你打我)「建议收藏」

    java最简单最全入门基础笔记(不简单，不全你打我)「建议收藏」

    java最简单最全入门基础笔记(不简单，不全你打我)「建议收藏」刚开始学习java的时候，可能是一头雾水，不知道从何学起，这里跟大家分享一下!(仅仅只供初级学者学习，大佬勿喷)一、初始java1.生活中的程序：从起床到教室上课的过程穿衣打扮》起床》洗漱》出宿舍》》吃早餐》到教室按照特定的顺序去完成某一件事的过程我们叫做生活中的程序2.计算机中的程序:一组有序指令的集合,需要和计算机交流就要使用计算机语言，java就是计算机语言的一种3.java…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年6月4日
  • 防雷

    防雷

    防雷

    全栈程序员-用户IM 全栈程序员-用户IM
    2021年8月25日
  • 加入购物车怎么操作_买家加入购物车不买怎么办

    加入购物车怎么操作_买家加入购物车不买怎么办

    加入购物车怎么操作_买家加入购物车不买怎么办ShoppingCart.javapackagecom.aff.bookstore.domain;importjava.util.Collection;importjava.util.Ha

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年8月1日
  • opencv rectangle函数(python连接opencv库)

    opencv rectangle函数(python连接opencv库)

    因为做程序图像剪切一直不太明白是怎么切片的，这里就用cv2.rectangle这个函数来看一下opencv是怎么计量图像的坐标轴的。opencv官网上给出的cv2.rectangle函数定义如下：Python:cv2.rectangle(img,pt1,pt2,color[,thickness[,lineType[,shift]]])→Noneimg–…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年4月14日

发表回复

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

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