20150228--Ajax2-02

标签：

二、Ajax框架的封装

1、考虑框架命名冲突

由于我们的项目中可能会引入多个框架，可能会导致命名冲突问题，为了解决此问题，我们可以采用定义一个自调用匿名函数来解决此问题。

2、构造$函数获取DOM对象

由于我们在Javascript中经常使用DOM对象.事件=事件的处理程序

3、把$声明为全局变量，供外部调用

4、创建Ajax对象

在Javascript中，一切都是对象，函数也是一种对象。

5、创建ajax的get请求

测试ajax中的get请求

6、封装ajax中的post请求

测试ajax中的post请求

7、解决get请求的缓存问题

8、解决返回值类型问题

在Ajax中通常有三种返回类型：text文本类型，xml（XML类型），json数据类型

形参设置：

代码实现：

测试效果：

Text文本类型：

XML类型：

JSON类型

三、案例大汇总

案例1：多级分类

示例代码：

代码请参考fenlei.html与fenlei.php

案例2：快递查询

网址：http://www.kuaidi100.com/

仔细阅读开发文档：

示例代码：

kuaidi100/index.html

运行效果：

案例3：百度下拉搜索

1）我们首先找对象

文本框 input text

2）找什么情况下发生的（事件）

onkeyup事件

3）事件触发时做了哪些事（事件的处理程序）

对象.事件 = 事件的处理程序

代码参考：

search.html与search.php

运行效果：

案例4：Ajax+Smarty无刷新分页

原理图：

示例代码参考

入口页面 index.html

smarty入口 page.php

模板文件 templates/page.html

效果如下：

20150228--Ajax2-02

标签：

原文地址：http://www.cnblogs.com/lifushan/p/5469318.html