36-Ajax封装.docxVIP

传说中的Ajax（下）目录传说中的Ajax（下）1一、JSON数据格式21、什么是json22、json定义23、php与json24、Ajax中的json3二、Ajax封装61、创建public.js文件作为Ajax代码库。62、封装一个自调用匿名函数63、封装一个函数，用于获取指定id的DOM对象64、设置局部变量$为全局变量75、在Javascript中一切都是对象，函数也是一个特殊的对象76、创建Ajax对象77、编写Ajax中的get请求（五步走）88、Ajax中的post请求六步走99、设置期待的返回值类型（text、xml、json）10一、JSON数据格式1、什么是jsonjson是一组无序属性的集合，在Javascript中可以通过{}来表示这组集合。json是一组键值对的集合var json对象 = {属性:值,属性:值,属性:值…};json对象是哪个类的实例？其是Object类实例，在实际项目开发中，如果想创建自定义对象有两种方式：定义构造器（隐式创建自定义对象）通过json来创建自定义对象2、json定义例1：通过json来描述一个人的信息例2：通过json来描述多个人的信息3、php与json在php中，可以将数组或对象转化json格式的数据1）json_encode(数组或对象);2）json_decode(json格式数据，布尔类型)：解析json格式数据为数组或对象如果第二个参数为false代表生成对象，如果为true代表生成数据，默认为false运行结果：4、Ajax中的json例1：求两个数的四则运算要用到的知识点：在开发过程中，服务端返回的数据为string数据格式，所以如果使用json必须通过eval方法进行转化，但是json格式转化有点特殊，格式如下：var json对象 = eval(‘(‘+json数据+’)’);demo02.php例2：通过Ajax+json生成无限级分类下拉菜单demo03.php运行结果：二、Ajax封装1、创建public.js文件作为Ajax代码库。2、封装一个自调用匿名函数在实际项目开发中，经常会同时引入多个js代码库，可能会出现命名冲突问题，所以通过自调用匿名函数方式解决。3、封装一个函数，用于获取指定id的DOM对象通过以上函数可以获取指定id的DOM对象，以上代码也可以改写为如下形式：4、设置局部变量$为全局变量以上$变量虽然可以通过id属性获取指定id的DOM对象，但是由于其是局部的，所以在全局中没有办法调用。5、在Javascript中一切都是对象，函数也是一个特殊的对象所以上面的局部变量$也是一个对象，既然其是一个对象，其就可以通过属性来保存多个值。6、创建Ajax对象7、编写Ajax中的get请求（五步走）测试Ajax库中的get请求demo04.php运行结果：8、Ajax中的post请求六步走测试Ajax中的post请求demo05.php运行结果：9、设置期待的返回值类型（text、xml、json）设置post请求的期待返回值类型同理测试Ajax框架中的期待返回值类型demo06_1.phpdemo06_2.phpdemo06_3.php三、综合案例1、通过Ajax实现二级联动效果数据表结构：① 设计HTML界面② 编写Javascript代码deal.php页面运行结果：2、快递100接口（爱快递、快递100）阅读官方API接口：必须参数：① 设计HTML界面② 编写Javascript代码编写get.php页面运行结果：3、仿百度下拉搜索① 设计HTML界面② 编写Javascriptdeal.php运行结果：4、仿优酷无刷新分页功能① 设计HTML界面② 编写Ajax实现载入分页程序（Smarty）Smarty部署：1）复制libs目录到当前项目中2）更改libs名称为Smarty3）创建一个templates文件夹，存放模板文件4）创建一个templates_c文件夹，作为编译目录5）定义项目入口文件fenye.phpSmarty五步走：详解参考fenye.php与fenye.html③ 如果实现在当前项目中载入youku/tudou/iqiyi视频1）注册优酷账号2）上传视频到优酷等视频网站3）单击发布视频后的分享链接复制标签到项目代码中分页流程图（Ajax+Smarty）