当前位置: 代码迷 >> 综合 >> AJAX Unit01: Ajax 、 编码问题
  详细解决方案

AJAX Unit01: Ajax 、 编码问题

热度:30   发布时间:2023-12-11 15:00:34.0

1. Spring集成MyBatis (方式二 了解)

(1)集成步骤

step1.导包。
spring-webmvc,mybatis,mybatis-spring,
dbcp,ojdbc,spring-jdbc,junit。step2.添加spring配置文件。
注:不再需要MyBatis的配置文件,可以在spring的配置文件里面
添加SqlSessionFactoryBean来代替。step3.实体类
step4.映射文件注:namespace不再要求等于接口名。
step5.DAO接口注:接口方法没有特定要求
step6.写一个DAO接口的实现类注:可以注入SqlSessionTemplate。

这里写图片描述
这里写图片描述

2. 使用Spring集成MyBatis的方式重写AdminDAO

step1. 导包需要添加 mybatis,mybatis-spring,spring-jdbc
step2. 在配置文件当中,添加SqlSessionFactoryBean
step3. 实体类Admin 要注意属性与表的字段名不一样,建议用别名解决
step4. 映射文件AdminMapper.xmlnamespace="cn.tedu.netctoss.dao.AdminDAO"<select id="findByAdminCode" parameterType="java.lang.String"resultType="cn.tedu.netctoss.entity.Admin">SELECT ...</select>
step5. Mapper映射器 (AdminDAO)不用写了 
step6. 配置MapperScannerConfigurer 
step7. 测试 AdminDAO  

3. ajax (asynchronous javascript and xml 异步的javascript和xml)

(1)ajax是什么?

是一种用来改善用户体验的技术,本质上是利用浏览器提供的一个
特殊对象(XMLHttpRequest对象,一般也可以称之为ajax对象)向
服务器发送异步请求;服务器返回部分数据,浏览器利用这些数据
对当前页面做部分更新;整个过程,页面无刷新,不打断用户的操作。
注:异步请求,指的是,当ajax对象发送请求时,浏览器不会销毁
当前页面,用户仍然可以对当前页面做其它操作。

这里写图片描述

(2)如何获得ajax对象?

function getXhr(){var xhr = null;if(window.XMLHttpRequest){//非ie浏览器xhr = new XMLHttpRequest();}else{xhr = new ActiveXObject('MicroSoft.XMLHttp');}return xhr;
}

(3)ajax对象的几个重要属性

onreadystatechange: 绑订事件处理函数,用来处理readystatechange事件。注:当ajax对象的readyState属性值发生了任何的改变,比如从0变成了1,就会产生readystatechange事件。
readyState:有5个值(分别是0,1,2,3,4),用来获取ajax对象与服务器通信的进展。其中,4表示ajax对象已经获得了服务器返回的所有的数据。
responseText:获得服务器返回的文本数据。
responseXML:获得服务器返回的xml数据。
status:获得状态码。

(4)编程步骤

step1. 获得ajax对象比如   var xhr = getXhr();
step2. 调用ajax对象的方法,发送请求方式一 get请求xhr.open('get','check.do?adminCode=king',true);xhr.onreadystatechange = f1;xhr.send(null);注:true: 异步 (浏览器不会销毁当前页面,用户仍然可以对当前页面做其它操作)false:同步 (浏览器不会销毁当前页面,但是会锁定当前页面,用户不能够对当前页面做任何操作)。方式二 post请求
step3. 编写服务器端的程序注:不需要返回完整的页面,只需要返回部分数据。
step4. 编写事件处理函数if(xhr.readyState == 4 && xhr.status == 200){//ajax对象已经获得了服务器返回的所有数据,//而且服务器处理正确。var txt = xhr.responseText;页面更新...}

示例代码:

这里写图片描述

/ajax01/src/main/java

web
ActionServlet.java

package web;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 ActionServlet extends HttpServlet{@Overridepublic void service(HttpServletRequest request, HttpServletResponse response)throws ServletException,IOException {System.out.println("service()");//分析请求路径,依据分析结果调用不同//的分支来处理。// 获得请求资源路径  String uri = request.getRequestURI();System.out.println("uri:" + uri);// 为了方便分析,截取请求资源路//径的一部分String action = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));System.out.println("action:"+action);response.setContentType("text/html;charset=utf-8");PrintWriter out = response.getWriter();if("/check".equals(action)){String adminCode = request.getParameter("adminCode");System.out.println("adminCode:"+ adminCode);if("king".equals(adminCode)){out.println("帐号已经存在");}else{out.println("可以使用");}}}
}

web-app

ajax.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript"> function getXhr(){
     var xhr = null;if(window.XMLHttpRequest){//非ie浏览器xhr = new XMLHttpRequest();}else{xhr = new ActiveXObject('MicroSoft.XMLHttp');}return xhr; } </script>
</head>
<body style="font-size:30px;"><a href="javascript:alert(getXhr());">ClickMe</a>
</body>
</html>

regist.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/ajax.js"> </script>
<script type="text/javascript">function check(){
     //step1. 获得ajax对象var xhr = getXhr();//step2. 发送请求xhr.open('get','check.do?adminCode='+ $F('adminCode'),true);xhr.onreadystatechange = function(){
     //step4. 处理服务器返回的数据if(xhr.readyState == 4 && xhr.status == 200){//获得服务器返回的数据var txt = xhr.responseText;//更新页面$('msg').innerHTML = txt;}};xhr.send(null);}</script>
</head>
<body style="font-size:30px;"><form action="">帐号:<input id="adminCode" name="adminCode" onblur="check();"/><span id="msg"></span><br/>密码:<input type="password" name="pwd"/><br/><input type="submit" value="确定"/>   </form>
</body>
</html>

js/ajax.js

function $(id){
    return document.getElementById(id);
}function $F(id){
    return $(id).value;
}function getXhr(){
    var xhr = null;if(window.XMLHttpRequest){//非ie浏览器xhr = new XMLHttpRequest();}else{xhr = new ActiveXObject('MicroSoft.XMLHttp');}return xhr;
}

WEB-INF

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5"><servlet><servlet-name>action</servlet-name><servlet-class>web.ActionServlet</servlet-class></servlet><servlet-mapping><servlet-name>action</servlet-name><url-pattern>*.do</url-pattern></servlet-mapping>
</web-app>
  相关解决方案