竹笋

首页 » 问答 » 灌水 » 第12篇Ajax技术与项目案例米粒教育
TUhjnbcbe - 2023/2/1 22:24:00

Ajax技术

Ajax是一种技术组合,利用Ajax可以快速实现客户端与服务端的通信,而无需了解通信的底层技术,如XMLHttpReques,XML等技术,Ajax对这些技术进行了封装。

jQuery提供了对Ajax技术很好的支持,使用者无须关心Ajax的核心对象或实现机制,只需要使用ajax()、get()或post()方法,就能很方便地完成客户端与服务端的交互。

ajax函数

jQuery提供的ajax()函数可以完成客户端与服务端异步通讯的所有功能,该函数提供Ajax详细的配置入口,可以对Ajax进行更为深入的控制。

ajax()函数有两种使用方法:

用法1:

jQuery.ajax(ConfigObject)

参数ConfigObject是JS对象,该对象的属性为Ajax的配置项。

用法2:

jQuery.ajax(url,ConfigObject)

用法2是用法1的变体,它只是将ConfigObject对象的url属性提取出来作为一个独立的参数,该参数为发送请求的url。

常用的ConfigObject对象属性如下表所示:

注释(1)

async用于配置请求是同步还是异步。同步请求是当前发出请求后,浏览器什么都不能做,必须得等到请求完成返回数据之后,才会执行后续的代码。异步请求是当前发出请求后,浏览器可以继续做任何事,该请求并不会影响页面的加载与用户的操作,相当于是在两条线上,各走各的,互不影响。

async默认设置为true,是异步请求。若需要发送同步请求,需要将async设置为false。

注释(2)

data为客户端发送到服务端的数据,类型为JS对象或字符串。若请求类型是GET,data会自动添加到url之后,作为url的参数。data一般为JS对象,例如:

{foo1:bar1,foo2:bar2}

注释(3)

dataType用于配置服务端返回的数据类型,可用的类型如下:

xml:返回XML数据。html:返回HTML数据。script:返回JavaScript代码。json:返回JSON数据。text:返回纯文本内容。

若dataType没有设置,默认返回数据类型是text。

注释(4)

success是回调函数,该函数有两个参数:一个参数是服务端返回的数据,数据类型由dataType指定;一个参数是描述状态的字符串。

例如下面的函数可以作为success回调函数:

function(data,status){//data可能是xmlDoc、jsonObj、html、text等等JS语句}

案例:获取天气预报

案例使用天气预报接口查询当日某城市天气,使用API前您需先申请Key,若无API账号需要先申请账号.extension代表气象类型,若extension=base:返回实况天气,extension=all:返回预报天气。

接口调用描述如下:接口  count:1,  info:OK,  infocode:,  lives:[{    province:北京,    city:北京市,    adcode:1,    weather:晴,    temperature:0,    winddirection:西南,    windpower:4,    humidity:19,    reporttime:-12-:30:42  }]}

案例代码:

htmlheadtitleJavaScript开发案例/titlemeta

1
查看完整版本: 第12篇Ajax技术与项目案例米粒教育