Ajax

1.Ajax异步刷新

在这里插入图片描述

Ajax的工作流程

Jsp页面通过js向服务器（servlet）发送请求获取到数据，将数据获取到js中，js将数据显示到jsp页面中（document来操作element），最后以HTML的形式响应给浏览器。在这里插入图片描述

原生ajax（js实现的ajax）

实现思路
Jsp的元素绑定事件——>调用js的函数——>创建xmlhttprequest对象——>发送请求到servlet（服务器的文件）——>获取请求赋值给html元素（document）

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax获取服务器文件内容</title>
</head>
<body>
    <div align="center">
    	<span id="mess"></span>
    	<button id="but" onclick="ajax01()">获取外部文件内容</button>
    </div>
    
    <script type="text/javascript">
    	
    	function ajax01(){
    		//创建 xmlhttprequest对象  ie  
    		var xmlhttprequest;
    		if(window.XMLHttpRequest){ //不是ie浏览器
    			xmlhttprequest=new XMLHttpRequest();
    		}else{//是ie浏览器
    			xmlhttprequest=new ActiveXObject("Microsoft.XMLHTTP")
    		}
    		
    		//编写请求方式  
    		/*
    		 * method：请求的类型；GET 或 POST
			 *url：文件在服务器上的位置   也可以是servlet
			 *async：true（异步）或 false（同步）
    		 */
    		xmlhttprequest.open("GET","message.txt",true)
    		//发送请求 
    		xmlhttprequest.send()
    		//获取响应数据   根据响应的状态码来进行判断  
    		/*存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
			0: 请求未初始化
			1: 服务器连接已建立
			2: 请求已接收
			3: 请求处理中
			4: 请求已完成，且响应已就绪
			status
				200: "OK"
				404: 未找到页面
			**/
			var count=0;
    		xmlhttprequest.onreadystatechange=function(){
    			count++;
    			alert("我是请求状态改变"+count);
    			//当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
    			if(xmlhttprequest.readyState==4 && xmlhttprequest.status==200){
    				//获取响应的内容   赋值给element元素
    				var message=xmlhttprequest.responseText;
//  				alert(message);
					//赋值
					document.getElementById("mess").innerHTML="<h1>"+message+"</h1>"
    			}
    		}
    	}
    	
    </script>
</body>
</html>

想要去Java程序中获取数据，就先编写servlet，将得到的结果通过下面代码相应到界面

PrintWriter writer = response.getWriter();
//可用print和write方法，print()可传递Object类型的，write()只能传递字符，字符数组，字符串，整型
writer.print(stulist);

2.Json介绍

Json是json对象的另外一种展示存储方式，其实就是一个特殊类型的字符串
在这里插入图片描述

Json的语法

{ “键” ： “值” } 键值必须都是字符串的
键和值都必须加上" "

key(键)必须为字符串型，value(值)字符串, 数字, 对象, 数组, 布尔值或 null

//json数据创建
		var json1={"name":"张三","age":20};
		alert(json1.name);
		//创建json对象数组
		var json2=[
		{"name":"张三","age":20},
		{"name":"李四","age":18}
		]
		alert(json2[1].age);
		//创建json属性对象
		var json3={
			"stu1":{"name":"张三","age":20},
			"stu2":{"name":"李四","age":18}
		}
		alert(json3.stu1.age);
		//创建json属性的数组对象
		var json4={
			"stu1":[{"name":"张三","age":20},
			{"name":"李四","age":18}]
		}
		alert(json4.stu1[1].age);

Json字符串与js的转换

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax</title>
</head>
<body>
	<script>
		//json转换为js
		var obj1= JSON.parse('{"name":"张三","age":20}');
		alert(obj1.name);
		//js对象转换为json字符串
		var obj2=JSON.stringify({name:"张三",age:20});
		alert(obj2);
		
	</script>
</body>
</html>

