上周回顾 AJAX
Controller层
最终目的 封装共性 突出特性
@Controller
@RequestMapping("/")
public class AjaxController {
//====================Ajax-03====================================
@RequestMapping("doAjax03UI")
public String doAjax03UI() {
return "ajax-03";//03页面在02页面的基础之上做了一个封装
}
//====================Ajax-02====================================
private List<String> names=new ArrayList<String>();//假设这是存储数据的表
@RequestMapping("doAjax02UI")
public String doAjax02UI() {
return "ajax-02";
}
/**通过此方法校验名字是否存在*/
@RequestMapping("doCheck")
@ResponseBody
public String doCheck(String name) {
if(names.contains(name))
return "名字"+name+"已经存在,请选择其它名字";
return "名字"+name+"不存在,可以注册";
}
/**将客户端请求数据写入到names对应的集合*/
@RequestMapping("doSave")
@ResponseBody
public String doSave(String name) {
System.out.println("name="+name);
names.add(name);
return "save ok";
}
//===================Ajax-01=======================================
@RequestMapping("doAjax01UI")
public String doAjax01UI() {
return "ajax-01";
}
//处理传统请求的服务端设计
@RequestMapping("doGet")
public String doGet(Model model) {
model.addAttribute("message", "Get request result");
return "ajax-01";
}
//处理ajax请求的服务端设计
@RequestMapping("doAjaxGet")
@ResponseBody //将方法返回值以字符串形式进行输出
public String doAjaxGet() throws Exception{
System.out.println("==doGet()==");
//Thread.sleep(3000);//模拟耗时操作
return "Ajax Get request result";
}
}
归纳的一个方便controller层
@Controller
@RequestMapping("/jquery/")
public class JqueryController {
@RequestMapping("doJQueryUI")
public String doJQueryUI() {
return "jquery-ajax-01";
}
@RequestMapping("doAjaxGet")
@ResponseBody
public String doAjaxGet(String msg) {
System.out.println("msg="+msg);
return "JQuery Ajax Get Request Result";
}
@RequestMapping("doAjaxPost")
@ResponseBody
public String doAjaxPost(String msg) {
System.out.println("msg="+msg);
return "JQuery Ajax Post Request Result";
}
}
2.html 客户端层面
Ajax-01(分析Ajax同步&异步与传统方式的同步)
刷新整个页面会使页面渲染很慢很慢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>The Ajax 01 Page <strong id="timeId"></strong></h1>
<div>
<!-- 传统方式的同步请求测试 -->
<fieldset> <!-- 分组设置 -->
<legend>传统方式的同步请求</legend> <!-- 设置分组名称 -->
<button onclick="doGet()">Get Request</button>
<span id="resultId">[[${message}]]</span>
</fieldset>
<!-- Ajax方式的异步请求测试 -->
<fieldset> <!-- 分组设置 -->
<legend>异步请求</legend>
<button onclick="doAjaxGet()">Get Request</button>
<span id="ajaxResultId">loading data ....</span>
</fieldset>
<script type="text/javascript">
//scirpt只要被加载就会执行
document.getElementById("timeId").innerHTML=new Date().toLocaleString()
function doGet(){
location.href="http://localhost/doGet";
}
//Ajax方式的请求
function doAjaxGet(){//错误调试:debugger,console.log(),排除法
//1.创建XHR对象
var xhr=new XMLHttpRequest();
//2.设置状态监听(将服务端响应的结果更新到ajaxResultId位置)
xhr.onreadystatechange=function(){
//console.log(xhr.readState);
if(xhr.readyState==4&&xhr.status==200){
console.log(xhr.responseText);
document.getElementById("ajaxResultId").innerHTML=xhr.responseText;
}
};
//3.建立连接
xhr.open("GET","http://localhost/doGet",true);//true表示异步(底层会启动线程与服务端通讯)
//4.发送请求
xhr.send();
}
</script>
</div>
</body>
</html>
2.检查用户名存在不存在,主讲post和get doCheck() doSave()很多业务是重复的 所以接下来考虑封装
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>The Ajax 02 Page</h1>
<fieldset>
<legend>Ajax 表单请求</legend>
<form>
<input type="text" name="name" id="nameId" onblur="doCheck()" onfocus="doClear()">
<input type="button" onclick="doSave()" value="Save">
</form>
<span id="result"></span>
</fieldset>
<script type="text/javascript">
function doClear(){
document.getElementById("result").innerHTML="";
}
function doSave(){
//1.创建XHR对象
var xhr=new XMLHttpRequest();
//2.设置状态监听
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
document.getElementById("result").innerHTML="<font color='red'>"+xhr.responseText+"</font>";
}
};
//3.打开链接
//var name=document.getElementById("nameId").value;
var name=document.forms[0].name.value;
xhr.open("POST","/doSave",true);
//post请求要设置请求头(规定)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.发送请求
xhr.send("name="+name);//Post请求send方法传值
}
function doCheck(){//在此函数中向服务端发起异步请求,检测name是否存在
//1.创建XHR对象
var xhr=new XMLHttpRequest();
//2.设置状态监听
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
document.getElementById("result").innerHTML="<font color='red'>"+xhr.responseText+"</font>";
}
};
//3.打开链接
//var name=document.getElementById("nameId").value;
var name=document.forms[0].name.value;
console.log("name",name);
xhr.open("GET","/doCheck?name="+name,true);
//4.发送请求
xhr.send(null);//Get请求send方法传值
}
</script>
</body>
</html>
js代码重复了 考虑封装
3.doAjaxGet doAjaxPost 封装函数 加讲了函数定义 函数调用 函数回调函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>The Ajax 03 Page</h1>
<fieldset>
<legend>Ajax 表单请求(对Ajax共性代码进行封装)</legend>
<form>
<input type="text" name="name" id="nameId" onblur="doCheck()" onfocus="doClear()">
<input type="button" onclick="doSave()" value="Save">
</form>
<span id="result"></span>
</fieldset>
<!-- 在编程中我们要学会封装共性,提取特性,以实现代码的可重用性 -->
<script type="text/javascript">
function doClear(){
document.getElementById("result").innerHTML="";
}
//保存业务的实现
function doSave(){
//1.定义请求url
var url="doSave";
//2.定义请求参数
var params="name="+document.forms[0].name.value;
//3.发送异步的post请求
doAjaxPost(url,params,function(result){
document.getElementById("result").innerHTML=result;
})
}
//检查名字是否存在的业务代码
function doCheck(){//在此函数中向服务端发起异步请求,检测name是否存在
//1.定义请求url
var url="doCheck";
//2.定义请求参数
var name=document.forms[0].name.value;
var params="name="+name;
//3.发送异步Get请求
doAjaxGet(url,params,function(result){
document.getElementById("result").innerHTML=result;
})
}
</script>
</body>
</html>
框架里 实现了对ajax的封装 讲了jquery里面的ajax函数 框架就是对传统应用步骤的封装
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>JQuery中ajax函数的相关应用</h1>
<div>
<button onclick="doGet()">$.get(...)</button>
<button onclick="doPost()">$.post(...)</button>
<button onclick="doAjax()">$.ajax(...)</button>
<button onclick="doLoad()">$("").load(...)</button>
</div>
<fieldset>
<legend>响应结果呈现区</legend>
<div id="result">loading data....</div>
</fieldset>
<script type="text/javascript" src="/jquery/jquery.min.js"></script>
<script type="text/javascript">
//向服务端发送Ajax Get 请求
function doGet(){
//1.定义请求的url
var url="doAjaxGet";
//2.定义请求的参数
var params="msg=hello jquery ajax get";
//3.发送异步Get请求
//这里的$符号为jQuery中的一个对象
//get(url[,params][,callback][,dataType])为jquery中的一个ajax函数
$.get(url,params,function(result){
//document.getElementById("result").innerHTML=result;
$("#result").html(result);
},"text");//在这个函数中你看到ajax的代码了吗?
}
//向服务端发送Ajax Post 请求
function doPost(){
//1.定义请求的url
var url="doAjaxPost";
//2.定义请求的参数
var params="msg=hello jquery ajax Post";
//3.发送异步POST请求
//这里的$符号为jQuery中的一个对象
//post(url[,params][,callback][,dataType])为jquery中的一个ajax函数
$.post(url,params,function(result){//post请求一般用于向服务端提交数据
$("#result").html(result);
});//在这个函数中你看到ajax的代码了吗?
}
//向服务端发送Ajax Post 请求
function doAjax(){
//1.定义请求的url
var url="doAjaxGet";
//2.定义请求的参数
var params="msg=hello jquery ajax request";
//3.发送异步Get请求
//这里的$符号为jQuery中的一个对象
$.ajax({
type:"GET",//表示get请求(默认为get),省略不写为Get
url:url,//":"左边的内容为语法定义,我们不能修改.":"右边为我们自己定义
data:params,//请求参数
async:true,//true表示异步
success:function(result){ //回调函数
$("#result").html(result);
}
});//在这个函数中你看到ajax的代码了吗?
}
function doLoad(){
//1.定义请求的url
var url="doAjaxGet";
//2.定义请求的参数
var params="msg=hello jquery ajax request";
//3.发送异步Get请求
//在指定位置异步加载url对象的资源,
//在当前应用中表示把url对象的资源呈现到#result位置.
//$("#result").load(url,params,function(){//回调函数,资源加载完成执行此函数
// console.log("load complete");
//});
$("#result").load(url);//假如不向服务端传值,不需要处理load完以后的结果,还可以这样写
}
//................
</script>
</body>
</html>
要引入ajax.js文件
错误解决
呈现的结果
新内容 810课 代码污染的点
Xddfathe r 9:30:04
为什么封装只写到ajax
Xddfathe r 9:30:27
jQuery那边只有对象调方法
Xddfathe r 9:33:39
有没有方式可以减少代码污染
Xddfathe r 9:33:55
可以按照jquery框架方式把函数封装
局部 内部的 不可访问
Xddfathe r 9:40:00
只使用一次的话 最好没必要定义函数
Xddfathe r 9:40:09
可以用自调用
Xddfathe r 9:40:32
避免污染
Xddfathe r 9:44:14
1.能不用全局尽量不用全局
点:讲 js的五种基本数据类型
Xddfathe r 10:19:13
JavaScript中有五种基本数据类型（也叫做简单数据类型）分别为：undefined、null、bolean、number、string；另外还含有一种复杂的数据类型：object.
Xddfathe r 10:19:18
基本类型数据
1.基本数据类型值是指简单的数据段，五种基本类型都是按值访问的（可以操作保存在变量中的实际值）；
2.基本类型的值在内存中占据固定大小的空间，被保存在栈内存中。（从一个变量向另一个变量复制基本类型的值，会创建这个值的一个副本）；
3.不能给基本类型的值添加属性。
输出形式
自己试着打
对象的克隆
类似定义很多次s4
依旧是封装共性 提取特性思想
做一个更简单的设计和实现
调用
实参传给实参
大总结 方法调用
继承
p2无法访问到的
Xddfathe r 11:58:17
.prototype 是父类 共享
Xddfathe r 11:58:20
避开了私有
下午
看到函数的内部结构
如上图 如下对应
同一对象 自己打一遍之后
按顺序
1.
2.
js的继承 很乱
js面向对象
新建.js文件测试
模型 把函数封装在一个对象
属于自调用 只用一次 不要定义全局
实现ajax框架 小试身手
雷哥 理解JavaScript中的函数
1.controller层
@Controller
@RequestMapping("/")
public class AjaxController {
//====================Ajax-04====================================
@RequestMapping("doAjax04UI")
public String doAjax04UI() {
return "ajax-04";//03页面在02页面的基础之上做了一个封装
}
}
2.html客户端层
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>The Ajax 04 Page</h1>
<fieldset>
<legend>Ajax 表单请求(Ajax框架-小试身手)</legend>
<form>
<input type="text" name="name" id="nameId" onblur="doCheck()" onfocus="doClear()">
<input type="button" onclick="doSave()" value="Save">
</form>
<span id="result"></span>
</fieldset>
<script type="text/javascript" src="/ajax/ajaxfk.js"></script>
<!-- 在编程中我们要学会封装共性,提取特性,以实现代码的可重用性 -->
<script type="text/javascript">
function doClear(){
document.getElementById("result").innerHTML="";
}
//保存业务的实现
function doSave(){
//1.定义请求url
var url="doSave";
//2.定义请求参数
var params="name="+document.forms[0].name.value;
//3.发送异步的post请求
Ajax.doAjaxPost(url,params,function(result){
document.getElementById("result").innerHTML=result;
})
}
//检查名字是否存在的业务代码
function doCheck(){//在此函数中向服务端发起异步请求,检测name是否存在
//1.定义请求url
var url="doCheck";
//2.定义请求参数
var name=document.forms[0].name.value;
var params="name="+name;
//3.发送异步Get请求
Ajax.doAjaxGet(url,params,function(result){
document.getElementById("result").innerHTML=result;
})
}
</script>
</body>
</html>
3.js框架 模板
(function(){
//定义构造函数
var ajax=function(){};
//在构造函数的原型对象上添加函数
ajax.prototype={
doAjaxGet:function(url,params,callback){
//1.创建XHR对象
var xhr=new XMLHttpRequest();
//2.设置状态监听
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
callback(xhr.responseText);//处理服务端响应的结果数据
}
};
//3.打开链接
xhr.open("GET",url+"?"+params,true);
//4.发送请求
xhr.send(null);//Get请求send方法传值
},
doAjaxPost:function(url,params,callback){
//1.创建XHR对象
var xhr=new XMLHttpRequest();
//2.设置状态监听
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
callback(xhr.responseText);
}
};
//3.打开链接
//var name=document.getElementById("nameId").value;
var name=document.forms[0].name.value;
xhr.open("POST",url,true);
//post请求要设置请求头(规定)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.发送请求
xhr.send(params);//Post请求send方法传值
}
}
//通过一个全局变量来指向它我们构建的对象.
window.Ajax=new ajax();
})()//函数自调用(基于此方式来防止js中的污染事件)
通过this方式去写
Ajax局部更新问题
跳回activity
修正根路径 controller层
注解 返回json串
服务端 数据 修正
表示了异步加载 局部更新
扩展
性能不好 传统的
错误示范 去点就可以找到
时间显示问题
Activity自己实践
1.controller层
/**查询所有活动信息
* 页面和数据一起返回,这种写法的问题:
* 1)当业务数据加载非常慢,页面也响应的速度也会慢.
* 2)现在在这种大前端架构下,各种端百花齐放(浏览器,手机端,手表端,....),假如有些端只要数据,不需要你的页面.
* 你也返回一个页面这时没有的
* */
// @RequestMapping("/activity/doFindActivitys")
// public String doFindActivitys(Model model) {
// List<Activity> list = activityService.findAcitivty();
// model.addAttribute("list", list);
// /*
// for (Activity item : list) {
// System.out.println(item);
// }
// */
// return "activity";
// }
@RequestMapping("/activity/doFindActivitys")
@ResponseBody
//当我们方法返回值为一个或多pojo对象时(也可是map)
//spring mvc还会检测方法上是否有@ResponseBody注解,
//假如有这个注解,spring mvc还会将返回的对象转换为json格式字符串.
public List<Activity> doFindActivitys(){
return activityService.findAcitivty();
}
@RequestMapping("/activity/doActivityUI")
public String doActivityUI() {
return "activity";
}
2.html 客户端层
注释掉获取的信息 加入td
3.尝试运行 看客户端呈现页面
加了jsonView之后的页面
继续写html代码 客户端层面
搬到下面过来了
利用json知识
4.service层
之前没写完全html 客户端层面的时候
模拟的耗时操作
5.pojo层
获取json数据格式 换成好辨别的数据格式
6.再次查看执行效果
把模拟加载延迟打开 (servicelmpl注释取消)
页面显示
一开始
效果实现
自我留下的作业
用原先的html代码 实现Activity日期下拉小列表
还要就是了解自调用和json jquery代码
168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
