Ajax_JQuery

1. mvc的优缺点 
   mvc的优点
   1)  一个模型可以被多个视图共享模型只负责输出数据，不关心数据的表现形式，同一份数据，可
   以使用多个不同的视图展现给用户。模型只负责处理数据，不关心是谁在调用，可以使用多种
   不同的界面来调用模型。
   2)  方便测试
     模型一般使用java类来开发，在开发完成之后，可以立即测试。如果业务逻辑直接写在servlet
     里面，则需要部署在服务器上面才能测试，比较麻烦。
   3)  组件复用
     控制器可以做成一个通用的模块。
   4)  代码好维护，利予分工协作。
     按照mvc的思想，可以对程序进行分层，一般划分成表示层(包括v,c)、业务层(m中的业务逻
     辑部分)、持久层(m中的数据访问逻辑部分)。下一层的代码发生改变，只要接口不变，不会影
     响到上一层的代码。
   
   mvc的缺点
   1)  采用mvc以后，会增加代码量，相应的开发周期以及开发的成本会相应增加。
   2)  使用mvc，需要良好的设计。如果设计不当，会增加开发的难度。
   
   结论
   一般来说，如果一个程序需要良好的架构，需要良好的代码的可维护性及可扩展性，需要使用mvc
   思想来架构。反之，则不必使用。
   
   MVC的分层概念图示演示

在表示层Servlet中调用业务层代码的接口，当业务层发生改变时不影响Servelt；

在业务层Service中调用DAO的接口，DAO发生改变不影响Service和其上层 

2.ajax

1)  asynchronous javascript and xml(异步的javascript和xml)。
  为了解决传统的web应用当中“等待-响应-等待"的弊端而创建的一种技术，其实质可以理解
  为：使用浏览器内置的一个对象(XmlHttpRequest)向服务器发送请求，服务器返回xml数据
  或者是文本数据给浏览器，然后在浏览器端，使用这些数据更新部分页面，整个过程，页面无
  任何的刷新。
2)  “等待-响应-等待”：
指的是，在传统的web应用当中，比如注册，用户填写完整个注册信息，然后提交，此时，
浏览器会将整个注册页面抛弃，等待服务器返回一个新的完整的页面。在等待过程当中，用户
不能够做其它操作。服务器生成新的页面发送给浏览器，浏览器需要重新解析这个页面生成相
应的界面。

解决“等待-响应-等待”问题 

 

1)  Ajax引擎（即XmlHttpRequest对象），首先为该对象注册一个监听器（该监听器是一个事
件处理函数，对状态改变事件（readyStatechange）进行监听）
2)  当用户对GUI 做了某种操作（将产生对应的事件，如焦点失去事件等）
3)  一旦产生对应的事件，将触发事件处理代码
4)  在执行事件处理代码时，会调用Ajax引擎（XmlHttpRequest对象）
5)  发送请求：Ajax引擎被调用后，将独自向服务器发送请求（独立于浏览器之外）
继续其他操作：在Ajax引擎发送请求的同时，用户在浏览器还可以对GUI 继续做其他操作
该请求是异步请求（Ajax引擎发送请求时，没有打断用户的操作）
6)  服务器的web组件对请求进行处理
7)  服务器可能会调用到数据库或者处理业务逻辑的Java类
8)  服务器将处理结果响应给（只返回部分数据，可以是xml或者文本）Ajax引擎
9)  监听器通过Ajax引擎获取响应数据（xml或者文本）
10)  监听器对GUI 中的数据进行更新（局部更新，不是整个页面刷新）
在整个过程中大部分是通过JS实现的，响应数据可能是xml，所以Ajax可以看做是多种技术的融
合。 

3.XmlHttpRequest 对象的重要属性  

1)  onreadystatechange: 注册一个监听器(也就是，绑订一个事件处理函数)。
2)  readyState:  返回该对象与服务器通讯的状态。
     返回值是一个number 类型的值，不同的值表示的
     含义如下：
     0 (未初始化) 对象已建立，但是尚未初始化(尚未调用open方法)。
     1 (初始化) 对象已建立，尚未调用send 方法。
     2 (发送数据) send方法已调用。
     3 (数据传送中) 已接收部分数据。
     4 (响应结束)接收了所有的数据。 
3)  responseText: 获得服务器返回的文本。
4)  responseXML: 获得服务器返回的XML dom对象。
5)  status: 获得状态码 

4.缓存问题
在使用ie浏览器时，如果使用get方式发送请求，浏览器会将数据缓存起来。这样，当再次发送请
求时，如果请求地址不变，ie不会真正地向服务器发请求，而是将之前缓存的数据显示给用户。
解决方式： 

方式一：使用post方式。
方式二：在请求地址后面添加一个随机数。

