14、JavaEE--Mybatis注解与Ajax技术

目录

单表注解

@Param注解

基于注解的一对一关联查询(one)

一对多查询(many)

Ajax的概念

Ajax 开发

Ajax的核心代码:

Ajax五步使用法

步骤1 创建 XMLHttpRequest 对象

步骤2 指定异步提交的目标和提交方式

步骤3 指定 XMLHttpRequest对象状态改变时,需要进行的处理

步骤4 编写处理代码

步骤5 发送请求

XMLHttpRequest对象的主要方法

XMLHttpRequest对象的主要属性

 Ajax响应类型

文本类型

XML响应类型

JSON技术

JSON在JavaScript中的使用

在JS中使用eval()将JSON文本转换为JavaScript对象

在JS中使用JSON.stringify()将json对象转换为字符串

JSON在Ajax中的使用

例子

jQuery技术-什么是jQuery

jQuery语法示例

jQuery Ajax

在jQuery中实现Ajax编程

实验:lab12

 jackson相关依赖


单表注解

public interface WorkerMapper {
    @Select("select * from tb_worker where id = #{id}")
    Worker selectWorker(int id);
}
public interface IdCardMapper {
    @Select("select * from tb_idcard where id=#{id}")
    IdCard selectIdCardById(int id);
}

@Param注解

