jQuery与Ajax应用

一、Ajax的优势和不足

1.Ajax的优势:

(1)不需要插件支持:不需要任何浏览器插件就可以被绝大多数浏览器支持

(2)优秀的用户体验:能在不刷新整个页面的前提下更新数据

(3)提高web程序的性能:按需发送数据

(4)减轻服务器和带宽的负担:在客户端创建Ajax引擎,把一些工作转移到客户端。

2.Ajax的不足

(1)浏览器对XMLHttpRequest对象的支持度不足:许多浏览器不支持XMLHttpRequest

(2)破坏浏览器前进、“后退”按钮的正常功能:这些按钮会失效

(3)对搜索引擎的支持的不足:爬虫程序无法理解javascript代码

(4)开发和调试工具的缺乏:缺少javascript开发和调试工具

二、Ajax的XMLHttpRquest

Ajax的核心是XMLHttpRquest对象,它是Ajax实现的关键——发送异步请求、接收响应及执行回调都是通过它来完成的。

三、安装Web环境——Appserv

1.下载AppServ

下载地址为:http://www.appservnetwork.com

2.安装AppServ

安装AppServ非常简单,只要连续轻松的单击“next”按钮,就可以

四、第一个Ajax例子

在解除jQuery的Ajax操作之前,先看一个用传统的javascript实现的Ajax例子。例子描述:单击一个按钮,然后通过传统javascript的Ajax的方式从服务器端取回一个“Hello Ajax!”的字符串并显示在页面上。

首先在前台页面中书写HTML代码,代码如下:

<input type = “button” value = “Ajax提交” onclick = ”Ajax() ;”/>

<div id = “resText”></div>

<button>按钮用来触发Ajax,id为“resText”的元素用来显示从服务器返回的HTML文本。接下来完成Ajax()函数。代码如下:

$(function(){

$("#send").click(function(){

$("#resText").load("1.html");

});

})

五、jQuery中的Ajax

jQuery对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第2层是load()、$.get()和$post()方法,第3层是$.getScript()和$getJSON()方法。首先介绍第2层的方法,因为使用频率很高

1.load()方法

(1)载入HTML文档

load()方法的结构为:

load( url [ , data] [ , callback])

它接受3个参数:

第一个是string类型的url,表示请求HTML页面的URL地址

第二个是object类型的data(可选),表示发送至服务器的key/value数据

第三个是function类型的callback(可选),表示请求完成时回调的函数,无论请求成功或失败

首先构建一个被load()方法加载并追加到页面中的HTML文件,名字为test.html,HTML代码如下:

<div class = “comment”>

<h6>张三:</h6>

<p class = “para”>沙发.</p>

</div>

<div class = “comment”>

<h6>李四:</h6>

<p class = “para”>板凳.</p>

</div>

<div class = “comment”>

<h6>王五:</h6>

<p class = “para”>地板.</p>

</div>

然后新建一个空白页面,在上面添加两个元素:<button>按钮用来触发Ajax事件,id为“resText”的元素用来显示追加的HTML内容。HTML代码如下:

<input type="button" value="Ajax获取" id = “send">

<div class="comment">已有评论:</div>

<div id = “resText”></div>

接下啦开始编写jQuery代码。等DOM元素加载完毕后,通过单击id为“send”的按钮来调用load()方法,然后将test.html的内容加载到id为“resText”的元素里。

jQuery代码如下:

$(function(){

$(“#send”).click(function(){

$(“#resText”).load(“test.html”) ;

});

});

(2)筛选载入的HTML文档

上面例子是将test.html页面中的内容都加载到id为“resText”的元素里。如果只需要test.html页面内的某些元素,那么可以使用load()方法的URL参数来达到目的。

load方法的URL参数的语法结构为:“url selector”。例如,需要加载test.html页面中class名为“para”的内容,可以使用如下代码:

$(“#resText”).load(“test.html  .para”) ;

(3)传递参数

load()方法的传递方式根据参数data来自动指定,如果没有参数传递,则采用GET方式传递,反之则会自动转换为POST方式。

(4)回调参数

对于必须加载完成后才能继续的操作,load()方法提供了回调函数,该函数有3个参数,分别代表请求返回的内容、请求状态和XMLHttpRequest对象,jQuery代码如下:

$(“#resText”).load(“test.html” , function(responseText , textStatus , XMLHttpRequest){

//  responseText :  请求返回的内容

//     testStatus :  请求状态:success、error、notmodified、timeout4种

//  XMLHttpRequest : XMLHttpRequest对象

})

2.$.get()方法和$.post()方法

