java Web中MVC、Ajax与jQuery重点总结

MVC：

系统结构分析：

系统处理流程：

设计模式：JavaBean+Servlet+JSP

模型—model

视图—view

控制器—controller

JSP model1：

JSP中进行显示和调度。

 

JSP model1：

JSP：负责生成动态网页

Servlet：负责流程控制

JavaBean：负责业务逻辑处理

MVC处理过程：

1. 控制器接收用户的请求，并决定应该调用哪个模型来进行处理
2. 模型根据用户请求进行相应的业务逻辑处理，并返回数据
3. 控制器调用相应的视图格式化模型返回的数据，并通过视图呈现给用户

MVC优点：

1. 多视图共享一个模型，大大提高代码的可重用性
2. MVC三个模块相互独立，松耦合架构
3. 控制器提高了应用程序的灵活性和可配置性

Ajax：

Web 2.0的特点：

1. 用户贡献内容
2. 内容聚合RSS
3. 更丰富的“用户体验”
4. 所有操作都是在不刷新窗口的情况下完成的

为什么使用Ajax：

1. 无刷新：不刷新整个页面，只刷新局部
2. 无刷新的好处

1. 只更新部分页面，有效利用带宽
2. 提供连续的用户体验
3. 提供类似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的不足：

1. 步骤繁琐
2. 方法、属性、常用值较多不好记忆
3. 处理复杂结构的响应数据（如XML格式）比较烦琐
4. 浏览器兼容问题

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）

1. 一种轻量级的数据交换格式
2. 采用独立于语言的文本格式
3. 通常用于在客户端和服务器之间传递数据

JSON的优点：

1. 轻量级交互语言
2. 结构简单
3. 易于解析

定义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

var li="

"+countryArray[i]+"

";

     $("#str1-ul").append(li);

}

var $countryArray=$(countryArray);

$countryArray.each(function(){

var option=""+this+"";

      $("#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(""+""+this.id+""+""+this.name+""+""+this.password+""+"");

});

$.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：

1. 一个性能很好的、Java实现的JSON解析器和生成器
2. 将Java对象序列化成JSON字符串
3. 将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 );

 

总结：