zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    2008年8月1日21世纪首次日全食奇观
    7.3午饭记
    简单漂亮的导航栏效果
    浮动居中float:center
    图片垂直居中的CSS技巧
    谷歌Chrome浏览器发布
    满江红.中秋寄远
    寄中秋月下独酌
    春江花月夜
    开始锻炼身体
  • 原文地址:https://www.cnblogs.com/lifushan/p/5469318.html
Copyright © 2011-2022 走看看