$.get()和$.post()方法是jQuery的全局函数。

(1)$.get()方法

$.get()方法使用GET方式来进行异步请求。

它的结构为:$.get(url [ , data] [ , callback ] [ , type ])

$.get()方法参数解释:

参数名称

类型

说明

url

String

请求的HTML页的URL地址

data(可选)

Object

发送至服务器的key/value数据会作为QueryString附加到请求URL中

callback(可选)

Function

载入成功时回调函数(只有当Response的返回状态是success才调用该方法)自动将请求结果和状态传递给该方法

type(可选)

String

服务器端返回内容的格式,包括xml、html、script、json、text和_default

下面是一个评论页面的HTML代码,通过该段代码来介绍$.get()方法的使用

<form id="form1" action="#">

<p>评论:</p>

<p>姓名:<input type="text" name="username" id="username"></p>

<p>内容:<textarea name="content" id="content" rows="2" cols="20"></textarea></p>

<p><input type="button" id="send" value="提交"></p>

</form>

<div class="comment">已有评论:</div>

<div id="resText"></div>

(1)使用参数:

首先要确定请求页面的URL地址。代码如下:

$(“#send”).click(function(){

$.get(“get1.php” data参数,回调函数) ;

}) ;

然后,在提交之前,需要获取“姓名”和“内容”的值作为data参数传递给后台。

代码如下:

$(“#send”).click(function(){

$.get(“get1.php” , {

username : $(“#username”).val() ,

content : $(“#content”).val()

} ,回调函数) ;

}) ;

如果服务器端接收到传递的data数据并成功返回,那么就可以通过会调换函数将返回的数据显示到页面上。

$.get()方法的回调函数只有两个参数,代码如下:

fuction(data , textStatus){

//data : 返回的内容,可以是XML文档、JSON文档、HTML片段等等

//textStatus : 请求状态:success、error、notmodified、timeout4种

}

回调函数只有当数据成功返回后才能被调用。

(2)数据格式:

①HTML片段

由于服务器端返回的数据格式是HTML片段,因此并不需要经过处理就可以将新的HTML片段数据插入到主页中。jQuery代码如下:

$(function(){

$("#send").click(function(){

$.get("get1.php",{

username : $("#username").val(),

content : $("#content").val()

}, function(data , textStatus){

$("#resText").html(daga);  //将返回的数据添加到页面上

});

});

})

②XML文档

由于服务器端返回的数据格式是XML文档,因此需要对返回的数据进行处理,处理XML文档与处理HTML文档一样,也可以使用常规的attr()、find()、filter()以及其他方法。jQuery代码如下:

$(function(){

$("#send").click(function(){

$.get("get1.php",{

username : $("#username").val(),

content : $("#content").val()

}, function(data , textStatus){

var username = $(data).find("comment").attr("username");

var content = $(data).find("comment content").text();

var txtHtml = "<div class = 'comment'><h6>"

+ username + ":</h6><p class='para'>"

+ content + "</p></div>";

$("#resText").html(txtHtml);

});

});

})

XML文档的体积相对较大,解析和操作它们的速度要慢一些。

③JSON文件

JSON文件非常简洁易读,与XML文档一样可以方便的被重用。

由于服务器端返回的数据格式是JSON文件,因此需要对返回的数据进行处理之后,才可以将新的HTML数据添加到主页中。jQuery代码如下:

$(function(){

$("#send").click(function(){

$.get("get1.php",{

username : $("#username").val(),

content : $("#content").val()

}, function(data , textStatus){

var username = data.username;

var content = data.content;

var txtHtml = "<div class = 'comment'><h6>"

+ username + ":</h6><p class='para'>"

+ content + "</p></div>";

$("#resText").html(txtHtml);

},"json");

});

})

将$.get()方法的第4个参数设置为“json”来代表期待服务器端返回的数据格式。

通过对3中数据格式的优缺点进行分析,可以得知在不需要与其他应用程序共享数据的时候,使用HTML片段来返回数据一般来说是最简单的;如果数据需要重用,那么JSON文件是不错的选择,它在性能和文件大小方面具有优势;而当远程应用程序未知时,XML文档时明智的选择。

2.$ .post()方法

$.get()方法与$.post()方法的区别:

GET请求

POST请求

GET请求会将参数跟在URL后进行传递

POST请求则是作为HTTP消息的实体内容发送给Web服务器

GET方式对传输的数据有大小限制(通常不能大于2KB)

POST方式传递的数据量要比GET方式大得多(理论上不受限制)

GET方式请求的数据会被浏览器缓存起来,因此其他人就可以从浏览器的历史记录中读取到这些数据,例如账号密码等。在某种情况下,GET方式会带来严重的安全性问题

POST方式相对来说可以避免这些问题

在PHP中,GET方式的数据可以用$_GET[]获取,也可以用$_REQUEST[]获取

POST方式可以用$_POST[]获取,也可以用$_REQUEST[]获取

由于POST和GET方式提交的数据可以通过$_REQUEST[]获取,因此只需要改变jQuery函数就可以将程序在GET和POST请求之间切换。代码如下:

$(function(){

$("#send").click(function(){

$.post("post1.php" ,{

username : $("#username").val() ,

content : $("#content").val()

} , function(data , textStatus){

$("#resText").append(data);

});

});

})

另外,当load()方法带有参数传递时,会使用POST方式发送请求。因此也可以使用load()方法来完成同样的功能。代码如下:

$(function(){

$("#send").click(function(){

$("#resText").load("post1.php",{

username : $("#username").val(),

content : $("#content").val()

})

});

})

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

(1)$.getScript()

有时候,在页面初次加载时就取得所需的全部javascript文件是完全没有必要的。为此jQuery提供了$.getScript()方法来直接加载.js文件,与加载一个HTML片段一样简单方便,并且不需要对javascript文件进行处理,javascript文件会自动执行。

jQuery代码如下:

$(function(){

$(“#send”).click(function(){

$.getScript(‘test.js’);

});

})

