Ajax?Web數(shù)據(jù)交互方式有什么作用？怎么用？

AjaxWeb數(shù)據(jù)交互方式有什么作用？怎么用？Ajax技術發(fā)送http請求獲取后臺服務器數(shù)據(jù)，Ajax的簡寫方式可以使用$.get和$.post方法來完成。AJAX 是開發(fā)者利器：不刷新頁面更新網(wǎng)頁；在頁面加載后從服務器請求數(shù)據(jù)；在頁面加載后從服務器接收數(shù)據(jù)；在后臺向服務器發(fā)送數(shù)據(jù)。

學習目標：能夠知道Ajax的作用

1. Ajax是什么？

Ajax是Asynchronous Javascript and XML的簡寫，Ajax一個前后臺配合的技術，它可以讓 javascript 發(fā)送異步的 http 請求，與后臺通信進行數(shù)據(jù)的獲取，Ajax最大的優(yōu)點是實現(xiàn)局部刷新，Ajax可以發(fā)送http請求，當獲取到后臺數(shù)據(jù)的時候更新頁面顯示數(shù)據(jù)實現(xiàn)局部刷新，在這里大家只需要記住，當前端頁面想和后臺服務器進行數(shù)據(jù)交互就可以使用Ajax了。

這里提示一下大家,在html頁面使用Ajax需要在web服務器環(huán)境下運行,一般向自己的web服務器發(fā)送Ajax請求。

2. Ajax的使用方法介紹

jquery將它封裝成了一個方法$.Ajax()，我們可以直接用這個方法來執(zhí)行Ajax請求。

示例代碼:

<script>    $.ajax({    // 1.url 請求地址    url:'http://t.weather.sojson.com/api/weather/city/101010100',// 2.type 請求方式，默認是'GET'，常用的還有'POST'    type:'GET',// 3.dataType 設置返回的數(shù)據(jù)格式，常用的是'json'格式    dataType:'JSON',// 4.data 設置發(fā)送給服務器的數(shù)據(jù),沒有參數(shù)不需要設置?    // 5.success 設置請求成功后的回調(diào)函數(shù)    success:function (response) {        console.log(response);        },// 6.error 設置請求失敗后的回調(diào)函數(shù)    error:function () {        alert("請求失敗,請稍后再試!");    },// 7.async 設置是否異步，默認值是'true'，表示異步，一般不用寫    async:true});</script>

Ajax方法的參數(shù)說明:

1.url 請求地址

2.type 請求方式，默認是'GET'，常用的還有'POST'

3.dataType 設置返回的數(shù)據(jù)格式，常用的是'json'格式

4.data 設置發(fā)送給服務器的數(shù)據(jù)，沒有參數(shù)不需要設置

5.success 設置請求成功后的回調(diào)函數(shù)

6.error 設置請求失敗后的回調(diào)函數(shù)

7.async 設置是否異步，默認值是'true'，表示異步，一般不用寫

8.同步和異步說明

同步是一個Ajax請求完成另外一個才可以請求，需要等待上一個Ajax請求完成，好比線程同步。

異步是多個Ajax同時請求，不需要等待其它Ajax請求完成，好比線程異步。

Ajax的簡寫方式:

$.Ajax按照請求方式可以簡寫成$.get或者$.post方式

Ajax簡寫方式的示例代碼:

<script>    $(function(){                 $.get("http://t.weather.sojson.com/api/weather/city/101010100",function(dat,status){            console.log(dat);            console.log(status);            alert(dat);        }).error(function(){            alert("網(wǎng)絡異常");        });                 $.post("test.php",{"func": "getNameAndTime"},function(data){            alert(data.name);             console.log(data.time);         },"json").error(function(){            alert("網(wǎng)絡異常");        });     });</script>

$.get和$.post方法的參數(shù)說明:

$.get(url,data,success(data,status,xhr),dataType).error(func)

$.post(url,data,success(data,status,xhr),dataType).error(func)

1.url 請求地址

2.data 設置發(fā)送給服務器的數(shù)據(jù)，沒有參數(shù)不需要設置

3.success 設置請求成功后的回調(diào)函數(shù)

data 請求的結果數(shù)據(jù)

status 請求的狀態(tài)信息,比如: "success"

xhr 底層發(fā)送http請求XMLHttpRequest對象

4.dataType 設置返回的數(shù)據(jù)格式

"xml"

"html"

"text"

"json"

5.error 表示錯誤異常處理

func 錯誤異常回調(diào)函數(shù)

3. 小結

Ajax是發(fā)送http請求獲取后臺服務器數(shù)據(jù)的技術；Ajax的簡寫方式可以使用$.get和$.post方法來完成。

985大學 211大學 全國院校對比 專升本