Ajax和JQuery详解

最新推荐文章于 2024-10-01 13:10:41 发布

原创最新推荐文章于 2024-10-01 13:10:41 发布 · 332 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Java #jquery #ajax

javaWeb 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了Ajax和JQuery Ajax的使用，包括Ajax的基本概念、GET和POST请求方式的选择，以及JQuery的核心和相关方法如load(), get()和post()。通过实例展示了如何使用JQuery Ajax校验用户名，并探讨了实现百度搜索提示的功能。" 103949056,6679247,Spring5.0源码学习环境搭建常见问题与解决方案,"['Spring框架', '构建工具', 'Java开发', '源码解析', 'IDE配置']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Ajax

1.Ajax是什么?

“Asynchronous Javascript And XML”（异步JavaScript和XML），
并不是新的技术，只是把原有的技术，整合到一起而已。

 1.使用CSS和XHTML来表示。
 2.使用DOM模型来交互和动态显示。
 3.使用XMLHttpRequest来和服务器进行异步通信。
 4.使用javascript来绑定和调用。

2.Ajax有什么用?

咱们的网页如果想要刷新局部内容。那么需要重新载入整个网页。用户体验不是很好。就是为了解决局部刷新的问题。保持其他部分不动，只刷新某些地方。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

3.Ajax数据 Get请求方式

1.创建对象

function  ajaxFunction(){
 var xmlHttp;
 if (window.XMLHttpRequest) {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
          xmlhttp=new XMLHttpRequest();
       }
        else
              {
                // IE6, IE5 浏览器执行代码
             xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
           }
  return xmlHttp;
 }

发送请求

 function get() {
//1. 创建xmlhttprequest 对象
 var xmlhttp = ajaxFunction();	
//2. 发送请求。
/*	
	参数一： 请求类型  GET or  POST
	参数二： 请求的路径,文件在服务器上的位置 
	参数三： 是否异步， true  or false
*/
   xmlhttp.open("GET" ,"/day16/DemoServlet01" ,true );
xmlhttp.send();
   }
   
// 如果发送请求的同时，还想获取数据，那么代码如下
 function get() {
//1. 创建xmlhttprequest 对象
 var xmlhttp = ajaxFunction();
//2. 发送请求
xmlhttp.open("GET" ,"/day16/DemoServlet01?name=aa&age=18" ,true );


//3. 获取响应数据 注册监听的意思。  一会准备的状态发生了改变，那么就执行 = 号右边的方法
xmlhttp.onreadystatechange = function(){
	//前半段表示 已经能够正常处理。再判断状态码是否是200
	if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
		//弹出响应的信息
		alert(xmlhttp.responseText);
	}
}
xmlhttp.send();
}

4.Ajax数据 Post请求方式