与其他方法一样,$.getScript()方法也有回调函数,它会在javascript文件成功载入后运行。例如想载入jQuery官方颜色动画插件,成功后给元素绑定颜色变化动画可以用到$.getScript()方法的回调函数。代码如下:

$(function(){

$.getScript(‘jquery.color.js’,function(){

$(‘#go’).click(function(){

$(“.block”).animate({backgroundColor : ‘pink’} , 1000)

.animate({backgroundColor : ‘blue’} , 1000) ;

});

});

});

(2)$.getJSON()方法

$.getJSON()方法用于加载JSON文件,与$.getScript()方法的用法相同。

jQuery代码如下:

$(function(){

$(“#send”).click(function(){

$.getJSON(‘test.json’) ;

}) ;

})

加载JSON文件之后,javascript对返回的数据要进行处理就要调用回调函数。代码如下:

$(function(){

$(“#send”).click(function(){

$.getJSON(‘test.json’ , function(data){

// data :返回的数据

}) ;

}) ;

})

jQuery使用了一个通用的遍历方法$.each(),可以用于遍历对象和和数组。$.each()函数不同于jQuery对象的each()方法,它是一个全局函数,不操作对象,而是以一个数组或者对象作为第1个参数,以一个回调函数作为第2个参数。回调函数拥有两个参数:第1个为对象的成员或数组的索引,第2个为对应变量或内容。代码如下:

