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);
	}

}

结果
在这里插入图片描述

版权声明:本文为Chris_kl原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: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、...

猜你喜欢

Composer 安装 ThinkPHP6 问题

Composer 安装 ThinkPHP6 问题 先说说问题 一.运行环境要求 二.配置 参考: ThinkPHP6.0完全开发手册 先说说问题 执行ThinkPHP6的安装命令 遇到问题汇总如下: 看提示是要更新版本,执行命令更新。 更新之后,再次安装ThinkPHP,之后遇到如下问题。 尝试了很多方法,依然不能解决。其中包括使用https://packagist.phpcomposer.com...

Spring Boot 整合JDBC

今天主要讲解一下SpringBoot如何整合JDBC,没啥理论好说的,直接上代码,看项目整体结构 看一下对应的pom.xml 定义User.java 定义数据源配置,这里使用druid,所以需要写一个配置类 上面指定druid的属性配置,和用户登录的账号信息以及对应的过滤规则: 下面定义数据访问接口和对应的实现: 数据访问层很简单,直接注入JdbcTemplate模板即可,下面再看对应的servi...

html鼠标悬停显示样式

1.显示小手:     在style中添加cursor:pointer 实现鼠标悬停变成小手样式     实例:         其他参数: cursor语法: cursor : auto | crosshair | default | hand | move | help | wait | tex...

Yupoo(又拍网)的系统架构

Yupoo!(又拍网) 是目前国内最大的图片服务提供商,整个网站构建于大量的开源软件之上。以下为其使用到的开源软件信息: 操作系统:CentOS、MacOSX、Ubuntu 服务器:Apache、Nginx、Squid 数据库:MySQLmochiweb、MySQLdb 服务器监控:Cacti、Nagios、 开发语言:PHP、Python、Erlang、Java、Lua 分布式计算:Hadoop...

创建一个Servlet项目流程(入门)

版本 IDEA 2020.2 JDK1.8 apache-tomcat-9.0.36 项目流程 一、IDEA中新建JaveEE项目 项目起名,选择项目存放地址,点击finish创建成功 进入项目后,右键选择项目,选择add Framework Support 选择Web Application,点击OK 此时项目文件夹 在WEB-INF下创建两个目录classes和lib 按ctrl+alt+sh...