<script type="text/javascript">
//1. 创建对象
function  ajaxFunction(){
   var xmlHttp;
   if (window.XMLHttpRequest) {
             //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
           xmlhttp=new XMLHttpRequest();
        }
         else
               {
                 // IE6, IE5 浏览器执行代码
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
   return xmlHttp;
  }

	 
  function post() {
//1. 创建对象
  var xmlHttp = ajaxFunction();
//2. 发送请求
  xmlHttp.open( "POST", "/day16/DemoServlet01", true );

//3.如果不带数据，写这一行就可以了
//xmlHttp.send();

//3.如果使用的是post方式带数据，那么这里要添加头,说明提交的数据类型是一个经过url编码的form表单数据
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//带数据过去,在send方法里面写表单数据。 
 xmlHttp.send("name=aobama&age=19");
 }
 
</script>

需要获取数据

function post() {
	//1. 创建对象
	var xmlHttp = ajaxFunction();
	//2. 发送请求
	xmlHttp.open( "POST", "/day16/DemoServlet01", true );
	
	//想获取服务器传送过来的数据， 加一个状态的监听。 
	xmlHttp.onreadystatechange=function(){
		if(xmlHttp.readyState==4 && xmlHttp.status == 200){
			alert("post："+xmlHttp.responseText);
		}
	}

//如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
	xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	//带数据过去  ， 在send方法里面写表单数据。 
	xmlHttp.send("name=aobama&age=19");
}

5.使用GET 还是 POST方式？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）

向服务器发送大量数据（POST没有数据量限制）

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

6.使用JQuery ajax校验用户名是否可用(修改前面的代码）

搭建环境
页面准备

<body>
	<table border="1" width="500">
	<tr>
		<td>用户名:</td>
		<td><input type="text" name="name" id="name"  onblur="checkUserName()"><span id="span01"></span></td> 
	</tr>
	<tr>
		<td>密码</td>
		<td><input type="text" name=""></td>
	</tr>
	<tr>
		<td>邮箱</td>
		<td><input type="text" name=""></td>
	</tr>
	<tr>
		<td>简介</td>
		<td><input type="text" name=""></td>
	</tr>
	<tr>
		<td colspan="2"><input type="submit" value="注册"></td>
	</tr>
	</table>
</body>

function checkUserName() {

//获取输入框的值 document 整个网页
var name = document.getElementById("name").value; 
//1. 创建对象
var request = ajaxFunction();

//2. 发送请求
request.open("POST","/day16/CheckUserNameServlet", true );

//注册状态改变监听，获取服务器传送过来的数据
request.onreadystatechange = function(){	
  if(request.readyState == 4 && request.status == 200){
	//如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性
	var data = request.responseText;
	if(data == 1){
		//alert("用户名已存在");
		document.getElementById("span01").innerHTML = "<font color='red'>用户名已存在!</font>";
	}else{
		document.getElementById("span01").innerHTML = "<font color='green'>用户名可用!</font>";
		//alert("用户名未存在");
	}
}	
}
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name="+name);
}

数据库准备
Servlet代码

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
	//处理post请求 的编码问题 
	request.setCharacterEncoding("UTF-8");
	
	//1. 检测是否存在
	String name = request.getParameter("name");
	System.out.println("name="+name);
	
	UserDao dao = new UserDaomImpl();
	boolean isExist = dao.checkUserName(name);
	
	//2.  通知页面，到底有还是没有。
	if(isExist){
		response.getWriter().println(1);  //存在用户名
	}else{
		response.getWriter().println(2); //不存在该用户名
	}
	
} catch (SQLException e) {
	e.printStackTrace();
}
}

Dao代码

public class UserDaomImpl implements UserDao{
@Override
public boolean checkUserName(String username) throws SQLException {
	QueryRunner runner = new QueryRunner(JDBCUtil.getDataSource());	
	String sql = "select count(*) from t_user where username =?";
	
	runner.query(sql, new  ScalarHandler(), username);

	Long result = (Long) runner.query(sql, new  ScalarHandler(), username); 
	return result > 0 ;
}
}

二、JQuery Ajax

1.JQuery是什么?

javascript DOM的代码框架。

2.JQuery有什么用?

简化代码，提高效率。

3.JQuery核心

write less , do more , 写得更少，做的更多。

4.JQuery load( )方法

