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:返回预报天气。

接口调用描述如下：接口地址：url参数：key，账号参数：city，城市名称，如北京参数：extensions，气象类型，若值为extension，返回city指定城市的实况天气，若值为all，返回指定城市的预报天气。接口返回数据为JSON数据：{"status": "1","count": "1","info": "OK","infocode": "10000","lives": [{"province": "北京","city": "北京市","adcode": "110000","weather": "晴","temperature": "0","winddirection": "西南","windpower": "4","humidity": "19","reporttime": "2020-12-15 15:30:42"}]}

案例代码：

JavaScript开发案例

北京市天气预报

get函数以GET方式向服务端发送ajax请求，get函数使用方法如下：

$.get(url, [data], [callback], [dataType])

参数说明如下表所示：

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

JavaScript开发案例

北京市天气预报

getJSON函数

若确定服务端返回JSON数据，可以使用getJSON函数，使用该函数时，不必再传入dataType参数。getJSON函数使用方法如下：

$.getJSON (url, [data], [callback])

getJSON函数的定义和get、post函数相同，在已经确定服务器返回JSON数据的情况下，不必再传入dataType参数。案例代码参见get函数。

举报/反馈