• 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

  • 相关阅读:
    c++关于map的find和count的使用
    leetcode Two Sum
    leetcode Group Anagrams
    机器学习常见算法分类汇总
    KD树
    偏差与方差(未完)
    线性模型
    决策树
    Linux服务器配置---ftp用户黑名单
    Linux基础命令---mkdir
  • 原文地址:https://www.cnblogs.com/lifushan/p/5469318.html
Copyright © 2020-2023  润新知