JAVA Web07——Ajax

程序员文章站 2022-03-23 11:12:55

一、Ajax异步刷新：如果网页中某一个地方需要修改，异步刷新可以使：只刷新该需要修改的地方，而页面中其他地方保持不变。例如：百度搜索框，视频的点赞1.实现js：XMLHttpRequest对象XMLHttpRequest对象的方法：open(方法名（提交方式get|post），服务器地址，true)：与服务端建立连接send()：get：send(null)post：send(参数值)setRequestHeader(header,value)：get：不需...

Ajax

1.实现

Ajax

异步刷新：如果网页中某一个地方需要修改，异步刷新可以使：只刷新该需要修改的地方，而页面中其他地方保持不变。

例如：百度搜索框，视频的点赞

1.实现

js：XMLHttpRequest对象

XMLHttpRequest对象的方法：

open(方法名（提交方式get|post），服务器地址，true)：与服务端建立连接
send()：
- get：send(null)
- post：send(参数值)
setRequestHeader(header,value)：
- get：不需要设置此方法
- post：需要设置：
  - a：如果请求元素中包含了文件上传：
    setRequestHeader("Content-Type","multipart/form-data")
  - b：不包含文件上传
    setRequestHeader("Content-Type","application/x-www-form-urlencoded")

XMLHttpRequest对象的属性：

readyState：请求状态
readyState表示 XMLHttpreRequest对象发送的HTP请求状态，共有五种状态，只有状态为4代表请求完毕

HTTP请求状态
状态值	简介
0	表示XMLHttpRequest对象没有初始化
1	表示XMLHttpRequest对象开始发送请求：已经执行了open()方法并完成了相关资源的准备
2	表示XMLHttpRequest对象已将请求发送完毕：已经执行了send()方法来发送请求，但是还没有收到响应
3	表示XMLHttpRequest对象开始读取相应信息：已经接收到HTTP响应的头部信息，但是还没有将相应体接收完毕
4	表示XMLHttpRequest对象将响应信息全部读取完毕

status：响应状态
status表示HTTP响应中的状态码，只有状态码为200时才表示响应成功；否则，说明HTTP响应不正常

HTTP响应状态码
状态码	含义
200	服务器正常响应
400	无法找到请求的资源
403	没有访问权限
404	访问的资源不存在
500	服务器内部错误，很可能是服务器代码有错

onreadystatechange：回调函数
responseText：相应格式为String
responseXML：相应格式为XML

2.例子-原生ajax

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function registerPost(){
		var mobile = document.getElementById("mobile").value
		//通过ajax异步方式请求服务端
		xmlHttpRequest = new XMLHttpRequest();
		xmlHttpRequest.open("post","MobileServlet",true);
		
		//设置xmlHttpRequest对象的回调函数
		xmlHttpRequest.onreadystatechange = callBack;
		
		//设置post方式的头信息
		xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		xmlHttpRequest.send("mobile="+mobile);//k=v
	}
	
	function registerGet(){
		var mobile = document.getElementById("mobile").value
		alert(mobile)
		//通过ajax异步方式请求服务端
		xmlHttpRequest = new XMLHttpRequest();
		xmlHttpRequest.open("get","MobileServlet?mobile="+mobile,true);
		
		//设置xmlHttpRequest对象的回调函数
		xmlHttpRequest.onreadystatechange = callBack;
		
		//设置post方式的头信息，get不需要
		//xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		xmlHttpRequest.send(null);//k=v
	}
	
	//定义回调函数（接收服务端的返回值）
	function callBack(){
		if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
			//接收服务端返回的数据
			var data = xmlHttpRequest.responseText;//服务端返回值为String格式
			if(data=="true"){
				alert("此号码已存在");
			}else{
				alert("注册成功！");
			}
		}else{
			
		}
	}
</script>
</head>
<body>
	电话：<input type="text" name="mobile" id="mobile"><br>
	<input type="button" onclick="registerGet()" value="注册">
</body>
</html>

MobileServlet.java

package com.stx.servlet;

import java.io.IOException;
import java.io.PrintWriter;

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

public class MobileServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html; charset=UTF-8");
		String mobile = request.getParameter("mobile"); 
		
		PrintWriter out = response.getWriter();
		//假设此时数据库中只有一个号码：12345123456
		System.out.println(request.getParameter("mobile"));
		if("12345123456".equals(mobile)) {
			out.write("true");	//servlet以输出流的方式将信息返回给客户端
		}else {
			out.write("false");
		}
		out.close();
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

