会员登录 | 会员注册 | 意见建议 | 网站地图

站长资源综合门户

当前位置:首页 > 站长学院 > 建站经验 > jQuery类库新手使用指南之AJAX体例(第一部分)

jQuery类库新手使用指南之AJAX体例(第一部分)

时间:2012-03-20 18:40:44   作者:   来源:   点击:

最近几年很多网站,事实上根基所有的网站都使用一个手艺 - AJAX来提供流利并且高效的用户体验。无论是出名的谷歌 Maps仍是Gmail,或是风行的javascript框架-jQuery Mobile,都使用AJAX来获得后台数据,并且实时更新用户阅读页面。

使用javascript代码来构建一个AJAX应用可能需要技能。可是,很多的javascript类库,包含jQuery都已经内建支持AJAX,这样使得开辟一个AJAX驱动的网站或应用变得很是简单。

在这个教程中,我们将学习使用jQuery来执行根基的AJAX请求操作。 你将会学习:

1.AJAX是什么?工作原理是什么?为什么AJAX是一个好东西?

2.如何使用jQuery来挪用各类AJAX请求

3.使用AJAX请求来发送数据

4.措置办事器真个AJAX请求,获得返回的数据

5.如何自定义jQuery的AJAX措置及其参数设置

6.AJAX的高级使用

注意:本文主要介绍javascript真个使用,如何你需要体会后台,请参考你所使用的语言。

AJAX是什么?工作原理是什么?为什么AJAX是一个好东西?

简单说,AJAX是一个帮忙你的阅读器和办事器异步通讯的javascript技能。是AsynchronousJavaScript And XML的缩写,和传统的web编程比较来讲,他们有如下区别:

1.传统体例的web页面措置包含了链接和表单,当用户点击或发送,将会对办事器进行一次请求挪用。然后办事器会通过返回整个页面来响应,然后阅读器负责显示 页面内容,替换起头的页面。这个过程可能很是的耗时间,往往会让用户的使用体验年夜打折扣,因为用户可能得花很多时间来期待页面加载

2.使用AJAX体例,javascript代码会向办事器请求一个URL,同时也可以发送数据。javascript代码然后措置办事器的响应,然后对应做措置。例如,可能计较返回的数据,添加或更新页面上的组件,或通知用户办事器端数据的转变等

因为AJAX的请求往往在后台产生,用户在阅读网页的时候,javascript代码可以继续在后台工作。这个过程对用户来讲是不偏见的。并且不会打搅用户目前阅读的页面内容。这一点使得web应用更接近于桌面应用的行为。

AJAX的根本是javascript中的XMLHttpRequest对象,这个对象提供了各类体例,例如,open(),send()和onreadystatechange()体例来成立AJAX的请求和响应。

书写跨阅读器的AJAX的js代码可能很是费时。很幸运的是,jQuery提供了使用简单的AJAX体例帮忙你跳过底层的措置 。

我们首先来看看最重要的体例:$.get()。

使用$.get()体例来成立GET请求

jQuery的$.get()体例提供了你简单的体例来措置HTTP GET体例,通常常使用来获得web页面或图片。对应的是POST体例。使用$.get()体例很是简单,如下:

$.get(url );

url是办事器真个一个地址,可以是办事器端脚本或是一个静态页面,如下:

$.get("http://***/index.html");

或一个动态的document

$.get("http://***/index.jsp");

当然,同时也支持参数,如下:

$.get("http://***/index.jsp?category=jquery");

一个简单的体例来措置是使用参数对象来发送http参数,如下:

var gbdata={category:"jquery", subcategory:"ajax"}; $.get("http://***/index.jsp", data );

当然以下形式也没有问题:

var gbdata="category=jquery&subcategory=ajax"; $.get("http://gbin1/index.jsp",data );

办事器端取得数据

这里我们使用的$.get()体例都是发送请求到办事器,可是有的时候,我们需要取得办事器返回的内容,例如,一些数据。这里我们如何措置呢?谜底就是书写一个回调(Callback)体例,一个AJAX请求的返回数据会作为这个回调体例的参数,如下:

function myCallback( returnedData) { // 这里我们可以措置returnedData,例如,封装数据生成HTML展现给用户 }

一旦你成立了你的回调函数,你便可以将它传递给$.get()体例,如下:

var gbdata={category:"jquery", subcategory:"ajax"}; $.get("http://***/index.jsp", gbdata, myCallback );

指定返回的数据类型

办事器真个数据返回类型可以是不合的格局,包含,XML,JSON和javascript,或HTML。缺省情况下,jQuery会极力自己判断返回的数据格局,并且正确解析,当然最好的年夜家自己指定命据格局。

参数可以为以下:

分享到:

网友评论

热门建站经验