5.在ajax应用当中的编码问题 
1)  如果采用post方式向服务器发送请求,会使用"utf-8"对请求中的数据进行编码。
在服务器端，需要使用request.setCharacterEncoding("utf-8");去解码即可。
2)  如果采用get方式向服务器发送请求,ie会使用"gbk"/"gb2312"对请求中的数据进行编码。
  而firefox会使用"utf-8"来编码。
解决方式:
  step1 
找到tomcat的server.xml文件(TOMCAT_HOME/
  conf/server.xml)。添加"URIEncoding="utf-8";
  作用是告诉服务器，对于get请求中的数据，使用"utf-8"解码。
  step2 
对请求地址使用encodeURI()函数进行处理，该函数的作用是：对请求地址中的中文进行
"utf-8"编码。

6.ajax技术的优点 

1)  页面无刷新
2)  不打断用户的操作，用户的体验好。
3)  按需获取数据，浏览器与服务器之间数据的传输量减少。
4)  是一个标准技术，不需要下载任何的插件。
5)  可以利用客户端(浏览器)的计算能力。

7.Json

1)  json是什么?
  javascript object notation。是一种数据交换的标准，一般用于浏览器与服务器之间的数据转
  换。比如，将一个java对象转换成浏览器端可以识别的javascript对象。 

2)  json的基本语法
a.  如何表示一个对象
 {"name" : "zs" , "age" : 22}
 {"name" : "ls" , 
     "addr" :  {"city" : "bj" , "street" : "ca"} }
 属性名要添加引号。
 属性值如果是字符串，要添加引号。
 数据类型:string,number,boolean,null,object
b.  如何表示一个对象数组
 [{},{},{}]
3)  如何将一个java对象(包括java对象数组、集合)转换成一个json字符串。
  使用json库提供的工具。
a.  对象
   JSONObject jsonObj = JSONObject.fromObject(srcObj);
   String jsonStr = jsonObj.toString();
b.  数组或者List集合
   JSONArray jsonArr = JSONArray.fromObject(listObj);
   String jsonStr = jsonArr.toString();
4)  如何将一个json字符串转换成js对象。
  可以prototype库提供的evalJSON()函数。
5)  如何处理日期类型
  step1 
  写一个转换器

  写一个java 类，实现JsonValueProcessor 接口 

  step2
实现两个process 方法：按照你自己的要求，定义转换规则。
  step3 
创建JsonConfig 对象，使用该对象注册转换器。
  step4 
JSONArray.fromObject(srcObj,JsonConfig); 

8.jQuery
1)  jQuery是什么
JavaScript的框架有很多，比如prototype、JQuery、ExtJS等等。jQuery的通用性很好。
jQuery设计思想是将原始的dom对象封装成一个jQuery对象，通过调用jQuery对象的方
法来实现对原始的dom对象的操作。这样设计的目的是：是为了更好地兼容不同的浏览器,
简化代码。
2)  编程步骤
step1 
使用jQuery提供的选择器找到节点,一般情况下，jQuery会将找到的节点封装成jQuery对象。
step2 
调用jQuery对象提供的方法。
3)  jQuery对象与dom对象之间的转换。
a.  dom对象转换成jQuery对象。
  使用 var $obj = $(dom对象);
b.  jQuery对象转换成dom对象。
  使用 var obj = $obj.get(0)或者 var obj = $obj.get()[0]
4)  如何同时使用jQuery与prototype。
step1 
先引入prototype.js
step2 
使用jQuery.noConflict()函数，为jQuery的$函数提供一个别名。
5)  jQuery选择器
jQuery选择器模仿css 选择器的语法，其作用是，查找符合选择器要求的节点。
a.  基本选择器
 #id
 .class
 element
 selector1,select2..selectn
 *
b.  层次选择器
 select1 select2
 select1>select2
 select1+select2
 select1~select2 
c.  过滤选择器
1)  基本过滤选择器
 :first
 :last
 :not(selector)
 :even
 :odd
 :eq(index)
 :gt(index)
 :lt(index)
2)  内容过滤选择器
 :contains(text)
 :empty
 :has(selector)
 :parent
3)  可见性过滤选择器
 :hidden
 :visible
4)  属性过滤选择器
 [attribute]
 [attribute=value]
 [attribute!=value]
5)  子元素过滤选择器
 :nth-child(index/even/odd)
6)  表单对象属性过滤选择器
 :enabled
 :disabled
 :checked
 :selected
d. 表单选择器
 :input
 :text
 :pasword
 :radio
 :checkbox
 :submit
 :image
 :reset
 :button
 :file
 :hidden 

9.dom操作 

1.1. 知识点
1)  查询
利用选择器查找到节点：
 text() 
输出或者设置节点之间的文本,text方法相当于dom节点的innerText属性
 html()
