欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JAVA Web07——Ajax

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

目录

 

Ajax

1.实现

2.例子-原生ajax

3.例子-JQuery(推荐)

①ajax,get,post

 ②load

③getJSON()


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