20150228--Ajax2-02

、Ajax框架的封装

1、考虑框架命名冲突

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

wps5A28.tmp

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

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

wps5A29.tmp

3、$声明为全局变量,外部调用

wps5A39.tmp

4、创建Ajax对象

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

wps5A4A.tmp

5、创建ajax的get请求

wps5A99.tmp

测试ajax的get请求

wps5A9A.tmp

6、封装ajax中的post请求

wps5AAB.tmp

测试ajax中的post请求

wps5ADB.tmp

7解决get请求的缓存问题

wps5ADC.tmp

8、解决返回值类型问题

在Ajax中通常有三种返回类型:text文本类型,xml(XML类型),json数据类型

形参设置:

wps5AEC.tmp

代码实现:

wps5AFD.tmp

测试效果:

Text文本类型:

wps5B1D.tmp

XML类型:

wps5B2E.tmp

JSON类型

wps5B4E.tmp

案例大汇总

案例1:多级分类

wps5B5F.tmp

示例代码:

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

案例2:快递查询

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

wps5B6F.tmp

wps5B80.tmp

仔细阅读开发文档:

wps5BA0.tmp

示例代码:

kuaidi100/index.html

wps5BD0.tmp

运行效果:

wps5C00.tmp

案例3:百度下拉搜索

1)我们首先找对象

文本框 input text

2)找什么情况下发生的(事件)

onkeyup事件

3)事件触发时做了哪些事(事件的处理程序)

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

代码参考:

search.html与search.php

运行效果:

wps5C01.tmp

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

原理图:

wps5C21.tmp

示例代码参考

入口页面 index.html

smarty入口 page.php

模板文件 templates/page.html

效果如下:

wps5C32.tmp

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