ajax
概念
ajax, asychronous javascript and xml *异步*的javascript和xml技术。ajax并不是一名新技术。ajax就是javascirpt技术。 ajax是一种新的客户端（浏览器）和 服务器端 的交互模式。
同步与异步区别
同步交互模式：
特点：
1）下一个请求必须等上一个请求完毕才能发出
2）服务器的响应会刷新整个网页（全局刷新）
异步交互模式：
特点：
1）每个浏览器的请求是独立的，互不干扰的
2）服务器的响应实现页面局部刷新
Ajax开发步骤
1：创建异步对象
IE浏览器低版本：ActiveXObject
非IE浏览器和IE高版本： XMLHttpRequest
function createAjax(){
var ajax;
try{
//IE低版本（IE高版本也兼容，非IE不行）
ajax = new ActiveXObject("microsoft.xmlhttp");
}catch(error){
//非IE或IE高版本也兼容:(火狐，谷歌等)
ajax = new XMLHttpRequest();
}
return ajax;
}
2：根据服务器返回的结果局部更新网页（DOM编程）
//监听服务器的响应: onreadystatechange(): 监听服务器状态的返回
ajax.onreadystatechange = function(){
//服务器处理的状态ajax.readyState
//响应码 ：ajax.status
//200: 一切都没问题
//404: 页面找不到
//500: 服务器代码出错了
//alert(ajax.status);
if(ajax.readyState==4 && ajax.status==200){
//5.获取服务器返回的结果. responseText 以html格式返回的数据
var curTime = ajax.responseText;
document.getElementById("timeSpanID").innerHTML = curTime;
}
};
3：准备请求
准备请求方式（GET、POST），准备请求路径
var userName = this.value; //拿当前value值
//请求方式 //注意：如果是POST提交，必须带上一个请求头：content-type,值为application/x-www-form-urlencoded
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
var method = "GET";
//请求路径
var url = "${pageContext.request.contextPath}/GetTimeServlet2"; //传送的servlet地址
ajax.open(method,url);
4：发送请求，同时携带内容（只有POST才可以）
var content = null;
ajax.send(content); //get里面填null, post里面填需要传送的值
5：监听服务器的响应
6：获取服务器返回的结果
JSON概念和作用
概念
JSON，JavaScript Object Natation ，javascript对象标记语言，是javascript的子集
JSON是一种轻量级的*数据交换*格式。
Json语法
数据描述方式
:(冒号) : 描述键值对象（名称=值） 例如： name:"eric"
,（逗号）: 描述多个数据之间的并列关系 例如 ： name:"eric",pass:"123"....
{}（大括号）： 描述的是对象 例如： {name:"eric",pass:"123"}
[](中括号)： 描述的是数组 例如：[{name:"eric",pass:"123"},{name:"jack",pass:"321"}]
元素值可具有的类型：string, number, object, array, true, false, null
$.ajax()返回参数设置：
url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。
type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和
delete也可以使用，但仅部分浏览器支持。
timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。
async：要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。 如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
cache：要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false）。设置为false将不会从浏览器缓存中加载请求信息。
data: 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格 式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
dataType: 要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
json：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个 “?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。
beforeSend：要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义 HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。
function(XMLHttpRequest){
this; //调用本次ajax请求时传递的options参数
}
complete：要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。
function(XMLHttpRequest, textStatus){
this; //调用本次ajax请求时传递的options参数
}
success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
(1)由服务器返回，并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //调用本次ajax请求时传递的options参数
error：要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错
json字符串转换工具
导包json-lib
T_Province pro = new T_Province();
pro.setId(1);
pro.setName("广东省");
//排除某个字段不转换
JsonConfig jc = new JsonConfig();
jc.setExcludes(new String[]{"id"});
//如果需要全部获得就不需要增加jc对象
JSONArray ja = JSONArray.fromObject(pro,jc);
System.out.println(ja.toString());
struts2整合json插件
原理：org.apache.struts2.json.JSONResult 把值栈数据转换成json字符串
步骤：
1：导入struts2-json插件的jar包
struts2-json-plugin-2.3.24.3.jar
2：Action代码
//查询省份
public String listProvince(){
List<T_Province> provinces = addressDao.getAllProvices();
//把provinces数据转换成json字符串，并且返回json字符串
//把数据放入值栈的映射栈
ActionContext.getContext().put("province", provinces);
return "listPro";
}
3：在struts.xml文件中配置，引用json-default包
<package name="default" extends="json-default(json包继承了默认的)" namespace="/">
<action name="address_*" class="gz.itcast.web.AddressAction" method="{1}">
<result name="listPro" type="json">
<!-- 指定需要转换的值栈的映射栈中的哪个名称的对象 -->
<param name="root">#province</param>
</result>
</action>
</package> //蓝色部分要一致
注意点：
1）需要转换的是映射栈，需要指定对象
<result name="listPro" type="json">
<param name="root">#province</param>
</result>
2）默认情况下，对象栈的所有数据都会转换成JSON字符串
如果某个对象栈的属性不需要转换，则在属性的getter方法上面加上JSON注解
@JSON(serialize=false)
public Integer getProId() {
return proId;
}
jQuery框架
注意：
Window. onload=function()与$(function(){ })与$(document).ready(function()差别
第一是需要整个页面数据加载完毕才能启动，第二个是页面标签树加载完毕启动，
最明显差异，多张img标签加载图片，第一个需要等待，而第二三只需要加载完标签就可以启动
概念：
jQuery是一个轻量级的前端的javascript的框架
(模拟jQuery在 day42_JSON&JQuery基础\01.代码\day42_02_myjquery\WebRoot)
jQuery开发步骤
1：导入jQuery的js的文件到项目中
jquery-1.11.1.js
2：在页面上使用<sciript>导入js文件
<script type="text/javascript" src="jquery-1.11.1.js"></script>
3：写代码开头必须是使用名称： $ 或者 jQuery
例如：$("#div1").html("jQuery框架赋值");
页面接收json数据
1：后台传输对象时，页面接收格式为对象名.属性 {name: "eric"}
2：后台传输数组时，页面接收格式为数组名[下标] [ "eric" ]
Jquery语法
注意区分dom编程和jQuery对象，如果想让dom变成对象，就放入${(dom对象)}中。如果想让jquery变成dom就 btn.get(0)
${ 选择器}.方法
常用jquery选择器
基本选择器
#id : 根据id属性值获取
.class: 根据class属性值获取
div： 根据标签名获取
*: 获取全部标签
#id,.class: 合并多个选择器的结果
属性选择器
A[name]: 查询包含name属性的A
//var elem = $("div[id]");
A[name=value]: 查询name属性值为value的A
//var elem = $("input[name=userName]");
表单选择器
:input: 选择input类型标签
:text: 获取单行文本输入框
基本过滤
:first 获取第一个
//var elem = $("div:first");
:last 获取最后一个
//var elem = $("div:last");
:eq(i): 获取某一个 ，i从0开始
//var elem = $("div:eq(4)");
:even : 获取偶数个 0 2 4 6....
//var elem = $("div:even");
:odd: 获取奇数个 1 3 5 7...
//var elem = $("div:odd");
:gt 获取下标大于
//var elem = $("div:gt(2)");
:lt 获取下标小于
//var elem = $("div:lt(3)");
:not(): 排除某些
//var elem = $("div:not(.myCls)");
内容过滤
:contains(): 获取文本内容为xx
//var elem = $("div:contains(8)");
:empty 获取空标签（没有内容的）
//var elem = $("div:empty");
:has(): 获取内容里面的包含某些子标签
//var elem = $("table:has(div)");
可见过滤
:hidden 查询不可见的 ( hiiden display:none)
//var elem = $("div:hidden");
:visible: 查询可见的
注意：可以多个选择器一起使用
例如：
$(".menu a[name]") 使用了.menu类选择器，空格为层级选择器，a标签，[name]属性选择器
常用jquery方法
val() 获取或设置标签的value值 <input type="button"/>
html() 获取或设置标签的文本内容 <span>xxxx</span>
ready() 页面加载完成后执行ready方法内容
size() 获取jQuery对象里面的对象个数
get(i) 获取jQuery对象里面某个DOM对象
eq(i) 获取jQuery对象的某个jQuery对象
each() 遍历jQuery对象 this: 代表DOM对象 $(this) 代表jQuery对象
parent() 取得一个包含着所有匹配元素的唯一父元素的元素集合
parents() 取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
jquery属性
attr: 只能设置非默认值标签的属性： src,name,value
prop: 设置有默认值标签的属性： checked selected
获取表单属性
:checked $("input:checked") 点中的单选框选择项
:selected $("select option:selected") 下拉框选择
Javascript扩展包
Javascript时间选择器：
My97DatePicker：
1:导入My97DatePicker文件夹到js文件下
2:引入js和css
<script type="text/javascript" src="…/js/My97DatePicker/WdatePicker.js"></script>
3:在需要引入的标签中给一个onfocus事件发，和一个class值class="Wdate"
<input type="text" name="leaveItem.endDate" id="endDate"
//可以给入时间格式
onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"
class="Wdate"/>
javascript加载树：
zTree插件：
1：导入zTree插件到js下
2：引入相关的css和js
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core-3.4.js"></script>
3:导入div的展示窗口
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
4：写javascript代码展开树
<SCRIPT type="text/javascript">
var setting = {
view: {
showLine: false
}
};
var zNodes =[
{ name:"父节点1 - 展开", open:true,
children: [
{ name:"父节点11 - 折叠",
children: [
{ name:"叶子节点111"},
{ name:"叶子节点112"},
{ name:"叶子节点113"},
{ name:"叶子节点114"}
]},
{ name:"父节点12 - 折叠",
children: [
{ name:"叶子节点121"},
{ name:"叶子节点122"},
{ name:"叶子节点123"},
{ name:"叶子节点124"}
]},
{ name:"父节点13 - 没有子节点", isParent:true}
]},
];
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
/*例如：
{ name:"系统模块",open:true,
children: [
{ name:"用户管理",icon:"图片地址" , url:"访问地址",target:"引用哪里"},]}*/
</SCRIPT>
dtree插件:
1：导入zTree插件到js下
2：引入相关的css和js
<link rel="stylesheet" type="text/css" href="…/js/dtree/dtree.css"/>
<script type="text/javascript" src="…/js/dtree/dtree.js"></script>
3:写入javascript代码展开
<div class="bodytextmenu" id="shumenu">
<div class="shumenu" >
<script type="text/javascript">
var d = new dTree("d","${path}/js/dtree/");
d.add(0, -1, "办公管理系统");
/* //id, pid, name, url, title, target, icon, iconOpen, open
d.add(21,2,"用户管理","javascript:parent.mainframe.addTab('用户管理','admin/identity/selectUser.jspx')","用户管理");
d.add(22,2,"角色管理","javascript:parent.mainframe.addTab('角色管理','admin/identity/selectRole.jspx')","角色管理");
d.add(23,2,"操作管理","javascript:parent.mainframe.addTab('操作管理','/admin/identity/mgrModule.jspx')","操作管理");
d.add(24,2,"部门管理");
d.add(25,2,"职位管理");
*/
$.ajax({
url : "${path}/admin/loadMenuTreeAjax.jspx",
type : "post",
dataType : "json",
async : false,
success : function(adminLoad){
// data : [{id : '', pid : '', name : '', url : ''},{id : '', pid : '', name : '', url : ''}]
$.each(adminLoad, function(){
d.add(this.id, this.pid, this.name, "javascript:parent.mainframe.addTab('"+ this.name +"','"+ this.url +"')",this.name);
});
},
error : function(){
alert("数据加载失败！");
}
});
document.write(d);
//展开树节点
d.openAll();
</script>
</div>
</div>
jQuery-zoom放大镜：
1：导入jQuery-zoom插件到js下
2：引入相关的css和js
<script type="text/javascript" src="…/js/jquery-1.11.3.min.js"/>
<script type="text/javascript" src="…/js/jquery-migrate-1.2.1.min.js"/>
<script type="text/javascript" src="…/js/jqzoom_ev-2.3.1/js/jquery.jqzoom-core.js"/>
<link rel="stylesheet" type="text/css" href="…/js/jqzoom_ev-2.3.1/css/jquery.jqzoom.css"/>
3：写一个div方便引用多个图片（可不写）
<a href="${path}/images/233.jpg" id="aa">
<img src="${path}/barcode.jspx" />
</a>
4:写入javascript代码引用
<script type="text/javascript">
$(function(){
$("#aa").jqzoom({
zoomType: "standard", // 指定放大镜的类型 ('standard', 'drag', 'innerzoom', 'reverse')
lens:true, // 是否加上拖动的蒙版
preloadImages: false, // 预加载图片(不)
alwaysOn:false, // 是不是总是显示(不关闭)
title : false, // 是不是需要显示标题
zoomWidth : 500, // 控制右边div宽度
zoomHeight : 500, // 控制右边div高度
xOffset:0, // 控制右边div离左边的距离
yOffset:0, // 控制右边div离上面的距离
position:"right" //控制div在左边显示
});
});
</script>
jQuery-form表单异步提交插件：
1：导入jQuery-form插件到js下
2：引入相关的css和js
<script type="text/javascript" src="${path}/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="${path}/js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="${path}/js/jquery.form.js"></script>
3：写入javascript代码引用
$("#表单ID").ajaxForm({
url : "${path}/asyncForm.jspx", //表单提交地址
type : "post", //提交方式
dataType : "text", //返回数据类型
async : true, //是否异步
success : function(imgUrl){
//alert(imgUrl);
$("<img/>").attr("src", "${path}/" + imgUrl)
.width(200)
.height(200).appendTo("#imgs");
},
error : function(){
alert("数据加载失败！");
}
});
EasyUi
EasyUi是特点：
l easyui是一种基于jQuery的用户界面插件集合
l easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能
l 使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面
EasyUI的官网地址为：http://www.jeasyui.com/
依赖关系：
easyui里面的继承并不是真的继承，只是一种简单的依赖关系。这种依赖关系主要体现在如下几方面：
依赖者会继承“被依赖者”的属性，进而初始化自己的options；
依赖者会在自身内部初始化的时候，同时会初始化“被依赖者”；
依赖者会通过调用“被依赖者”对象的方法来实现自己和“被依赖者”同名的方法。
开发步骤：
1：在项目下导入组件
(1) \jqueryeasyui\jquery-easyui-1.4.5\locale(语言文件夹)一般选择中文和英文就好
(2) \jqueryeasyui\jquery-easyui-1.4.5\themes(样式文件夹)
(3) jquery.easyui.min.js和jquery.min.js
2:在jsp页面中导入引用
<script type="text/javascript" src="../../js/easyui/jquery.min.js"></script>
<script type="text/javascript" src="../../js/easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../js/easyui/themes/icon.css">
3:引用需要的属性、事件
jquery easyUI对象初始化方式：
方式一：直接在html中的标签上的class内容添加easyui-xxx,想要添加属性和事件就加个
Data-options属性，方法只能js调用
方式二：使用js初始化，$(表达式).xxx({属性、事件});
写在js中如何使用：
$(表达式).xxx({属性、事件});
$('#dd').draggable({
handle:'#title'
});
方法的调用：$(表达式).xxx("方法名",方法中参数...);
查看api主意点：
1：api中有各个依赖关系，可以引用依赖关系中的事件方法等等
2：事件与属性可以包含在方法中，但是方法不可以，必须另写
$('#ss').slider({
mode: 'v', //属性
onComplete: function(value){ //事件
return value + '%';
}
});
$(‘#ss’).slider(“options”) //方法
3：树节点有节点属性
常用的方法注意事项
1：DataGrid数据表格
$("#dg").datagrid({
url:"get_user_list_data.jsp",
800, //行号
rownumbers:true, // 显示行列
pageList:[10], //可选择的页大小
striped:true, //斑马线效果
pagination:true, //分页导航条
idField:"userId", //添加标识字段，可以用于分页时获取前面页的数据
queryParams:{title:"itcast"}, //添加查询条件
frozenColumns:[[ //冻结属性
{field:'x',checkbox:true},
{field:'userId',title:'用户ID',100}
]],
columns:[[ //根据json解析属性
{field:'name',title:'用户名称',100},
{field:'email',title:'电子邮箱',100,align:'center'},
{field:'gender',title:'性别',100,align:'center',
formatter: function(value,row,index){
return value==1?"男":"女";
},
styler: function(value,row,index){
return value==1?'color:blue;':'color:red;';
}
},
{field:'workAge',title:'工龄',100,align:'center'},
{field:'birthday',title:'出生日期',100,align:'center'}
]],
toolbar: [{ //右上方增加编辑工具条
iconCls: 'icon-save',
handler: function(){alert('新增按钮');}
},'-',{
iconCls: 'icon-edit',
handler: function(){
parent.$("#win").window({
title:"人员编辑",
650,
height:500,
//href:"html/form/form_8_example.html",
modal:true,
content:"<iframe src='html/form/form_8_example.html' frameborder='0' width='100%' height='100%'></iframe>"
}).window("open");
}
},'-',{
iconCls: 'icon-remove',
handler: function(){
var rows = $('#dg').datagrid("getSelections");
if(rows.length > 0){
var ids = "";
for(var i = 0; i < rows.length; i++){
ids += rows[i].userId + ",";
}
ids = ids.substring(0, ids.length-1);
$.messager.confirm("提示信息","真的要删除id为 " + ids + " 的数据吗？",function(r){
if(r){
$.messager.alert("提示信息","删除数据中...","warning");
}
});
} else {
$.messager.alert("提示信息","请选择行！","info");
}
}
},{text:"<input id='userName' name='userName'/>"
}]
});
2：Layout布局
常用页面分布注意需要打开页面需要用：
content:"<iframe src='" + linkUrl + "' frameborder='0' width='100%' height='100%'/>
引用内框架标签
<div id="cc" class="easyui-layout" data-options="fit:true"> //设置为true为铺满全部
<!-- ---------------------------------顶部开始-------------------------------------------- -->
<div data-options="region:'north'" style="height:100px;">
<h2>传智播客组织架构管理系统</h2>
<div style=" 100%;text-align: right;">
<select id="theme" class="easyui-combobox" style="120px;">
<option>default</option>
<option>black</option>
<option>bootstrap</option>
<option>gray</option>
<option>material</option>
<option>metro</option>
</select>
</div>
</div>
<!-- ---------------------------------顶部结束-------------------------------------------- -->
<!-- ---------------------------------底部开始-------------------------------------------- -->
<div data-options="region:'south'" style="height:50px;text-align: center">
传智播客 2016©版权所有
</div>
<!-- ---------------------------------底部结束-------------------------------------------- -->
<!-- ---------------------------------左边菜单开始-------------------------------------------- -->
<div data-options="region:'west',title:'功能菜单'" style="200px;">
<div id="aa" class="easyui-accordion" data-options="fit:true">
<div title="人员管理" data-options="iconCls:'icon-save',selected:true" style="100%">
<div class="menu">
<ul>
<li><a href="#" name="user_list.html">人员列表</a></li>
<li><a href="#" name="html/form/form_8_example.html">人员编辑</a></li>
<li><a href="#" name="">人员统计</a></li>
</ul>
</div>
</div>
<div title="角色管理" data-options="iconCls:'icon-reload'" style="padding:10px;">
content2
</div>
<div title="权限管理">
content3
</div>
</div>
</div>
<!-- ---------------------------------左边菜单结束-------------------------------------------- -->
<!-- ---------------------------------中间内容主显示区开始-------------------------------------------- -->
<div data-options="region:'center'" style="padding:2px;background:#eee;">
<div id="tt" class="easyui-tabs" data-options="fit:true">
<div title="欢迎页" style="padding:20px;display:none;">
<h3> 欢迎使用系统 </h3>
</div>
</div>
</div>
<!-- ---------------------------------中间内容主显示区结束-------------------------------------------- -->
</div>
简单实现css光标移动变色
.menu ul{ //css类选择器，可以层级往下
margin:0;
padding:0;
list-style: none;
}
.menu ul li{
background-color: #113965;
color: #fff;
200px;
border-bottom: 1px solid #fff;
}
.menu ul li a{
text-decoration:none;
color: #fff;
100%;
display: block;
padding:3px;
}
.menu ul li a:hover{ //css中伪类选择器
background-color: #49B5FF;
}