js原生ajax与jquery的ajax用法对比

ゝ一纸荒年。 2022-05-28 12:58 302阅读 0赞

#  js原生ajax与jquery的ajax用法对比 #

## 一、Ajax概述 ##

AJAX（AsynchronousJavascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。

1，异步交互

2，局部刷新

## 二、js原生Ajax实现步骤 ##

### 1，get请求 ###

Java Code

### 2，post请求 ###

Java Code

## 三、jquery的Ajax ##

Java Code

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#e3e3e3;vertical-align:text-top;"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 </td> 
 <td style="background-color:#008284;">&nbsp;</td> 
 <td style="background-color:#efefef;vertical-align:text-top;"> $.ajax( { &nbsp;&nbsp;&nbsp;&nbsp;//url:发送请求的地址（默认为当前页面），要求是String类型的参数 &nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;'/comm/test1.php', &nbsp;&nbsp;&nbsp;&nbsp;//type:请求方法(post或者get)，默认是get，要求是String类型的参数。其他的htpp请求如（put、delete）等也支持 &nbsp;&nbsp;&nbsp;&nbsp;type:&nbsp;'POST', &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;async:默认值为true，所有请求是异步，要求是Bool类型的参数，如果需要发送同步请求，将此项设置为false &nbsp;&nbsp;&nbsp;&nbsp;async:&nbsp;true, &nbsp;&nbsp;&nbsp;&nbsp;/*data:发送到服务器的数据，要求是Object或string类型的参数。如果已经不是字符串， &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;将自动转换为字符串格式。get请求中将附加在url后。对象必须为key/value格式， &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;例如{foo1:"bar1",foo2:"bar2"}转换为&amp;foo1=bar1&amp;foo2=bar2。如果是数组， &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&amp;foo=bar1&amp;foo=bar2。*/ &nbsp;&nbsp;&nbsp;&nbsp;data:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;'yang',&nbsp;age:&nbsp;25 &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;//timeout:设置请求超时时间（毫秒），要求是number类型的参数。此设置将覆盖$.ajaxSetup()方法的全局设置。 &nbsp;&nbsp;&nbsp;&nbsp;timeout:&nbsp;5000,&nbsp;&nbsp;&nbsp;//超时时间 &nbsp;&nbsp;&nbsp;&nbsp;/*dataType:预期服务器返回的数据类型，要求为String类型的参数。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下： &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;xml：返回XML文档，可用JQuery处理。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;json：返回JSON数据。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text：返回纯文本字符串。*/ &nbsp;&nbsp;&nbsp;&nbsp;dataType:&nbsp;'json', &nbsp;&nbsp;&nbsp;&nbsp;//beforeSend:发送请求前可以修改XMLHttpRequest对象的函数（也可以修改页面一下信息） &nbsp;&nbsp;&nbsp;&nbsp;beforeSend:&nbsp;function(xhr) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(xhr) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('发送前') &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;/*success:请求成功后调用的回调函数,要求为Function类型的参数，有两个参数。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(1)由服务器返回，并根据dataType参数进行处理后的数据。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(2)描述状态的字符串。*/ &nbsp;&nbsp;&nbsp;&nbsp;success:&nbsp;function(data,&nbsp;textStatus,&nbsp;jqXHR) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(data) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(textStatus) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(jqXHR) &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;//error:请求失败时被调用的函数。要求为Function类型的参数，该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选) &nbsp;&nbsp;&nbsp;&nbsp;error:&nbsp;function(xhr,&nbsp;textStatus) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('错误') &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(xhr) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(textStatus) &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;//complete:请求完成后调用的回调函数（请求成功或失败时均调用）。要求为Function类型的参数， &nbsp;&nbsp;&nbsp;&nbsp;complete:&nbsp;function() &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('结束') &nbsp;&nbsp;&nbsp;&nbsp;} }) </td> 
 </tr> 
 </tbody> 
</table>