首页 技术 正文
技术 2022年11月14日
0 收藏 982 点赞 4,061 浏览 3319 个字

第6章,jQuery与Ajax的应用

Ajax的优势和不足

Ajax的优势

1、不需要插件支持2、优秀的用户体验3、提高Web程序的性能4、减轻服务器和带宽的负担

Ajax的不足

1、浏览器对XMLHttpRequest对象的支持度不足2、破坏浏览器前进、后退按钮的正常功能3、对搜索引擎的支持的不足4、开发和调试工具的缺乏

Ajax的XMLHttpRequest对象

Ajax的核心是XMLHttpRequest对象,它是Ajax实现的关键—-发送异步请求、接收响应及执行回调都是通过它来完成的。IE5、IE6是以ActiveXObject的方式引入XMLHttpRequest对象的,而其他浏览器的XMLHttpRequest对象是window的子对象

jQuery中的Ajax

1、load()方法

语法结构:load(url [,data] [,callback])load()方法参数解释

参数 类型 说明
url String 请求HTML页面的url地址
data(可选) Object 发送至服务器的key/value数据
callback(可选) Function 请求完成时的回调函数,无论请求成功或失败

筛选载入的HTML文档

$('#resText').load("test.html .para");     // 载入test.html页面中class为“para”的内容

传递方式load()方法会根据参数data来自动指定,有参数传递为POST方式,无参数则为GET方式回调函数有3个参数:1、请求返回的内容;2、请求的状态;3、XMLHttpRequest对象注:通常用于从Web服务器获取静态文件

2、$.get()与$.post()方法

(1)$.get()使用GET方式来进行异步请求语法结构:$.get(url [,data] [,callback] [,type]);$.get()方法参数解释

参数 类型 说明
url String 请求的HTML页面的url地址
data(可选) Object 发送至服务器的key/value数据会附加在请求URL中
callback(可选) Function 载入成功时回调函数,自动将请求结果和状态传递给该方法
type(可选) String 服务器返回内容的格式,xml,html,script,json,text,_default

回调函数只有两个参数:1、data,返回的内容,xml文档,json文件等;2、请求状态:success、error、notmodified、timeout注:只有当数据成功返回(success)才被调用(2)$.post()使用POST方式进行异步请求GET与POST的区别<1>GET请求会将参数跟在URL后进行传递,POST则是作为HTTP实体内容发送个Web服务器。<2>GET对传输数据有大小限制(通常不大于2kb),而POST则要比GET多的多(理论上不限制)<3>GET请求会被浏览器缓存下来,在某种情况下会有严重的安全性问题,而POST则可避免<4>GET与POST传递的数据在服务器端获取方式也不相同

3、$.getScript()方法和$.getJson()方法

(1)$.getScript()使用$.getScript()方法加载一个js文件就跟加载一个HTML页面一样简单,而且不需要对js文件进行处理,js文件会自动执行回调函数会在js加载成功后执行(2)$.getJson()$.getJson()用于加载json文件$.each()方法,jQuery中用于遍历对象和数组,接受两个参数:1、数组或对象;2、回调函数(接受两个参数:1、对象成员或数组索引;2、对应变量或内容)

4、$.ajax()方法

语法结构:$.ajax(options)options对象中,参数以key/value形式存在,所有参数都是可选$.ajax()方法有大量的参数,需要另查资料,之后再补充

序列化元素

1、serialize()方法作用于一个jQuery对象,能够将DOM元素内容序列化为字符串,用于Ajax请求注:参数传递时要注意将参数进行编码,即使用URI编码,若不希望编码带来麻烦,可以使用serialize()方法,它会自动编码2、serializeArray()方法将DOM序列化后,返回json格式数据3、$.param()方法serialize()方法核心,用以对一个对象按照key/value进行序列化

jQuery中的Ajax全局事件

当Ajax请求开始时,触发ajaxStart()方法的回调函数;当Ajax请求结束时,触发ajaxStop()方法的回调函数其他的全局方法

方法名称 说明
ajaxComplete(callback) Ajax请求完成时执行函数
ajaxError(callback) Ajax请求发生错误时执行函数,捕捉到的错误可以作为最后一个参数传递
ajaxSend(callback) Ajax请求发送前执行的函数
ajaxSuccess(callback) Ajax请求成功时执行函数

第7章,jQuery插件的使用和写法

jQuery表单验证插件—-Validation

下载地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation/API:http://docs.jquery.com/Plugins/Validatioin

jQuery表单插件—-Form

核心方法:ajaxForm()和ajaxSubmit()下载地址:http://jquery.malsup.com/form/ajaxForm()和ajaxSubmit()都可以接受0或1个参数,当为单个参数时,既可以是回调函数,也可以是options对象,通过传递options对象,使它们对表单拥有更多的控制权

模态窗口插件—-SimpleModal

下载地址:http://www.ericmmartin.com/projects/simplemodal/SimpleModal提供了两种方法调用模态窗口:1、作为链式jQuery函数:

$("#elementid").modal();

2、作为一个单独的函数:

$.modal("<div><h1>SimpleModal</h1></div>");

两种方法都可接收一个可选参数:options

$("#elementid").modal({options});
$.modal("<div><h1>SimpleModal</h1></div>",{options});

API:http://www.ericmmartin.com/projects/simplemodal/

管理Cookie的插件—-Cookie

下载地址:http://github.com/carhartl/jquery-cookie

jQuery UI插件

下载地址:http://ui.jquery.com/downloadhttp://jqueryui.com/download

编写jQuery插件

1、插件种类
(1)封装对象方法的插件(2)封装全局函数的插件(3)选择器插件2、插件基本要点(1)jQuery插件推荐命名jquery.[插件名].js(2)所有对象方法都应当附加到jQuery.fn对象上,所有全局函数都应当附加到jQuery对象本身上(3)在插件内部,this指向当前通过选择器获取的jQuery对象(4)可以通过this.each来遍历所有元素(5)所有方法或函数插件都应当以分号结尾(6)插件应返回一个jQuery对象,以保证插件可链式操作(7)避免在插件内部使用$作为jQuery对象的别名,应使用完整的jQuery来表示,避免冲突,当然,也可以使用闭包来回避这种问题

jQuery插件机制

jQuery提供了两个用于扩展jQuery功能的方法,即jQuery.fn.extend()和jQuery.extend()jQuery.fn.extend()用于扩展第一类插件,jQuery.extend()用于扩展后两种插件

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,145
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,617
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,461
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,236
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,871
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,952