SpringMVC之AJAX初探

来源：互联网发布：快听小说显示网络异常编辑：程序博客网时间：2024/06/07 01:11

AJAX简介

Ajax概念

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

Ajax如何工作

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

为什么要学习Ajax

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

XMLHttpRequest对象简介

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

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

能够向服务器发出请求

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

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

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

发送请求

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

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, IE6xhr=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;@Controllerpublic class AjaxAction {@Autowiredprivate 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");}}

阅读全文

0 0