模糊查询示例

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>
</head>
<body>
	<div align="center">
	
	    请输入查询的相关内容：<input type="text" id="like"/>
	    <button onclick="likeselect()">查询</button>
	
	<table border="1px" cellpadding="0px" cellspacing="0px">
		<tr>
			<th>编号</th>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
			<th>班级编号</th>
			<th>班级名称</th>
		</tr>
		<tbody id="stubody">
			
		</tbody>
	</table>
	</div>
	<script>
		function likeselect(){
			var likename=document.getElementById("like").value;
			var xml;
			if(window.XMLHttpRequest){
				xml=new XMLHttpRequest();
			}else{
				xml=new ActiveXObject("Microsoft.XMLHTTP");
			}
			//打开资源
			xml.open("GET","JsonStudent?likename="+likename,"true");
			//发送请求
			xml.send();
			xml.onreadystatechange=function(){
				if(xml.readyState==4&&xml.status==200){
					//获取请求内容
					var stu=xml.responseText;
					//将json对象转换为js对象
					var jsonstu=eval("("+stu+")");
					var str="";
					for(var i=0;i<jsonstu.length;i++){
						str+="<tr>\r\n" + 
				"			<td>"+jsonstu[i].id+"</td>\r\n" + 
				"			<td>"+jsonstu[i].name+"</td>\r\n" + 
				"			<td>"+jsonstu[i].sex+"</td>\r\n" + 
				"			<td>"+jsonstu[i].age+"</td>\r\n" + 
				"			<td>"+jsonstu[i].c_id+"</td>\r\n" + 
				"			<td>"+jsonstu[i].c_name+"</td>\r\n" + 
				"		</tr>";
					}
					document.getElementById("stubody").innerHTML=str;
				}
			}
		}
	</script>
</body>
</html>

servlet部分代码

package com.xingyun.Servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

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 com.slxy.slxyDao.StudentinforDao;
import com.slxy.slxyImp.Studentinfor;
import com.xingyun.bean.Student;

import net.sf.json.JSONArray;

/**
 * Servlet implementation class JsonStudent
 */
@WebServlet("/JsonStudent")
public class JsonStudent extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public JsonStudent() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//设置字符编码
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		String likename = request.getParameter("likename");
		List<Student> list=new ArrayList<Student>();
		StudentinforDao stu=new Studentinfor();
		list = stu.like(likename);
		//将集合转换为JSONArray对象
		JSONArray stulist = JSONArray.fromObject(list);
		PrintWriter writer = response.getWriter();
		writer.print(stulist);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

结果
在这里插入图片描述

本文链接：https://blog.csdn.net/Chris_kl/article/details/107500238

智能推荐

Intellij IDEA 搭建Spring Boot项目(一)

Intellij IDEA 搭建Spring Boot项目标签（空格分隔）： SpringBoot JAVA后台第一步选择File –> New –> Project –>Spring Initialer –> 点击Next 第二步自己修改 Group 和 Artif...

CentOS学习之路1-wget下载安装配置

参考1: https://blog.csdn.net/zhaoyanjun6/article/details/79108129 参考2: http://www.souvc.com/?p=1569 CentOS学习之路1-wget下载安装配置 1.wget的安装与基本使用安装wget yum 安装软件默认安装保存在/var/cache/yum ，用于所有用户使用。帮助命令基本用法例子：下载...

深入浅出Spring的IOC容器，对Spring的IOC容器源码进行深入理解

文章目录 DispatcherServlet整体继承图入口:DispatcherServlet.init() HttpServletBean.init() FrameworkServlet.initServletBean() 首先大家，去看Spring的源码入口，第一个就是DispatcherServlet DispatcherServlet整体继承图入口:DispatcherServlet....

laravel框架的课堂知识点概总

1. MVC 1.1 概念理解 MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑 MVC 是一种使用 MVC（Model View Controller ...

Unity人物角色动画系统学习总结

使用动画系统控制人物行走、转向、翻墙、滑行、拾取木头混合树用来混合多个动画 MatchTarget用来匹配翻墙贴合墙上的某一点，人物以此为支点翻墙跳跃 IK动画类似于MatchTarget，控制两只手上的两个点来指定手的旋转和位置，使得拾取木头时更逼真创建AnimatorController：首先创建一个混合树，然后双击可以看到该混合树有五种状态机，分别是Idle、WalkForward、...