java Web中MVC、Ajax与jQuery重点总结
MVC：
系统结构分析：
系统处理流程：
设计模式：JavaBean+Servlet+JSP
模型—model
视图—view
控制器—controller
JSP model1：
JSP中进行显示和调度。
JSP model1：
JSP：负责生成动态网页
Servlet：负责流程控制
JavaBean：负责业务逻辑处理
MVC处理过程：
- 控制器接收用户的请求，并决定应该调用哪个模型来进行处理
- 模型根据用户请求进行相应的业务逻辑处理，并返回数据
- 控制器调用相应的视图格式化模型返回的数据，并通过视图呈现给用户
MVC优点：
- 多视图共享一个模型，大大提高代码的可重用性
- MVC三个模块相互独立，松耦合架构
- 控制器提高了应用程序的灵活性和可配置性
Ajax：
Web 2.0的特点：
- 用户贡献内容
- 内容聚合RSS
- 更丰富的“用户体验”
- 所有操作都是在不刷新窗口的情况下完成的
为什么使用Ajax：
- 无刷新：不刷新整个页面，只刷新局部
- 无刷新的好处
- 只更新部分页面，有效利用带宽
- 提供连续的用户体验
- 提供类似C/S的交互效果，操作更方便
传统Web与Ajax的差异：
|
差异 |
方式 |
说 明 |
|
发送请求方式不同 |
传统Web |
浏览器发送同步请求 |
|
Ajax技术 |
异步引擎对象发送请求 |
|
|
服务器响应不同 |
传统Web |
响应内容是一个完整页面 |
|
Ajax技术 |
响应内容只是需要的数据 |
|
|
客户端处理方式不同 |
传统Web |
需等待服务器响应完成并重新加载整个页面后用户才能进行操作 |
|
Ajax技术 |
可以动态更新页面中的部分内容 不影响用户在页面进行其他操作 |
Ajax：异步刷新技术
XMLHttpRequest：
整个Ajax技术的核心；提供异步发送请求的能力；常用方法：
|
方 法 |
说 明 |
|
open( String method, String url, boolean async, String user,String password) |
创建一个新的HTTP请求 |
|
send( String data ) 如果是get这里的data必须是null，要传数据在上面的url上写？name=传入数据 |
发送请求到服务器端 |
|
abort( ) |
取消当前请求 |
|
setRequestHeader(String header, String value) |
设置请求的某个HTTP头信息 |
|
getResponseHeader(String header) |
获取响应的指定HTTP头信息 |
|
getAllResponseHeader( ) |
获取响应的所有HTTP头信息 |
事件（某一个事件发生了）：
onreadystatechange：指定回调函数
常用属性：
1. readyState（就是一种状态）：XMLHttpRequest的状态信息
|
就绪状态码 |
说 明 |
|
0 |
XMLHttpRequest对象未完成初始化 |
|
1 |
XMLHttpRequest对象开始发送请求 |
|
2 |
XMLHttpRequest对象的请求发送完成 |
|
3 |
XMLHttpRequest对象开始读取响应 |
|
4 |
XMLHttpRequest对象读取响应结束 |
2. status：HTTP的状态码（服务器会返回一个状态码）
|
状态码 |
说明 |
|
200 |
服务器正确返回响应 |
|
404 |
请求的资源不存在 |
|
500 |
服务器内部错误 |
|
403 |
没有访问权限 |
|
… |
…… |
就绪状态是4且状态码是200，表示正确完成
3. statusText：返回当前请求的响应状态
4. responseText：以文本形式获得响应的内容
5. responseXML：将XML格式的响应内容解析成，DOM对象返回
Ajax实现步骤：
前端：
使用Ajax技术实现异步交互：
1. 创建XMLHttpRequest对象
Var X=new XMLHttpRequest();
XMLHttpRequest：只能是IE6以上版本以及其他浏览器。
IE6以下版本ActiveXObject("Microsoft.XMLHTTP")
2. 通过XMLHttpRequest对象设置请求信息
x.open("GET/POST",url); url--->GET：URL?name=value；POST：URL
3. 向服务器发送请求
x.send( ); GET：null；POST：name1=value1 && name2=value2
x.setRequestHeader( "Content-type","application/x-www-form-urlencoded" );
4. 创建回调函数，接收返回的数据，根据响应状态动态更新页面
req.onreadystatechange=callback;
function callback(){
if(req.readystate=4 && req.status==200){ //判断状态是否成功返回
var data=req.responseText; //得到返回的值
if(data=="true"){ //判断得到的结果：使用jquery或js
$("#nameDiv").html("用户名已经存在");
}else{
$("#nameDiv").html("用户名可以使用");
} } }
5. 编写服务器端处理客户端请求
a. 接收参数：
request.getParameter();
b. 返回参数：
String result="ok";
if(uname.equals(XXX)){ result="no"; }
PrintWriter out = response.getWriter();
response.setContentType("text/html;charset=UTF-8");
out.print(result);
out.flush();
out.close();
GET请求和POST请求的区别：
|
步 骤 |
请求方式 |
实 现 代 码 |
|
初始化组件 |
GET |
xmlHttpRequest.open( "GET", url, true ); |
|
POST |
xmlHttpRequest.open( "POST", url, true ); xmlHttpRequest.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" ); |
|
|
发送请求 |
GET |
xmlHttpRequest.send( null ); |
|
POST |
xmlHttpRequest.send("key=xxx&type=12&year=2016"); |
使用jQuery实现Ajax：
传统方式实现Ajax的不足：
- 步骤繁琐
- 方法、属性、常用值较多不好记忆
- 处理复杂结构的响应数据（如XML格式）比较烦琐
- 浏览器兼容问题
jQuery将Ajax相关操作都进行了封装。
$.ajax()：
语法：$.ajax( [settings] );
常用属性参数：
|
参数 |
类型 |
说明 |
|
url |
String |
发送请求到的地址，默认为当前页地址 |
|
type |
String |
请求方式，默认为GET |
|
data |
PlainObject 或 String 或 Array |
发送到服务器的数据 |
|
dataType |
String |
预期服务器返回的数据类型。 包括：XML、HTML、Script、JSON、JSONP、text |
|
timeout |
Number |
设置请求超时时间 |
|
global |
Boolean |
表示是否触发全局Ajax事件，默认为true |
常用函数参数：
|
参数 |
类型 |
说明 |
|
beforeSend |
Function ( jqXHR jqxhr, PlainObject settings ) |
发送请求前调用的函数 |
|
success |
Function( 任意类型 result, String textStatus, jqXHR jqxhr ) |
请求成功后调用的函数 参数result：可选，由服务器返回的数据 |
|
error |
Function ( jqXHR jqxhr, String textStatus, String errorThrown ) |
请求失败时调用的函数 |
|
complete |
Function ( jqXHR jqxhr, String textStatus ) |
请求完成后（无论成功还是失败）调用的函数 |
使用$.ajax()发送异步请求：
$.ajax( { //方法里要传入几个关键的属性记得写英文的冒号和逗号
"url" : "url", // 要提交的URL路径（如果是get请求可以参数放到后面）
"type" : "get", // 发送请求的方式（get或者post）
"data" : data, // 要发送到服务器的数据
"dataType" : "text", // 指定传输的数据格式（是服务器返回的数据的格式）
"success" : function(result) { // 请求成功后要执行的代码（result是关键参数） },
"error" : function() { // 请求失败后要执行的代码 }
（最好带上这个是写法更加严谨）
} );
认识JSON：
JSON（JavaScript Object Notation）
- 一种轻量级的数据交换格式
- 采用独立于语言的文本格式
- 通常用于在客户端和服务器之间传递数据
JSON的优点：
- 轻量级交互语言
- 结构简单
- 易于解析
定义JSON对象：
语法：var JSON对象 = { "name" : value, "name" : value, …… };
示例：var person = { "name" : "张三", "age" : 30, "spouse" : null };
定义JSON数组：
语法：
var JSON数组 = [ value, value, …… ];
示例：
var countryArray = [ "中国", "美国", "俄罗斯" ];
var personArray = [ { "name":"张三","age":30 },{ "name":"李四","age":40 } ];
读取和展示JSON数据：
定义JSON格式数据并在页面输出：
var user={"id":1,name:"张三",password:"0000"};
$("#id").html("用户ID："+user.id);
$("#name").html("用户名："+user.name);
$("#password").html("密码："+user.password);
定义字符串数组：
var countryArray=["中","美","俄"];
for(var i=0;i<countryArray.length;i++){
var li="<li>"+countryArray[i]+"</li>";
$("#str1-ul").append(li);
}
var $countryArray=$(countryArray);
$countryArray.each(function(){
var option="<option>"+this+"</option>";
$("#str2-select").append(option);
});
var userArray=[{"id":"1",name:"admin",password:"111"},{id:"2",name:"admin2",password:"222"},{id:"3",name:"admin3",password:"333"}];
属性名可以加引号也可以不加：
var $userArray=$(userArray);
$userArray.each(function(){
$("#userArray").append("<tr>"+"<td>"+this.id+"</td>"+"<td>"+this.name+"</td>"+"<td>"+this.password+"</td>"+"</tr>");
});
$.get()：
语法：$.get( url [, data] [, success] [, dataType] );
|
参数 |
类型 |
说明 |
|
url |
String |
必选，发送请求的地址 |
|
data |
PlainObject 或 String |
发送到服务器的数据 |
|
success |
Function( PlainObject result, String textStatus, jqXHR jqxhr ) |
请求成功后调用的函数 参数result：可选，由服务器返回的数据 |
|
dataType |
String |
预期服务器返回的数据类型，包括：XML、HTML、Script、JSON、JSONP、text |
使用$.get() 实现异步交互：
$.get( url, data, function( result ) { //省略将服务器返回的数据显示到页面的代码 });
以上代码等价于：
$.ajax( {
"url" : url,
"data" : data,
"type" : "get",
"success" : function( result ) { // 省略代码 } });
$.post()：
语法：$.post( url [, data] [, success] [, dataType] );
|
参数 |
类型 |
说明 |
|
url |
String |
必选，发送请求的地址 |
|
data |
PlainObject 或 String |
发送到服务器的数据 |
|
success |
Function( PlainObject result, String textStatus, jqXHR jqxhr ) |
请求成功后调用的函数 参数result：可选，由服务器返回的数据 |
|
dataType |
String |
预期服务器返回的数据类型，包括：XML、HTML、Script、JSON、JSONP、text |
使用$.post() 实现异步交互：
$.post( url, data, function( result ) { // 省略将服务器返回的数据显示到页面的代码 });
以上代码等价于：
$.ajax( {
"url" : url,
"data" : data,
"type" : "post",
"success" : function( result ) { // 省略代码 } } );
$.getJSON()：
语法：$.getJSON( url [, data] [, success] );
|
参数 |
类型 |
说明 |
|
url |
String |
必选，发送请求的地址 |
|
data |
PlainObject 或 String |
发送到服务器的数据 |
|
success |
Function( PlainObject result, String textStatus, jqXHR jqxhr ) |
请求成功后调用的函数 参数result：可选，由服务器返回的数据 |
使用$.getJSON() 实现异步交互：
$.getJSON( url, data, function( result ) { // 省略将服务器返回的数据显示到页面的代码 });
以上代码等价于：
$.ajax( {
"url" : url,
"data" : data,
"type" : "get",
"dataType" : "json",
"success" : function( result ) { // 省略代码 }});
$.getJSON()方法只能以GET方式发送请求
.load()：
语法：$( selector ).load( url [, data] [, complete] );
|
参数 |
类型 |
说明 |
|
url |
String |
必选，发送请求的地址 |
|
data |
PlainObject或String |
发送到服务器的数据 |
|
complete |
Function( String responseText, String textStatus, jqXHR jqxhr ) |
对每个匹配元素设置完内容后都会触发的函数 参数responseText：可选，服务器返回的数据 |
.load()不是全局函数，而是针对与选择器匹配的元素执行
包含匿名回调函数，自动将返回值设置为匹配元素的HTML内容
使用.load()实现异步交互：
$( "#opt_area>ul" ).load( url, data );
以上代码等价于：
$.get( url, data, function( responseText ) { $( "#opt_area>ul" ).html( responseText ); });
默认使用GET方式请求，除非data参数是一个对象，则使用POST方式
基于表单数据的Ajax请求：
需要发送表单数据时，提取表单元素的值并构造成合适的数据格式是件很烦琐的事
使用jQuery提供的方法简化处理：
.serializeArray()
1. 检测一组表单元素中的有效控件
没有被禁用；必须有name属性；选中的checkbox或radio；触发提交事件的submit按钮；file元素不会被序列化
2. 将有效控件序列化为JSON对象数组
包含name和value两个属性
$.param()
将由. serializeArray()生成的对象数组序列化成请求字符串的形式
jQuery还提供了.serialize()方法。
.serialize()内部使用$.param()对.serializeArray()做了一个简单包装。不需要中间环节时，可以更简便地完成表单数据的序列化
FastJSON：
- 一个性能很好的、Java实现的JSON解析器和生成器
- 将Java对象序列化成JSON字符串
- 将JSON字符串反序列化得到Java对象
https://github.com/alibaba/fastjson/releases
FastJSON API：
1. 入口类：com.alibaba.fastjson.JSON
|
方法 |
说明 |
|
public static String toJSONString ( Object object ) |
将Java对象序列化成JSON字符串 |
|
public static String toJSONString ( Object object, boolean prettyFormat ) |
prettyFormat为true时生成带格式的JSON字符串 |
|
public static String toJSONString ( Object object, SerializerFeature… features ) |
可以通过参数features指定更多序列化规则 |
|
public static String toJSONStringWithDateFormat ( Object object, String dateFormat, SerializerFeature… features ) |
可以通过参数dateFormat指定日期类型的输出格式 |
2. 枚举类型：SerializerFeature 定义了多种序列化属性
|
枚举值 |
说明 |
|
QuoteFieldNames |
为字段名加双引号，默认即使用 |
|
WriteMapNullValue |
输出值为null的字段，默认不输出 |
|
WriteNullListAsEmpty |
将值为null的List字段输出为[ ] |
|
WriteNullStringAsEmpty |
将值为null的String字段输出为“” |
|
WriteNullNumberAsZero |
将值为null的数值字段输出为0 |
|
WriteNullBooleanAsFalse |
将值为null的Boolean字段输出为false |
|
SkipTransientField |
忽略transient字段，默认即忽略 |
|
PrettyFormat |
格式化JSON字符串，默认不格式化 |
示例：
// 包含值为 null 的字段，数值为 null 输出0，String 为 null 输出“”
String strJSON = JSON.toJSONString ( javaObject,
SerializerFeature.WriteMapNullValue,
SerializerFeature.WriteNullNumberAsZero,
SerializerFeature.WriteNullStringAsEmpty );
jQuery让渡$操作符：
jQuery定义了jQuery.noConflict()方法，放弃对$的使用权，以免与其他脚本库冲突
示例：
jQuery.noConflict(); // 让渡$使用权，后续jQuery代码使用jQuery代替$
jQuery( document ).ready( … );
或者重新指定一个替代符号：
var $j = jQuery.noConflict(); // 让渡$使用权，并指定用 $j 代替$
$j( document ).ready( … );
jQuery.noConflict(); // 让渡$使用权，其他脚本库可以使用$
jQuery( document ).ready( function( $ ) {
// 在这里继续使用$编写jQuery代码
$( "#show" ).click( … ); } );
或者：
jQuery.noConflict(); // 让渡$使用权，其他脚本库可以使用$
( function( $ ) {
// 在这里继续使用$编写jQuery代码
$( document ).ready( function() {
$( "#show" ).click( … );
} ); } )( jQuery );