详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
目录一、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、小结 四、弹出层五、模板引擎
六、示例下载一、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： getAll();
/**添加
* @return */
boolean add(Product entity);
/**根据编号获得产品对象*/
Product findById(int id);
/**根据编号获得产品对象
* @return */
boolean deleteById(int id);
}
ProductService.java： products;
static {
products = new ArrayList<>();
Random random = new Random();
for (int i = 1; i <= 10; i++) {
Product product = new Product(i,"华为Mate9MHA-AL00/4GB RAM/全网通华为超级闪充技术双后摄设计" + random.nextInt(999),random.nextDouble() * 1000,"pic(" + i + ").jpg","产品详细");
products.add(product);
}
}
/*
* (non-Javadoc)
*
* @see com.gomall.service.IProductService#getAll()
*/
@Override
public List
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方法依照添加的顺序调用。 示例代码：
延迟对象（deferred）
运行结果：
2.3、deferred.fail语法：deferred.fail(failCallbacks[,failCallbacks])返回值:Deferred Object当延迟失败时调用一个函数或者数组函数，功能与原回调方法error类似。 该参数可以是一个函数或一个函数的数组。当延迟失败时，doneCallbacks被调用。回调执行是依照他们添加的顺序。一旦deferred.fail()返回延迟对象，延迟对象的其它方法也可以链接到了这里，包括增加.done()方法。当延迟解决，doneCallbacks执行使用参数提供给 resolve或 resolveWith方法依照添加的顺序调用。 示例：
延迟对象（deferred）
运行结果：
2.4、deferred.always语法：deferred.always(alwaysCallbacks,[alwaysCallbacks])返回值:Deferred Object当递延对象是解决（成功，resolved）或拒绝（失败，rejected）时被调用添加处理程序，与回调方法complete类似。 示例：
延迟对象（deferred）
运行结果 成功时：
失败时：
2.5、deferred.then
添加处理程序被调用时，递延对象得到解决或者拒绝，一次指定多个事件。 所有三个参数（包括progressCallbacks ，在jQuery的1.7 ）可以是一个单独的函数或一个函数的数组。 其中一个参数，也可以为空，如果没有该类型的回调是需要的。或者，使用.done()或.fail()仅设置doneCallbacks或failCallbacks。当递延解决，doneCallbacks被调用。若递延代替拒绝，failCallbacks被调用。回调按他们添加的顺序执行。一旦deferred.then返回延迟对象，延迟对象的其它方法也可以链接到了这里，包括增加.then()方法。 示例：
延迟对象（deferred）
结果：
2.6、应用延迟对象前面的示例中我们都是使用jQuery ajax返回的deferred对象，其实我们也可以在自定义的代码中使用deferred对象，恰当的使用deferred对象或以优雅的解决不少问题。 示例：
延迟对象（deferred）
失败时：
成功时：
promise()在原来的deferred对象上返回另一个deferred对象，后者只开放与改变执行状态无关的方法（比如done()方法和fail()方法），屏蔽与改变执行状态有关的方法（比如resolve()方法和reject()方法），从而使得执行状态不能被改变。 2.7、总结（1） 生成一个对象。
（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请求
6.4.9、跨域AJAX请求另一个域下面一般处理程序，：
/// 根据用户编号获得用户
///
public class FindUserById : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
String name = "";
int id = Convert.ToInt32(context.Request.Params["id"]);
if (id == 1001)
{
name = "Mark";
}
else if (id == 1002)
{
name = "Jack";
}
context.Response.Write(name);
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
运行结果：
3.2、JSONP跨域JSONP跨域是利用script脚本允许引用不同域下的js实现的，将回调方法带入服务器，返回结果时回调。 2.1、JSONP跨域原理客户端： |
