jQuery与Ajax以及序列化


Posted in Javascript onFebruary 01, 2016

关于AJAX

所谓Ajax,全名Asynchronous JavaScript and XML。(也就异步的JS和XML)

简单点来讲就是不刷新页面来发送和获取数据,然后更新页面。

Ajax的优势

•无需插件支持
•优秀的用户体验
•提高web程序的性能
•减轻服务器和带宽的负担

Ajax的不足

•浏览器兼容不足
•破坏浏览器前进和后退按钮的正常功能
•对搜索引擎的支持不足
•开发和调试工具的 缺乏

好吧,这些都是几年前的不足。技术的发展很快,这些不足也会慢慢弥补,起码现在调试Ajax并不难。

Ajax的核心是XMLHttpRequest对象,它是Ajax实现的关键。

传统的实现Ajax的例子就不举了,太蛋疼了,我都没记,网上一搜一大堆。

关于jQuery中的Ajax

$.ajax()方法是封装了最原始的js的Ajax方式。

load(),$.get(),$.post()是封装了$.ajax()得来

$.getScript()和$.getJSON()是进一步的封装。

•load()方法 •用处:载入远程HTML代码并插入DOM中,通常用于获取静态的数据文件,结构为:load(url [,data] [,callback])。 •url为请求的地址
•data可选,为发动到服务器的参数对象
•callback为回调函数,请求不论成功还是失败都调用
•载入页面的时候甚至可以在地址里加上筛选

$("#resDiv").load("test.html .myClass");//这个div里只载入test.html页面里面 样式为myClass 的元素


//举一个完整的例子
$(function(){
$("#resDiv").load("text.php",{name:"troy",textInfo:"hello"},function(responseText,textStatus,XMLHttpRequest){
//responseText:请求返回的内容
//textStatus: 请求状态:success、error、notmodiffied、timeout 4种 
//XMLHttpRequest: XMLHttpRequest对象
});
});

•$.get()方法 •明显的看到调用的方式不同,所以说这函数是jQuery的全局函数。而此前的方法和load()这种都是对jQuery对象进行操作
•$.get()方法使用GET方式来进行异步请求,结构为:$.get(url [,data] [,callback] [,type]) •前三个参数就不说了,唯一不同的是callback只有请求成功才调用
•type参数为服务器端返回内容的格式,包括xml,html,script,json,text和_default
•例子

$("#send").click(function()
$.get("get1.php"
,{
username:$("#username").val(),
content:$("#content").val()
}
,function(data,textStatus){
//data: 返回的内容,可以是XML文档、JSON文件、HTML片段
//textStatus: 请求状态:success、error、notmodiffied、timeout 4种
}
)
})

•$.post()方法 •它与get方法的玩法一样,不过一个是get方式,一个是post方式。
•$.getScript()方法 •有的时候页面初次加载没必要获取所有的脚本,所以jQuery提供了getScript这种方法来直接加载js文件。
•例子

$('#send').click(function(){
$.getScript('test.js',function(){
//do something 这个时候脚本已经加载了,不需要再对js文件进行处理
});
});

• $.getJSON()方法 •用于加载JSON文件,用法同上,只不过返回的json数据而已

$('#send').click(function(){
$.getJSON("myurl",function(data){
var html="";
$.each(data,function(commentIndex,comment){
html+=commentIndex+":"+comment['username']+";";
})
alert(html);
})
});
//注意一下ecch这种玩法,同样是个全局函数。他的回调函数中,第一个参数为成员的索引,第二个为变量和内容

顺便扩展一下,跨域访问的JSONP

$("#send").click(function(){
$.getJSON("http://www.某网站.com/services/getMyCmpJson?tags=car&tagmode=any&format=json&jsoncall back=?"
,function(data){
//某些操作
}
)
})

//JSONP是个非官方协议,采用json与<script>标记结合的方式,主要用于web应用程序跨域

•$.ajax()方法 •这个方法是jQuery最底层的Ajax实现,所以理所当然更加强大以及复杂。

虽然它只有一个参数,但是这个参数对象包含的属性非常多,不过都是可选的。以下列出所有属性: • url:默认当前页地址,也可以手动写请求的地址

•type:默认为GET,也可以写POST
•timeout:设置请求超时时间(毫秒)
•data:发送的数据
•dataType:预期服务器返回的数据类型。
•beforeSend:发送前的调用的函数,如果次函数返回false将取消本次ajax请求。

function(XMLHttpRequest){//XMLHttpRequest是唯一的参数
this;//调用本次Ajax请求时传递的options参数
}