$(function(){

$(“#send”).click( function(){

$.getJSON(‘test.json’ , function(data){

$(“#resText”).empty();

var html = ‘ ‘ ;

$.each(data , function(commentIndex , comment){

html += ‘<div class = “comment”><h6>’

+ comment[‘username’] + ‘:</h6><p class = “para”>’

+ comment[‘content’] + ‘</p></div>’ ;

}) ;

$(‘#resText’).html(html) ;

});

});

})

4.$.ajax()方法

$.ajax()方法是jQuery最底层的Ajax实现,它们的结构是:

$.ajax(options)

该方法只有1个参数,但在这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息,参数以key/value的形式存在,所有参数都是可选的。

六、序列化元素

1.serialize()方法

与jQuery其他方法一样,serialize()方法也是作用于一个jQuery对象,它能够将DOM元素的内容序列化为字符串,用于Ajax请求。

$(“#send”).click(function(){

$.get(“get1.php” , $(“#form1”).serialize() , function(data , textStatus){

$(“#resText”).html(data) ;

}) ;

}) ;

2.serializeArray()方法

该方法不是返回字符串而是将DOM元素序列化之后返回JSON格式的数据。jQuery代码如下:

var fields = $(“: checkbox , : radio”).serializeArray() ;

console.log(fields) ;

3.$.param()方法

它是serialize()方法的核心,用来对一个数组或对象按照key/value进行序列化。比如将一个普通的对象序列化:

var obj = {a : 1 , b : 2 , c : 3} ;

var k = $.param(obj) ;

alert(k) ;

jQuery第六章的更多相关文章

  1. jQuery 第六章 jQuery在Ajax应用

    1.本章目标 ajax 2.ajax 异步刷新技术,我们的网页不需要全部刷新,按需实现局部刷新,上线后台的交互 用户体验好 地图,前台验证,表单提交,修改,查询等等 原生的js和ajax packag ...

  2. jQuery 第六章 实例方法 动画

    .show() .hide() .toggle() .fadeIn() .fadeout() .fadeToggle() .fadeTo() .slideDown() .slideUp() .slid ...

  3. jQuery系列 第六章 jQuery框架事件处理

    第六章 jQuery框架事件处理 JavaScript以事件驱动来实现页面的交互,其核心是以消息为基础,以事件来驱动.虽然利用传统的JavaScript事件处理方式也能够完成页面交互,但jQuery框 ...

  4. 进击的Python【第十六章】:Web前端基础之jQuery

    进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...

  5. KnockoutJS 3.X API 第六章 组件(5) 高级应用组件加载器

    无论何时使用组件绑定或自定义元素注入组件,Knockout都将使用一个或多个组件装载器获取该组件的模板和视图模型. 组件加载器的任务是异步提供任何给定组件名称的模板/视图模型对. 本节目录 默认组件加 ...

  6. 读《编写可维护的JavaScript》第六章总结

    第六章 避免使用全局变量 JavaScript执行环境在很多方面都有其独特之处,全局变量就是其中之一.“全局变量”是一个神秘的对象,它表示了脚本的最外层上下文. 在浏览器中,windows对象往往重载 ...

  7. 第六章SignalR的服务器广播

    第六章SignalR的服务器广播 1.概述: VS可以通过 Microsoft.AspNet.SignalR.Sample NuGet包来安装一个简单的模拟股票行情应用.在本教程的第一部分,您将从头开 ...

  8. Knockout应用开发指南 第六章:加载或保存JSON数据

    原文:Knockout应用开发指南 第六章:加载或保存JSON数据 加载或保存JSON数据 Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地 ...

  9. 《Django By Example》第六章 中文 翻译 (个人学习,渣翻)

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:无他,祝大家年会都中奖!) 第六章 ...

随机推荐

  1. jquery中动态新增的元素节点无法触发事件解决办法

    在使用jquery中动态新增的元素节点时会发现添加的事件是无法触发的,我们下面就为各位来详细的介绍此问题的解决办法. 比如做一个ajax读取留言列表的时候,每条留言后面有个回复按钮,class为“re ...

  2. JS 多个参数的传递

    var link = $("<a/>", { href: '/StandardManagement/StandardActivitiesDetail?' + $.par ...

  3. 微信小程序-video详解

    在小程序火热的今天,作为IT行业的一员,我也来凑了一下热闹,话不多说了,接下来看看视频上传,和跨页面获取值的相关案例吧!! 视频上传部分代码: 视频播放 随机颜色的产生: 颜色页面的选择:

  4. windows 下安装mongodb及其配置环境

    MongoDB的安装很简单,设置好安装路径后,一直Next直到安装结束,最大的坑就是MongoDB服务的安装,下面具体说下MongoDB安装之后的一些配置操作 一.下载 首先到官网(http://ww ...

  5. SUSE linux升级perl及openssl

    一.perl安装: 1.下载并解压软件:tar zxvf perl-5.24.0.tar.gz 2.运行./configure.gnu -help查看帮助,运行./configure.gnu -des ...

  6. GridControl/GridView的分组操作

    今天在模块编写中碰到了对表格的分组,特意在这里把它记录下来. 一.背景:Dev14.1.3,GridControl,.NET4.0+C# 二.过程 1.GridControl设计 一共添加4列:在下面 ...

  7. Exchange 2010 实用小技巧

    #Exchange安装必须开启防火墙服务 #批量建用户: for /f  "tokens=1,2,3,4,5,6,7 delims=," %a in (c:\users.csv) ...

  8. UNIX基础--进程和守护进程

    进程和守护进程 Processes and Daemons 进程(Processes) FreeBSD 是一个多任务操作系统. 这就意味着好像一次可以运行一个以上的程序. 每个占用一定时间运行的程序就 ...

  9. 关于Java集合

    之前关于java集合认识,虽然理解,但是总是忘记关键点,今明两天写一篇关于集合的随笔

  10. Python 学习笔记13:Python + wsgi + django 配置。坑爹的python3和wsgi不兼容的解决

    今人不见古时月,今月曾经照古人.生命是如此的美丽与短暂! 学习Python已经两个月了,Python的语法通过做简单的语法题和看Python语法介绍,有了初步的了解.但上班还是要做别的事情,所以感觉学 ...