新技术案例

核心提示Ajax技术Ajax是一种技术组合,利用Ajax可以快速实现客户端与服务端的通信,而无需了解通信的底层技术,如XMLHttpReques,XML等技术,Ajax对这些技术进行了封装。jQuery提供了对Ajax技术很好的支持,使用者无须关心

Ajax技术

Ajax是多种技术的结合,可以在不了解通信底层技术的情况下,快速实现客户端和服务器端的通信,比如XMLHttpReques、XML等技术。Ajax封装了这些技术。

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

函数ajax

jQuery提供的ajax函数可以完成客户端与服务器异步通信的所有功能。该功能提供了Ajax的详细配置入口,可以更深入的控制Ajax。

Ajax函数有两种用法:

用法1:

jQuery.ajax

参数ConfigObject是一个JS对象,其属性是Ajax的配置项。

用法2:

jQuery.ajax

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

下表显示了常用的ConfigObject对象属性:

给…作注解

Async用于配置请求是同步的还是异步的。同步是指当前请求发出后,浏览器什么都不能做,后续代码只有在请求完成并返回数据后才会执行。异步请求是当前请求发出后,浏览器可以继续做任何事情。这个请求不会影响页面的加载和用户的操作,相当于在两条线上,各行其是,互不影响。

Async默认设置为true,是一个异步请求。如果需要发送同步请求,需要将async设置为false。

给…作注解

数据是客户端发送给服务器的数据,类型是JS object或者string。如果请求类型是GET,数据将作为url的参数自动添加到url中。通常,数据是一个JS对象,例如:

{foo1:"bar1 ",foo2:"bar2"}

给…作注解

DataType用于配置服务器返回的数据类型。可用类型如下:

返回Xml数据。Html:返回HTML数据。script:返回Javascript代码。Json:返回JSON数据。Text:返回纯文本内容。

如果未设置dataType,则默认返回的数据类型是text。

给…作注解

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

例如,以下函数可用作成功回调函数:

函数{//data可能是一个JS语句,比如xmlDoc、jsonObj、html、text等等}

案例:获取天气预报

使用案例天气预报界面查询某城市当天的天气。使用API之前,需要申请Key。如果没有API账户,需要先申请一个账户。扩展名代表天气类型。如果extension=base:返回实际天气,extension=all:返回预报天气。

接口调用描述如下:接口地址:url参数:key,账户参数:城市,城市名,如北京参数:分机,天气类型。如果值为extension,则返回指定城市的实际天气;如果值为all,将返回指定城市的天气预报。返回的数据是JSON数据:{"status": "1 "," count": "1 "," info": "ok "," infocode": "10000 "," lives": [{"province": "Beijing "," city": "Beijing ",“天气”:“晴”、“气温”:“0”、“风向”:“西南”、“风力”:“4”、“谦让”:“19”、“报到时间”:“2020-12-15 15: 30: 42

案例代码:

Javascript开发案例北京天气预报

get函数

get函数以get的方式向服务器发送ajax请求,GET函数的使用方法如下:

$.得到

参数如下表所示:

案例:使用get函数获取天气预报

Javascript开发案例北京天气预报

post函数post函数以POST方式向服务端发送ajax请求,post函数的定义与get函数相同,下面的代码将调用天气预报的API接口获取天气信息。function get_weather{$.post {$.text;$.text;$.text;$.text;},"json" ) }

GetJSON函数

如果确定服务器返回JSON数据,可以使用getJSON函数。使用这个函数时,不需要传入dataType参数。getJSON函数的用法如下:

$.getJSON

getJSON函数的定义与get和post函数的定义相同。当确定服务器将返回JSON数据时,不需要传入dataType参数。有关代码,请参见get函数。

 
友情链接
鄂ICP备19019357号-22