@Select("select * from tb_worker where id = #{param01} 
and name = #{param02}")

Worker selectWorkerByIdAndName(@Param("param01") 
int id, @Param("param02") String name);

基于注解的一对一关联查询(one)

public interface PersonMapper {
    @Select("select * from tb_person where id=#{id}")
    @Results({@Result(column = "card_id",property = "card",
    one = @One(select ="com.itheima.dao.IdCardMapper.selectIdCardById"))})
    Person selectPersonById(int id);
}

(1)property属性用来指定关联属性,这里为card。

(2)column属性用来指定关联的数据库表中的字段,这里为card_id。  

(3)one属性用来指定数据表之间属于哪种关联关系,通过@One注解表明数据表tb_idcard和tb_person之间是一对一关联关系。

一对多查询(many)

public interface UsersMapper {
    @Select("select * from tb_user where id=#{id} ")
    @Results({@Result(id = true,column = "id",property = "id"),
            @Result(column = "username",property = "username"),
            @Result(column = "address",property = "address"),
            @Result(column = "id",property = "ordersList",
            many = @Many(select = 			"com.itheima.dao.OrdersMapper.selectOrdersByUserId"))})
    Users selectUserById(int id);}

Ajax的概念

Ajax是Asynchronous Javascript And Xml的简写,它不是一项具体的技术,而是几门技术的综合应用;

核心思想:是在Javascript中调用一个称为XMLHttpRequest的Javascript类,这个类可以与Web服务器使用HTTP协议进行交互,程序不通过浏览器发出请求,而是用这个特殊的JavaScript对象发送请求,再由这个JavaScript对象接收响应,并将响应结果用DOM编程方式挂到原来的网页上(见下页的图),从而使得Javascript借助这个API类可以做比较有意义的事情。

同步概念:调用方必须等待对方得到结果,才能继续运行。

传统Web应用同步请求执行时间轴:

14、JavaEE--Mybatis注解与Ajax技术_第1张图片

在传统的Web应用模型下,客户机向服务器发出请求,然后服务器开始处理,这期间客户机只能等待,如果请求需要大量服务器处理,那么等待的时间可能更长。这种传统Web应用程序感到笨拙或缓慢的原因是缺乏真正的交互性。传统Web应用这种“发送请求-等待-发送请求-等待”的请求方式也被称为同步请求。

异步概念:当一个异步过程调用发出后,调用者不需要立刻得到结果,可以继续做自己的事情,等到过程调用完毕,再通过回调函数通知调用方;

 Ajax应用异步请求执行时间轴:

14、JavaEE--Mybatis注解与Ajax技术_第2张图片

Ajax请求是异步的,或者说是非阻塞的。Ajax应用通过在客户端浏览器和服务器之间引入一个媒介“Ajax Engine”来发送异步请求,客户端可以在响应未到达之前继续当前页面的其他操作,Ajax Engine则继续监听服务器的响应状态,在服务器完成响应后,获取响应结果更新当前页面内容。这种请求方式消除了传统的“发送请求-等待-发送请求-等待”,极大地提高了用户体验。

Ajax工作原理图:

14、JavaEE--Mybatis注解与Ajax技术_第3张图片

Ajax应用与传统Web应用相比较,客户端浏览器通过JavaScript事件触发对Ajax Engine的调用,Ajax Engine在Ajax应用中担负着一个中间层的任务,负责收集数据并通过Ajax的核心-XMLHttpRequest对象向服务器发送HTTP请求,服务器处理完后返回响应结果(可能是各种类型的数据,如字符串 、XML和JSON等),Ajax Engine根据响应文档类型对数据进行解析后再配合HTML和CSS渲染,将结果显示到客户端页面。

Ajax包括的内容

  • 异步数据获取技术:使用 XMLHttpRequest
  • 基于标准的表示技术:使用 XHTML 与 CSS
  • 动态显示和交互技术:使用 Document Object Model(文档对象模型,简称DOM)
  • 数据互换和操作技术:使用 XML 或 JSON 等
  • JavaScript,将以上技术融合在一起

Ajax 开发

Ajax的核心代码:

function showInfo(){ 
     let xmlHttp= new XMLHttpRequest();      		        //步骤1
	xmlHttp.open("get", "info.jsp", true); 		           //步骤2
	xmlHttp.onreadystatechange=function() { 		       //步骤3
		if (xmlHttp.readyState==4) {                  	//步骤4
		infoDiv.innerHTML = xmlHttp.responseText; 
		} 
	} 
	xmlHttp.send(); 					                  //步骤5
}

Ajax五步使用法

步骤1 创建 XMLHttpRequest 对象

let xmlhttp;
xmlhttp=new XMLHttpRequest();

步骤2 指定异步提交的目标和提交方式

调用 xmlHttp 的 open 方法

格式:xmlHttp.open(“请求方式”, “请求地址”, 是否异步处理请求);

GET方式发送请求,在URL中添加传递的参数,示例:

xmlHttp.open("GET","AServlet?name=DSY&pwd=123",true);
xmlHttp.send();

POST方式发送信息,则在send方法添加传递的参数,示例:

xmlhttp.open("POST","AServlet",true);
xmlhttp.send("name=DSY&pwd=123");

步骤3 指定 XMLHttpRequest对象状态改变时,需要进行的处理

处理一般是以响应函数(又称回调函数)的形式进行: 

xmlHttp.onreadystatechange=function() { 
	//处理代码 
} 
//或
xmlHttp.onreadystatechange=handle;
……
function handle() { 
	//处理代码 
} 

步骤4 编写处理代码

xmlHttp.onreadystatechange=function() { 
    if (xmlHttp.readyState==4 && xmlHttp.status==200) { 
	infoDiv.innerHTML = xmlHttp.responseText; 
    } 
} 

说明:

infoDiv 除了具有 innerHTML 属性之外,还有 innerText 属性,表示在该 div 内显示内容时,不考虑其中的 HTML 格式的标签;

除了 div 可以达到动态显示内容的效果之外,HTML 中的 span 也可以做到该效果。

步骤5 发送请求

通过调用异步请求对象的send方法向服务器发送请求

格式:xmlHttp.send();

若请求方式是 post,可以将需要传送的内容传入 send 函数中以字符串的形式发出。

GET方式发送请求,在URL中添加传递的参数,示例:

xmlHttp.open("GET","AServlet?name=DSY&pwd=123",true);
xmlHttp.send();

POST方式发送信息,则在send方法添加传递的参数,示例:

xmlhttp.open("POST","AServlet",true);
xmlhttp.send("name=DSY&pwd=123");

XMLHttpRequest对象的主要方法

open("method","url",asyncFlag)

作用:建立对服务器的调用,

method:请求方式,可以是GET或POST;

url:请求地址,可以是相对或绝对路径;

asyncFlag:是否异步调用,true是异步调用,false是同步。

send(content)

作用:向服务器发送请求

XMLHttpRequest对象的主要属性

属性名

描述

onreadystatechange

状态改变事件触发器,每个状态改变都会触发

readyState

异步请求过程中的各种状态:

0 = 未初始化

1 = 正在加载(准备发送)

2 = 已加载(已发送但还没收到响应)

3 = 交互中(正在接收)

4 = 完成(接收完成)

responseText

服务器的响应是字符串

responseXML

服务器的响应是XML,可解析为一个DOM对象

status

服务器返回的HTTP状态码

如404未找到,200就绪

statusText

HTTP状态码的相应文本

 Ajax响应类型

文本类型

xmlHttp.open(“GET”,”info.jsp”,true);
……
infoDiv.innerHTML=xmlHttp.responseText;

XML响应类型

xmlHttp.open(“GET”,”info.jsp”,true);
……
var xmlDom=xmlHttp.responseXml;
或
var xmlDom=xmlHttp.responseXML;

JSON技术

JSON(JavaScript Object Notation,JS对象标记)是一种轻量级的数据交换格式。

对象结构语法结构如下:

{
	key1:value1,
	key2:value2,
	…
}

说明:其中,key必须为String类型,value可以是String、Number、Object、Array等数据类型。

例如,一个person对象包含姓名、密码、年龄、爱好、所在学校等信息 JSON的表示如下:

{
	"pname":"陈恒",
	"password":"123456",
	"page":40,
	"hobby":["篮球","足球"],
	"college":{
		"cname":"清华大学",
		"city":"北京"
	}

}

JSON在JavaScript中的使用

JSON是JavaScript的原生格式,在JavaScript中处理JSON数据不需要任何API或工具包。

在JS中使用eval()将JSON文本转换为JavaScript对象

let jsonText = "{\"sname\":\"陈恒\", \"sage\":\"88\"}";//定义JSON文本变量
//两边加圆括号将参数值无条件地视为表达式进行解析
let jsObj = eval("("+ jsonText + ")");//将JSON文本转换为JavaScript对象
alert(jsObj.sname);//获取对象属性

在JS中使用JSON.stringify()将json对象转换为字符串

let obj = { "sname":"陈恒", "sno":20190101, "sage":88};//定义json对象
let myJSON = JSON.stringify(obj); //将json对象转换为字符串
alert(myJSON);//输出json文本

JSON在Ajax中的使用

在实际开发中,Java对象和JSON数据之间的互相转换通常使用第三方插件来协助完成。下面以Jackson为例,讲解JSON在Ajax中的使用。

Jackson开源包及其描述如下:

jackson-annotations.jar:JSON转换注解包。

jackson-core.jar:JSON转换核心包。

jackson-databind.jar:JSON转换的数据绑定包。

下载地址:

https://mvnrepository.com/artifact/com.fasterxml.jackson.core

最新版本2.13.0

例子

实体类:Student

public class Student {
    String sno;
    String sname;
    int sage;
   public Student(String sno, String sname, int sage, String sdept) {
		super();
		this.sno = sno;
		this.sname = sname;
		this.sage = sage;    
    }
   //省略getter/setter
}

视图:JSP文件

//指定响应事件处理函数
xhr.onreadystatechange = function(){
    //当readyState等于4且状态为200时,表示响应已就绪
    if(xhr.readyState ==4 && xhr.status == 200){
        //将响应的JSON格式转换为JavaScript对象		
        var resData = eval("(" + xhr.responseText + ")");
        //将响应数据更新到页面控件中显示
        document.getElementById("sname").value = resData.sname;
        document.getElementById("sage").value = resData.sage;
        document.getElementById("sdept").value = resData.sdept;	
    }
};

控制器:Servlet

//获取Ajax请求的数据
String sno = request.getParameter("sno");
//根据学号从模拟数据库中查询学生信息
Student stu = stus.get(sno);
if(stu == null) {
    stu = new Student("error","error", 0,"error");
}
//创建Jackson插件的ObjectMapper对象
ObjectMapper mapper = new ObjectMapper();
//将一个Java对象转换成JSON
mapper.writeValue(response.getWriter(), stu);

jQuery技术-什么是jQuery

将JQuery插件,如jquery-3.2.1.min.js文件复制到WebContent/js目录下

在页面中,引用jQuery插件,代码如下:

语法:$(selector).action()

作用:通过选取HTML元素,并对选取的元素执行某些操作

其中:

$定义jQuery;           

选择符(selector)获取HTML元素;         

 action()执行对元素的操作。

jQuery语法示例

$("#test").hide()隐藏所有id="test"的元素;
$("#test").text("Hello world!")设置id="test"元素的文本内容为“Hello world!”;
$("#test").html("Hello world!")设置id="test"元素的内容(包括 HTML 标记);
$("#test").val("chenheng")设置id="test"的表单字段的值;
$("#test").text()返回id="test"元素的文本内容;
$("#test").html()返回id="test"元素的内容(包括 HTML 标记);
$("#test").val()获得id="test"的表单字段的值。

jQuery Ajax

相关方法:jQuery load()、jQuery get() 和 post() 方法、jQuery ajax() 方法等

通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON , 同时您能够把这些外部数据直接载入网页的被选元素中。

提示:如果没有 jQuery,AJAX 编程还是有些难度的。

在jQuery中实现Ajax编程

Ajax()方法

语法:

$.ajax(options)

Options:表示Ajax的请求设置,所有选项都是可选的;

方法返回XMLHttpRequest对象

14、JavaEE--Mybatis注解与Ajax技术_第4张图片

load()方法:从服务器加载数据,并将返回的数据放入被选元素中。

语法:

${selector}.load(URL,data,callback);

其中,必需的URL参数规定您希望加载的 URL; 

可选的data参数规定与请求一同发送的查询字符串键/值对集合;

可选的callback参数规定当load( )方法完成后所要允许的回调函数。

回调函数可以设置不同的参数:responseTxt表示包含调用成功时的结果内容,statusTxt表示包含调用的状态,xhr表示包含XMLHttpRequest对象。

14、JavaEE--Mybatis注解与Ajax技术_第5张图片

======================================================================

实验:lab12

 jackson相关依赖

        
            com.fasterxml.jackson.core
            jackson-databind
            2.15.1
        
        
            com.fasterxml.jackson.core
            jackson-core
            2.15.1
        
        
            com.fasterxml.jackson.core
            jackson-annotations
            2.15.1
        
        
            com.alibaba.fastjson2
            fastjson2
            2.0.32
        

你可能感兴趣的:(Java-EE,mybatis,java-ee,ajax)