目录
一、AJAX示例
1.1、优点
1.2、缺点
1.3、jQuery AJAX示例
二、延迟对象（Deferred）
2.1、回调函数
2.2、deferred.done
三、跨域
3.1、什么是跨域
3.2、JSONP跨域
3.3、jQuery使用JSONP跨域
3.4、跨域资源共享（CORS）
3.5、小结
四、弹出层
五、模板引擎
- 5.1、Hello World
- 5.2、方法
- 5.3、与AJAX结合应用
六、示例下载
一、AJAX示例
AJAX全称为“Asynchronous JavaScript And XML”（异步JavaScript和XML） 是指一种创建交互式网页应用的开发技术、改善用户体验，实现无刷新效果。
1.1、优点
优秀的用户体验
提高Web程序的性能
减轻服务器和带宽的负担
1.2、缺点
浏览器对XMLHttpRequest对象的支持度不足，几乎所有浏览器现在都支持
破坏浏览器“前进”、“后退”按钮的正常功能，可以通过简单的插件弥补
1.3、jQuery AJAX示例
在HTML5中对原生的AJAX核心对象XMLHttpRequest进行升级，也就是XHR2，功能更加强大。
jQuery对AJAX封装的非常好，这里以简单的商品管理为示例使用jQuery完成AJAX应用。
Product.java bean：
IProductService.java：
ProductService.java：
ProductAction.java：
运行结果：
删除：
二、延迟对象（Deferred）
deferred对象就是jQuery1.5版以后新增加的回调函数解决方案。
2.1、回调函数
先看一个示例：
首先，为什么要使用Deferred？
student.json文件：{"name":"tom","id":"01"}
运行结果：
因为AJAX是异步执行的，类似高级语言中的多线程，当发起ajax请求时会有网络延迟，而代码并没有在$.get的位置被阻塞，alert先执行，但数据并没有从远程获取到，所以结果是undefined。
其实初学者经常会犯这种错误，如：
上面的代码是有问题的，原因如前面的示例是一样的。怎么解决，如果你认为是异步带来的问题，当然通过同步是可以解决的，如：
结果：
如果将所有的ajax请求修改为同步的，则ajax的好处就大打折扣了，如果即要异步又要解决上面的问题，可以使用回调方法。
示例：
结果：
从这里看回调很完美，其实不然，实际开发中要复杂得多，如当第一个ajax请求完成才可以完成第二个，当第二个完成才可以完成第三个，可能最一个请求要等前面的所有请求都成功时才允许执行或才有条件执行，如
使用ajax编辑用户信息，先加载用户对象，再加载省，加载市，加县，可能代码会这样写：
当回调越来越多，嵌套越深，代码可读性就会越来越差。如果注册了多个回调，那更是一场噩梦，幸好从jQuery1.5开始出现了延迟对象（deferred），可以解决这个问题。
2.2、deferred.done
$.ajax()操作完成后，如果使用的是低于1.5.0版本的jQuery，返回的是XHR对象，你没法进行链式操作；如果高于1.5版，返回的是deferred对象，可以进行链式操作。
当延迟成功时调用一个函数或者数组函数，功能与原success类似。
语法：deferred.done(doneCallbacks[,doneCallbacks])
返回值:Deferred Object
该参数可以是一个函数或一个函数的数组。当延迟成功时，doneCallbacks被调用。回调执行是依照他们添加的顺序。一旦deferred.done()返回延迟对象，延迟对象的其它方法也可以链接到了这里，包括增加.done()方法。当延迟解决，doneCallbacks执行使用参数提供给 resolve或 resolveWith方法依照添加的顺序调用。
示例代码：
运行结果：
2.3、deferred.fail
语法：deferred.fail(failCallbacks[,failCallbacks])
返回值:Deferred Object
当延迟失败时调用一个函数或者数组函数，功能与原回调方法error类似。
该参数可以是一个函数或一个函数的数组。当延迟失败时，doneCallbacks被调用。回调执行是依照他们添加的顺序。一旦deferred.fail()返回延迟对象，延迟对象的其它方法也可以链接到了这里，包括增加.done()方法。当延迟解决，doneCallbacks执行使用参数提供给 resolve或 resolveWith方法依照添加的顺序调用。
示例：
运行结果：
2.4、deferred.always
语法：deferred.always(alwaysCallbacks,[alwaysCallbacks])
返回值:Deferred Object
当递延对象是解决（成功，resolved）或拒绝（失败，rejected）时被调用添加处理程序，与回调方法complete类似。
示例：
运行结果
成功时：
失败时：
2.5、deferred.then
deferred.then(doneFilter [,failFilter ] [,progressFilter ])
添加处理程序被调用时，递延对象得到解决或者拒绝，一次指定多个事件。
所有三个参数（包括progressCallbacks ，在jQuery的1.7 ）可以是一个单独的函数或一个函数的数组。 其中一个参数，也可以为空，如果没有该类型的回调是需要的。或者，使用.done()或.fail()仅设置doneCallbacks或failCallbacks。当递延解决，doneCallbacks被调用。若递延代替拒绝，failCallbacks被调用。回调按他们添加的顺序执行。一旦deferred.then返回延迟对象，延迟对象的其它方法也可以链接到了这里，包括增加.then()方法。
示例：
结果：
2.6、应用延迟对象
前面的示例中我们都是使用jQuery ajax返回的deferred对象，其实我们也可以在自定义的代码中使用deferred对象，恰当的使用deferred对象或以优雅的解决不少问题。
示例：
失败时：
成功时：
promise()在原来的deferred对象上返回另一个deferred对象，后者只开放与改变执行状态无关的方法（比如done()方法和fail()方法），屏蔽与改变执行状态有关的方法（比如resolve()方法和reject()方法），从而使得执行状态不能被改变。
2.7、总结
（1） 生成一个对象。
- 指定操作成功时的回调函数
- 指定操作失败时的回调函数
- 没有参数时，返回一个新的对象，该对象的运行状态无法被改变；接受参数时，作用为在参数对象上部署接口。
- 手动改变对象的运行状态为已完成，从而立即触发方法。
- 这个方法与正好相反，调用后将对象的运行状态变为已失败，从而立即触发方法。
- .Deferred()生成一个deferred对象。
（2）deferred.done()指定操作成功时的回调函数
（3）deferred.fail()指定操作失败时的回调函数
（4）deferred.promise()没有参数时，返回一个新的deferred对象，该对象的运行状态无法被改变；接受参数时，作用为在参数对象上部署deferred接口。
（5）deferred.resolve()手动改变deferred对象的运行状态为"已完成"，从而立即触发done()方法。
（6）deferred.reject()这个方法与deferred.resolve()正好相反，调用后将deferred对象的运行状态变为"已失败"，从而立即触发fail()方法。
（7）.when() 为多个操作指定回调函数。 除了这些方法以外，deferred对象还有二个重要方法，上面的教程中没有涉及到。
（8）deferred.then() 有时为了省事，可以把done()和fail()合在一起写，这就是then()方法。 如果then()有两个参数，那么第一个参数是done()方法的回调函数，第二个参数是fail()方法的回调方法。如果then()只有一个参数，那么等同于done()。
（9）deferred.always() 这个方法也是用来指定回调函数的，它的作用是，不管调用的是deferred.resolve()还是deferred.reject()，最后总是执行。
三、跨域
互联网上的主机由IP来标识，为了方便记忆，创建了域名系统.域名与IP对应，域名的作用是不用让你记复杂的IP地址，能唯一定位资源，URL的格式是协议://主机名.公司名称.机构类型.地域类型:端口/路径，如
3.1、什么是跨域
JavaScript同源策略的限制，A域名下的JavaScript无法操作B或是C域名下的对象，如下所示：
客户端代码d05.html，
6.4.9、跨域AJAX请求
另一个域下面一般处理程序，：
运行结果：
3.2、JSONP跨域
JSONP跨域是利用script脚本允许引用不同域下的js实现的，将回调方法带入服务器，返回结果时回调。
2.1、JSONP跨域原理
客户端：
运行结果：
在jQuery中如果使用JSONP只需要将返回数据类型设置为jsonp就可以了，但是这种方法只支持get请求，不支持post请求；请求是同步的；服务器返回数据要处理，要添加回调函数，麻烦。
3.4、跨域资源共享（CORS）
跨域资源共享（CORS）是一种网络浏览器的技术规范，它为Web服务器定义了一种方式，允许网页从不同的域访问其资源。
CORS与JSONP相比:
1、 JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。 2、 使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。 3、 JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS。
CORS有两种模型可以实现：
1.简单模型
支持get/post/put/delete请求，例如返回Access-Control-Allow-Origin:*,但是不允许自定义header且会忽略cookies，且post数据格式有限制，只支持‘text/plain','application/x-www-urlencoded'and'multipart/form-data'，其中'text/plain'默认支持，后面两种需要下面的预检请求和服务器协商。
2.协商模型/预检请求（Preflighted Request）
举例：浏览器发出PUT请求，OPTION请求返回Access-Control-Allow-Origin:*,Access-Control-Allow-Methods:'PUT'，服务器同意所有域的PUT请求，浏览器收到并继续发出真正的PUT请求，服务器响应并再次返回Access-Control-Allow-Origin:*,允许浏览器的脚本执行服务器返回的数据。
response.addHeader("Access-Control-Allow-Origin","");
Access-Control-Allow-Origin：允许跨域访问的域名，如果是公共的则返回*即可
response.addHeader("Access-Control-Allow-Methods",POST,OPTIONS");
Access-Control-Allow-Methods：允许跨域访问的谓词（方法），如GET,DELETE,PUT（REST）
.Net服务器一般处理程序代码：
客户端脚本：
6.4.9、跨域AJAX请求
运行结果：
从上图可以看到实现跨域且为异步请求。
Java Servlet后台脚本：
out.append(json);
}
}
protected void doPost(HttpServletRequest request,response);
}
}
客户端代码：
运行结果：
2.4、CORS跨域的问题
a)、如果认为每次需要修改HTTP头部比较麻烦，在java中可以使用过滤器，.Net可以使用Module或HttpHandler全局注册（注册到Web.Config中，部署时还需要注意）。
b)、如果需要考虑IE8实现CORS则要插件支持，因为IE8并没有完全支持CORS。
插件名称：javascript-jquery-transport-xdr
示例代码：
运行结果：
3.5、小结
当然除了兼容老浏览器的jsonp跨域与HTML5中的CORS跨域还有很多其它办法如利用iframe和location.hash、window.name实现的跨域数据传输、使用HTML5 postMessage、利用flash等办法。个人认为CORS应该才是未来主要的跨域选择，其它的方法都只是hack。
四、弹出层
前面AJAX示例中添加功能如果放在一个弹出层中布局会更加紧凑一些，像登录，提示信息经常会需要弹出层。
常见的弹出层有：FancyBox，LightBox，colorBox，artDialog，BlockUI，Layer等，这里介绍腾讯开源的artDialog，轻量，实用。
artDialog是一个设计得十分巧妙的对话框组件，小巧身材却拥有丰富的接口与漂亮的外观。
特点是自适应内容、优雅的接口、细致的体验、跨平台兼容、轻量实用。
使用方法：
运行结果：
属性：
事件：
- 显示对话框（模态）
- @name artDialog.prototype.showModal
- @param {HTMLElement Object,Event Object} 指定位置（可选）
*/
/**
- 关闭对话框
- @name artDialog.prototype.close
- @param {String,Number} 返回值，可被 onclose 事件收取（可选）
*/
/**
- 销毁对话框
- @name artDialog.prototype.remove
*/
/**
- 重置对话框位置
- @name artDialog.prototype.reset
*/
/**
- 让对话框聚焦（同时置顶）
- @name artDialog.prototype.focus
*/
/**
- 让对话框失焦（同时置顶）
- @name artDialog.prototype.blur
*/
/**
- 添加事件
- @param {String} 事件类型
- @param {Function} 监听函数
- @name artDialog.prototype.addEventListener
*/
/**
- 删除事件
- @param {String} 事件类型
- @param {Function} 监听函数
- @name artDialog.prototype.removeEventListener
*/
/**
- 对话框显示事件，在 show()、showModal() 执行
- @name artDialog.prototype.onshow
- @event
*/
/**
- 关闭事件，在 close() 执行
- @name artDialog.prototype.onclose
- @event
*/
/**
- 销毁前事件，在 remove() 前执行
- @name artDialog.prototype.onbeforeremove
- @event
*/
/**
- 销毁事件，在 remove() 执行
- @name artDialog.prototype.onremove
- @event
*/
/**
- 重置事件，在 reset() 执行
- @name artDialog.prototype.onreset
- @event
*/
/**
- 焦点事件，在 foucs() 执行
- @name artDialog.prototype.onfocus
- @event
*/
/**
- 失焦事件，在 blur() 执行
- @name artDialog.prototype.onblur
- @event
*/
该插件使用比较简单，可以看示例与源代码。
五、模板引擎
在AJAX示例中javascript中有大量的html字符串，html中有一些像onclick样的javascript，这样javascript中有html，html中有javascript，代码的偶合度很高，不便于修改与维护，使用模板引擎可以解决问题。
模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。前后端都有模板引擎，比如T4、FreeMarker、Velocity，这里主要讲前端模板引擎：
上图是常见的一些前端模板引擎，速度相对快的是artTemplate，与artDialog是同一个作者，当然一个好的模板引擎不仅是速度还有很多方面都关键。
5.1、Hello World
示例代码：
