SpringMVC之AJAX初探

程序员文章站 2022-06-10 19:17:01

...

AJAX简介

Ajax概念

　Ajax 是Web开发一个流行的词汇，全称Asynchronous JavaScript and XML，异步的JavaScript和XML。是几种技术的强强联合。

Ajax如何工作

　Ajax（即异步 JavaScript和XML）是一种Web应用程序开发的手段，它采用客户端脚本与Web服务器交换数据。

为什么要学习Ajax

使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。

SpringMVC之AJAX初探

XMLHttpRequest对象简介

XMLHttpRequest对象是整个Ajax开发的基础

提供客户端和服务器异步通信的能力

能够向服务器发出请求

能够接收服务器的返回页面

最早出现在IE，随着应用的广泛，渐渐推广到其他浏览器中

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持XMLHttpRequest对象。如果支持，则创建XMLHttpRequest对象。如果不支持，则创建ActiveXObject

SpringMVC之AJAX初探

发送请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和send()方法：

SpringMVC之AJAX初探

Jsp代码的编写：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<script type="text/javascript">
		//定义一个获取dom对象的方法
		function $(id){
			return document.getElementById(id);
		}
		//查询事件
		function query(){
			//获取查询的关键字
			var ename=$("qename").value;
			//声明一个XMLHttpRequest变量并用兼容性的方法创建对象
			var xhr;
			if(window.XMLHttpRequest){
				//code  for IE7+, Firefox,  Chrome, Opera, Safari等等浏览器
				xhr=new XMLHttpRequest();
			}else{
				//code for IE6, IE6
				xhr=new ActiveXObject("Microsoft.XMLHTTP");
			}
			/*
				xmlhttp.open()
				参数1：请求的方式
				参数2：请求的路径
				参数3：true异步  false同步
			*/
			xhr.open("POST","${pageContext.request.contextPath}/ajax",true);
			
			//   ajax会调用后台action回调该方法多次
			//     readyState 属性存有 XMLHttpRequest 的状态信息。
			//   	0：请求未初始化
			// 		1：服务器连接已建立
			// 		2：请求收接收
			// 		3：请求处理中
			// 		4：请求已完成，且响应已就绪
			// 	所以这里需要判断readyState等于4的时候再去获取json
			//  设置响应的回调函数   当后台的json返回后  自动调用xhr.onreadystatechange指定的函数
			xhr.onreadystatechange=function(){
				if(xhr.readyState==4 && xhr.status==200/*判断响应的状态码:200为响应正常*/){
					//获取到jsonS  当前的json是一个字符串
					var sJson=xhr.responseText;
					//console.log(sJson);
					
					var oJson = JSON.parse(sJson);
					
					//首先获取取table的dom对象
					var oTbody = $("tbody");
					oTbody.innerHTML="";
					
					for(var i=0; i<oJson.length; i++){
						var oTr = document.createElement("tr");
						var oTb1 = document.createElement("td");
						oTb1.innerHTML=oJson[i].ENO;
						var oTb2 = document.createElement("td");
						oTb2.innerHTML=oJson[i].ENAME;
						var oTb3 = document.createElement("td");
						oTb3.innerHTML=oJson[i].SAL;
						
						oTr.appendChild(oTb1);
						oTr.appendChild(oTb2);
						oTr.appendChild(oTb3);
						
						oTbody.appendChild(oTr);
					}
				}
			}
			//send()需要传递参数的时候必须加上
			//	xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
			//	这句代码，不然send()的参数是无法传递的， open里的method也要改为"POST"
          		xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
          		xhr.send("ename="+ename);
		}
		
	</script>
  </head>
  <body>
	<form>
		<input type="text" name="ename" />
		<input type="button" value="查询" onclick="query()" />
	</form>	
	<table border="1" cellpadding="10" cellspacing="0">
		<thead>
			<tr>
				<td>编号</td>
				<td>姓名</td>
				<td>薪水</td>
			</tr>
		</thead>
		<tbody id="tbody">
		
		</tbody>
	</table>
  </body>
</html>

Java代码：

package cn.et.springmvc.lesson05.emp.controller;

import java.io.UnsupportedEncodingException;
import java.util.List;

import net.sf.json.JSONArray;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import cn.et.springmvc.lesson05.emp.service.EmpService;

@Controller
public class AjaxAction {

	@Autowired
	private EmpService service;
	
	/**
	 * ajax请求跳转是没有用的，所以返回字节数组
	 * 		表示将json转换为字节输出给响应流
	 * 	
	 * 	@ResponseBody 这里修改了返回值，所以必须要加上这句代码
	 * @return
	 * @throws UnsupportedEncodingException 
	 */
	@ResponseBody
	@RequestMapping(value="/ajax")
	public byte[] ajax(String ename) throws UnsupportedEncodingException{
		List list = service.query(ename);
		//将数组、对象或者集合转换成字符串的json 再传给xhr对象
		//把list集合转换成json字符串
		String json = JSONArray.fromObject(list).toString();
		return json.getBytes("UTF-8");
	}
}

SpringMVC之AJAX初探

vue 组件的封装之基于axios的ajax请求方法

AJAX跨域请求之JSONP获取JSON数据

ajax中的async属性值之同步和异步及同步和异步区别

jQuery之动画ajax事件(实例讲解)

JAVA WEB快速入门之从编写一个基于SpringBoot+Mybatis快速创建的REST API项目了解SpringBoot、SpringMVC REST API、Mybatis等相关知识

AJAX跨域请求之JSONP获取JSON数据教程

jquery中ajax函数执行顺序问题之如何设置同步

ElasticStack学习（七）：ElasticSearch之Mapping初探

JAVA WEB快速入门之从编写一个基于SpringMVC框架的网站了解Maven、SpringMVC、SpringJDBC

JavaScript基础之AJAX简单的小demo