3.例子-JQuery（推荐）

①ajax,get,post

$.ajax({
url:服务器地址,
请求方式:get|post,
data:请求数据,
success:function(result,testStatus){

  },
error:function(xhr,errorMessage,e){

  }
});

$ajax.get(
服务器地址,
请求数据,
function(result){

},
预期返回值类型(string/xml/text)
);

$.post(
服务器地址,
请求数据,
function(result){

},
预期返回值类型(string/xml/text)
);

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
	function register(){
		var $mobile = $('#mobile').val();
		
		/*
		$.ajax({
		    url:"MobileServlet",
		    data:"mobile="+$mobile,
		    success:function(result,testStatus){
		    	if(result=="true"){
					alert("此号码已存在");
				}else{
					alert("注册成功！");
				}
		    },
		    error:function(xhr,errorMessage,e){
				alert("系统异常！");
		    }
		});
		*/
		
		/*
		$.post(
		    "MobileServlet",	
		    "mobile="+$mobile,
		    function(result){
				if(result=="true"){
					alert("此号码已存在");
				}else{
					alert("注册成功！");
				}
		    },
		    "text"
		);
		*/
		
		$.get(
		    "MobileServlet",	
		    "mobile="+$mobile,
		    function(result){
				if(result=="true"){
					alert("此号码已存在");
				}else{
					alert("注册成功！");
				}
		    }
		);
		
	}
</script>
</head>
<body>
	电话：<input type="text" name="mobile" id="mobile"><br>
	<input type="button" onclick="register()" value="注册">
</body>
</html>

②load

$(xxx).load(
服务器地址,
请求数据
);

将服务器的返回值直接加载到$(xxx)所选择的元素中

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
	function register(){
		$("#tip").load(
		    "MobileServlet",	
		    "mobile="+$mobile
		);
		
	}
</script>
</head>
<body>
	电话：<input type="text" name="mobile" id="mobile"><br>
	<input type="button" onclick="register()" value="注册">
	<span id="tip"></span>
</body>
</html>

修改MobileServlet：

if("12345123456".equals(mobile)) {
	//out.write("true");	//servlet以输出流的方式将信息返回给客户端
	out.write("注册失败，号码已存在");
}else {
	//out.write("false");
	out.write("注册成功");
}

③getJSON()

$.getJSON(
服务器地址,
JSON格式的请求数据,
function(result){

}
);

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
	function register(){
		var $mobile = $('#mobile').val();
		
		$.getJSON(
		    "MobileServlet",	
		    {"mobile":$mobile},
		    function(result){
				if(result.msg=="true"){
					alert("此号码已存在");
				}else{
					alert("注册成功！");
				}
		    }
		);
	}
</script>
</head>
<body>
	电话：<input type="text" name="mobile" id="mobile"><br>
	<input type="button" onclick="register()" value="注册">
	<span id="tip"></span>
</body>
</html>

修改MobileServlet：

if("12345123456".equals(mobile)) {
	//out.write("true");	//servlet以输出流的方式将信息返回给客户端
	//out.write("注册失败，号码已存在");
	//如果客户端是getJSON(),则需要以json格式返回数据
	out.write("{\"msg\":\"true\"}");//"msg":"true"
}else {
	//out.write("false");
	//out.write("注册成功");
	out.write("{\"msg\":\"false\"}");//"msg":"false"
}

本文地址：https://blog.csdn.net/qiao39gs/article/details/109175872

上一篇： SSM框架篇：SpringMVC响应数据&结果视图

下一篇：【ASP.NET MVC系列】浅谈NuGet在VS中的运用

JAVA Web07——Ajax

Ajax

1.实现

2.例子-原生ajax

3.例子-JQuery（推荐）

①ajax,get,post

②load

③getJSON()

jquery实现Ajax请求的几种常见方式总结

java abstract class interface之间的区别介绍

java 实现线程同步的方式有哪些

Java overload和override的区别分析

java匿名内部类实例简析

java面向对象基础_final详细介绍

java/word+fusionchart生成图表深入分析

java集合框架 arrayblockingqueue应用分析

java代理 jdk动态代理应用案列

java开发_图片截取工具实现原理