最近几年很多网站,事实上根基所有的网站都使用一个手艺 - 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会极力自己判断返回的数据格局,并且正确解析,当然最好的年夜家自己指定命据格局。
参数可以为以下: