javaScript

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包

<param name="root">#province</param>

</result>

</action>

</package> //蓝色部分要一致

注意点：

1）需要转换的是映射栈，需要指定对象

<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文件

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

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

</div>

4：写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

3:写入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>

jQuery-zoom放大镜：

1：导入jQuery-zoom插件到js下

2：引入相关的css和js

3：写一个div方便引用多个图片（可不写）

</a>

4:写入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

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页面中导入引用

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为铺满全部

<h2>传智播客组织架构管理系统</h2>

<option>default</option>

<option>black</option>

<option>bootstrap</option>

<option>material</option>

<option>metro</option>

</select>  

</div>

</div>

<ul>

</ul>

</div>

content2

</div>

content3

</div>

<h3> 欢迎使用系统 </h3>

</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;

}