输出或者设置节点之间的html内容,html方法相当于dom节点的innerHTML属性。
 attr()
输出或者设置节点的属性值。
 val()
此外，下拉列表,可以使用val()获得值
2)  创建
 $(html);
3)  插入节点
 append()  
向每个匹配的元素内部追加内容
 prepend() 
向每个匹配的元素内部前置内容
 after()  
在每个匹配的元素之后插入内容
 before()   
在每个匹配的元素之前插入内容
4)  删除节点
 remove()
 remove(selector)   
 empty()     清空节点 

5)  复制节点
 clone()     复制（不复制行为）
 clone(true):    使复制的节点也具有行为
6)  属性操作
 attr('');      读取属性
 设置：attr('','') 
 或者一次设置多个 attr({"":"","":""});
 删除：removeAttr('')
7)  样式操作
 attr("class","")    获取和设置   
 addClass('')     追加    
 removeClass('')   移除
或者removeClass('s1 s2') 
或者removeClass()   会删除所有样式
 toggleClass()     切换样式：
 hasClass('')    是否有某个样式 
 css('')     读取设置css('','')或者css({'':'','':''})//设置多个样式
8)  遍历节点
 children()     只考虑子元素，不考虑其它后代元素。
 next()
 prev()
 siblings():     兄弟节点
 find(selector)    

10.事件处理  

2.1. 知识点
1)  事件绑订
  bind(type,fn)
2)  绑订方式的简写形式
  click(function(){
});
3)  合成事件
 hover(enter,leave) : 模拟光标悬停事件
 toggle(fn1,fn2...)：模拟鼠标连续单击事件
4)  事件冒泡
 获得事件对象
   //e不再是原始的事件对象，而是jQuery
   //封装之后的事件对象。
   click(function(e){
   });
 停止冒泡
   event.stopPropagation()
 停止默认行为
   event.preventDefault()
5)  事件对象的属性
 event.type:获得事件类型

 event.target:获得事件源,返回的是原始的dom节点 

11. 动画   

1)  show():   显示
hide():  隐藏
show("slow"/"normal"/"fast"/100)   可以带参数
hide("slow"/"normal"/"fast"/100)   可以带参数
2)  fadeIn()   
fadeOut(): 改变不透明度
3)  slideUp():  
  slideDown():  改变元素的高度
4)  以上函数     可以在执行完动画之后，再执行一个回调函数。
  show('slow',function(){
   //写上动画执行之后要执行的操作。
  })
5)  自定义动画 
animate(params,speed,[callback]) 

12. jquery操作类数组的方法 
$(选择器)操作返回的如果是一个数组，可以使用如下方法来操作：
1)  each(fn(i))  循环遍历每一个元素,this 代表被迭代的dom对象，$(this)代表被迭代
    的jQuery对象。
2)  eq(index)   返回index+1位置处的jquery对象
3)  index(obj)  返回下标，其中obj可以是dom对象或者jQuery对象。
4)  length属性个数
5)  get()    返回dom对象组成的数组
6)  get(index)  返回index+1处的dom对象。 

13. jQuery对ajax的支持  
1）$.ajax(options):options
options 是一个形如{key1:value1,key2:value2...}的js 对象，用于指定发送请求的选项。
  选项参数如下：
 url(string):   请求地址
 type(string):    GET/POST
 data(object/string):  发送到服务器的参数
 dataType(string):   预期服务器返回的数据类型，一般有：
  json:   返回json字符串
  xml:   返回xml文档
  html:  返回的是一个html内容
  script:  返回的是一个javascript脚本
  text:   返回的是一个文本
 回调函数success(function)
请求成功后调用的回调函数，有两个参数：function(data , textStatus),其中，
  data：   服务器返回的数据
  textStatus  描述状态的字符串
 回调函数error(function):
请求失败时调用的函数，有三个参数function(xhr , textStatus , errorThrown)。
  textStatus 与errorThrown这两个参数只有一个可用。
（一般很少用）
2)  $.get(url,[data],[callback],[type]):
发送get请求
 url:    请求地址
 data:  请求参数，可以是一个js 对象{"name":"zs","age":22}，
也可以是一个请求字符串 "name=zs&age=22"。
 callback:   回调函数。
      callback 格式function(data,statusText){}
 type:  预期服务器返回的数据类型
$.post()格式同上。
3)  load(url)
将服务器响应插入当前jQuery对象匹配的dom元素之内
var $obj = $(选择器);
$obj.load(url);
4)  serialize():
为了方便地向服务器传递参数，可以使用serialize()
 serialize(): 
将jQuery对象包含的表单或者s 表单域转换成查询字符串
serializeArray(): 
转换为一个数组，每个数组元素形如 {name:fieldName,value:fieldVal}的对象。