load()方法从服务器加载数据，并把返回的数据放入被选元素中.
格式： $(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
<a href="" onclick="load()">使用JQuery执行load方法</a>

//有两次刷新,先走 onClick的方法，取到数据回来之后，赋值显示。 接着 走 href=""的路径，
但是这个属性没有给值，所以会把当前的页面重新再刷新一次。所以导致看不见值。

//找到这个元素，去执行加载的动作，加载/day16/DemoServlet02,得到的数据，赋值显示

//responseTxt - 包含调用成功时的结果内容
// statusTXT - 包含调用的状态
// xhr - 包含 XMLHttpRequest 对象
   
$("#aaa").load("/day16/DemoServlet02" , function(responseText , statusTXT  , xhr) {
//找到id为aaa的元素， 设置它的value属性值为 responseText 对应的值
		$("#aaa").val(responseText);
	});

JQuery使用Get方式

$.get("/day16/DemoServlet02"  , function(data ,status) {
		$("#div01").text(data);
	});

赋值显示

val("aa");

只能放那些标签带有value属性
html("aa"); —>写html代码
text("aa");

其实没有什么区别，如果想针对这分数据做html样式处理，那么只能用html()

JQuery 中的load( ) & get( )请求方法

load( )

$("#元素id").load(url地址);
$("#div1").load(serlvet); ---> 使用的get请求，回来赋值的时候， 使用text（）;去赋值

get语法格式：$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
使用案例：

$.get("/day16/DemoServlet02"  , function(data ,status) {
  $("#div01").text(data);
});

JQuery post请求

语法格式：$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.post() 连同请求一起发送数据：

function post() {
	$.post("/day16/DemoServlet02",{name:"zhangsan",age:18},
	function(data,status) {
		//想要放数据到div里面去。 --- 找到div
		$("#div01").html(data);
	});
}

案例：使用JQuery ajax实现校验用户名

function checkUserName() {
	//1. 获取输入框的内容
	var name = $("#name").val();
	//2. 发送请求
	$.post("/day16/CheckUserNameServlet" , {name:name} , function(data , status){
		if(data == 1){//用户名存在,不可使用 
			$("#span01").html("<font color='red'>用户名已被注册</font>");
		}else{
			//alert("用户名可用");
			$("#span01").html("<font color='green'>用户名可以使用</font>");
		}
	} );
	//3. 输出响应的数据到页面上。
}

实现百度搜索提示

搭建环境

定义首页

<body>
  <center>
  <h2>百度</h2>
   <input type="text" name="word" id="word" style="width: 600px ; height: 50px  ;font-size: 20px;">
   <input type="button" value="百度一下"  style="height: 55px ; width: 100px ; ">
  <div id="div01" style="position:relative; left : -54px; width: 600px; height: 200px ; border:  1px solid     blue; display: none"></div>
  </center>
</body>

js代码

//捕获键盘弹起
 $(function(){
  $("#word").keyup(function() {
alert("键盘弹起了..");
  })
JS请求

$(function(){
$("#word").keyup(function() {
	//2。 获取输入框的值 
	//var word = $("#word").val();
	//this  对应就是执行这个方法的那个对象， $("#word")
	var word = $(this).val();

	if(word == ""){
		$("#div01").hide();
	}else{
		//3. 请求数据。
		$.post("find",{word:word} ,function(data , status){
			//alert(data);
			$("#div01").show();
			$("#div01").html(data);
		});
	}	
})
});

3.Servlet代码

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
         //处理 post请求编码问题 
request.setCharacterEncoding("utf-8");
try {
	//1. 先获取参数
	String word = request.getParameter("word");
	System.out.println("word="+word);
	
	//2. 让dao执行查询
	WordsDao dao = new WordsDaoImpl();
	List<WordBean> list = dao.findWords(word);
	
	for (WordBean wordBean : list) {
		System.out.println("==="+wordBean.toString());
	}
	
	request.setAttribute("list", list);
	
	//3. 返回数据
	response.setContentType("text/html;charset=utf-8");
	//response.getWriter().write("数据是：");
	request.getRequestDispatcher("list.jsp").forward(request, response);
} catch (SQLException e) {
	e.printStackTrace();
}
}

4.WordsDao.java

public interface WordsDao {
  List<WordBean> findWords(String word) throws SQLException;
}

5.WordDaoImpl.java

public class WordsDaoImpl implements WordsDao{
@Override
public List<WordBean> findWords(String word) throws SQLException {
  QueryRunner runner = new QueryRunner(JDBCUtil02.getDataSource());
  String sql = "select * from words where words like ?  limit ?";
  return runner.query(sql, new BeanListHandler<WordBean>(WordBean.class) , word+"%" , 5);
}

6.WordBean.java

public class WordBean {

private int id;
private String words;
public int getId() {
return id;
}
public void setId(int id) {
  this.id = id;
}
public String getWords() {
  return words;
 }
public void setWords(String words) {
  this.words = words;
}
@Override
public String toString() {
  return "WordBean [id=" + id + ", words=" + words + "]";
}

7.list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
 
<table style="width: 100%">
	<c:forEach items="${list }" var="wordBean">
		<tr>
			<td>${wordBean.words}</td>
		</tr>
	</c:forEach>
</table>