•complete:请求完后,无论成功还是失败都调用。

function(XMLHttpRequest,textStatus){//textStatus描述成功请求类型
this;//调用本次Ajax请求时传递的options参数
}

•success:请求成功后的回调函数

function(data,textStatus){//data为成功返回的数据
this;//调用本次Ajax请求时传递的options参数
}

•error:请求失败调用的函数

function(XMLHttpRequest,textStatus,errorThrown){
// textStatus为错误信息,errorThrown为捕获的错误对象,通常只有其中一个包含信息
this;//调用本次Ajax请求时传递的options参数
}

•global:默认为true。表示是否触发全局Ajax事件。
•序列化元素 •serialize()方法 •它能够将DOM元素内容序列化为字符串

//不仅可以序列化整个表单,也可以序列化单个元素,并且都是自动编码过的
$.post("myurl",$("#form1").serialize(),function(data,textStatus){
$("#resText").html(data);
})

•serializeArray()方法 •它能够将DOM元素内容序列化为JSON格式
•$.param()方法 •这是serialize方法的核心,用来对一个数组或对象按照键值对进行序列化

var obj={a:1,b:2,c:3};
var k=$.param(obj);//输出为a=1&b=2&c=3

•jQuery中的Ajax全局事件 •ajaxStart()方法:当Ajax请求开始就触发
•ajaxStop()方法:当Ajax请求结束就触发

<div id="loading">加载中...</div>
$("#loading").ajaxStart(function(){
$(this).show();//ajax开始请求就显示加载中
});
$("#loading").ajaxStop(function(){
$(this).hide();//ajax开始结束就隐藏加载中
});

•ajaxComplete():当Ajax请求完成就触发
•ajaxError():当Ajax请求发生就触发,捕捉到的错误可以作为最后一个参数传递
•ajaxSend():当Ajax请求发送前就触发
•ajaxSuccess():当Ajax请求成功就触发
•如果想使某个Ajax请求不受全局事件的影响,可以在$.ajax中将global属性设置为false,这个在前面已经讲过了。当然也可以在ajax请求前:

$.ajaxPrefilter(function(options){//每次发送前请求
options.global=true;
})

好吧,写完了。最后顺带提一下,setTimeout("doMethod()",4000);为4s后执行doMethod这个函数。

//一个简单的定时发送功能
function updateMsg(){
$.post("myurl",{time:timestamp},function(xml){
//do something
});
setTimeout("updateMsg()",4000);
}
Javascript 相关文章推荐
jQuery简单tab切换效果实现方法
Apr 08 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
js实现每日自动换一张图片的方法
May 04 Javascript
javascript控制图片播放的实现代码
Jul 29 Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 Javascript
基于jquery实现左右按钮点击的图片切换效果
Jan 27 Javascript
JavaScript实现的CRC32函数示例
Nov 23 Javascript
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
Sep 18 Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 Javascript
node.js命令行教程图文详解
May 27 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 Javascript
js格式化输入框内金额、银行卡号
Feb 01 #Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 #Javascript
JavaScript中eval函数的问题
Jan 31 #Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
Jan 30 #Javascript
JavaScript中的this机制
Jan 30 #Javascript
实现高性能JavaScript之执行与加载
Jan 30 #Javascript
深入探秘jquery瀑布流的实现
Jan 30 #Javascript
You might like
用PHP实现Ftp用户的在线管理的代码
2007/03/06 PHP
PHP sprintf()函数用例解析
2011/05/18 PHP
PHP取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
Jquery 获取对象的几种方式介绍
2014/01/17 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
js清空form表单中的内容示例
2014/05/20 Javascript
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
javascript实现拖动元素交换位置
2015/11/29 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
vue自定义全局共用函数详解
2018/09/18 Javascript
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
Python中的__SLOTS__属性使用示例
2015/02/18 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
Python的Tkinter点击按钮触发事件的例子
2019/07/19 Python
python函数的万能参数传参详解
2019/07/26 Python
运行tensorflow python程序,限制对GPU和CPU的占用操作
2020/02/06 Python
Python装饰器结合递归原理解析
2020/07/02 Python
Python logging模块进行封装实现原理解析
2020/08/07 Python
Python 在 VSCode 中使用 IPython Kernel 的方法详解
2020/09/05 Python
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
政治表现评语
2014/05/04 职场文书
产品推广策划方案
2014/05/10 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
机动车交通事故协议书
2015/01/29 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书
2015年初三班主任工作总结
2015/05/21 职场文书
Python基础之数据类型知识汇总
2021/05/18 Python