Ajax請求-get(),post()

一.

1. 數據，是網頁的靈魂
2. 數據，也是服務器對外提供的一種資源。只要是資源，必然要通過 請求-》處理-》響應的方式進行獲取。
3. 如果要再網頁中請求服務器的數據資源，則需要用到XMLHttpRequest對象。
4. XMLHttpRequest（簡稱xhr）是瀏覽器提供的js成員，通過它，可以請求服務器上的數據資源。
5. 最簡單的用法  var xhrObj=new XMLHttpRequest()

 

二

  資源的請求方式

客服端請求服務器時，請求的方式有很多種，最常見的放方式是get和post請求。

1.get 請求通常用於獲取服務端資源(向服務器要資源)

例如：根據url地址，從服務器獲取HTML文件，CSS文件，JS文件，圖片文件，數據資源等

2.post請求通常用於向服務器提交數據(往服務器發送資源)

例如:登錄時向服務器提交登錄信息，注冊時向服務器提交注冊信息，添加用戶時向服務器提交用戶信息等各種數據提交操作

 

三      了解AJAX

1. AJax的全稱是Asynchronous JavaScript And XML （異步JavaScript和XML）
2. 通俗的理解：在網頁種利用XMLHttpRequest對象和服務器進行數據交互的方式，就是Aiax

四    Ajax的典型的應用場景

1. 用戶名檢測：注冊用戶時，通過ajax的形式，動態檢測用戶名是否被占用
2. 搜索提示：當輸入關鍵字時，通過ajax的形式，動態加載搜索提示列表
3. 數據分頁顯示：當點擊頁碼值的時候，通過ajax的形式，根據頁碼值動態刷新表格的數據
4. 數據的增刪改查：數據的添加，刪除，修改，查詢操作，都需要通過ajax的形式，來實現數據交互
5. 等等

五    Jquery中的AJax

1. 　　　瀏覽器中提供的XMLHttpRequest用法比較復制，所以Jquery對XMLHttpRequest進行了封裝，提供了一系列Ajax相關的函數，極大減低了Ajax的使用難度。
2.         Jquery中發起Ajax請求常用的三個方法如下：
   • $.get()
   • $.post()
   • $.ajax()

 

六　　Jquery中的Ajax

　　1. Jquery中的$.get()函數的功能單一，專門用來發起get請求，從而將服務器上的資源請求到客服端進行使用

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

　　其中，三個參數的含義如下

　　參數名   參數類型   是否必填  說明

　　url          string        是        要請求的資源地址

　　data       object       否        請求資源期間要攜帶的參數

　　callback    function   否     請求成功時的回調函數

 

　　$.get()函數發起不帶參數的請求，直接提供請求URL地址和請求成功后的回調函數即可，示例

$.get('http://www.liu.com:3006/api/getbooks',function(res){ console.log(res); //這里的res是服務器返回的數據
})    

 

　　$.get()函數發起帶參數的請求，示例

$.get('http://www.liu.com:3006/api/getbooks',{id:1},function(res){ console.log(res); //這里的res是服務器返回的數據,id是1的
})    

 

　　2. Jquery中的$.post()函數的功能單一，專門用來發起post請求，從而向服務器提交數據

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

　　其中，三個參數的含義如下

　　參數名   參數類型   是否必填  說明

　　url          string        是        要提交的資源地址

　　data       object       否        提交的數據

　　callback    function   否     數據提交成功時的回調函數

　　$.post()函數向服務器提交數據示例代碼，示例

$.post('http://www.liu.com:3006/api/getbooks',{bookname:'西游記',author:'***'},function(res){ console.log(res); // })    　　

　　3.Jquery中的$.ajax()函數的語法

$.ajax({
　　type:'',//請求的方式，例如GET或POST
　　url:'',//請求的URL地址
　　data:{},//這次請求要攜帶的數據
　　success:function(res){}//請求成功之后的回調函數
}); 

　4.$.ajax()發起GET請求

$.ajax({
　　type:'GET',//請求的方式，例如GET或POST
　　url:'',//請求的URL地址
　　data:{id:1},//這次請求要攜帶的數據
　　success:function(res){}//請求成功之后的回調函數
}); 

　4.$.ajax()發起POST請求

$.ajax({
　　type:'POST',//請求的方式，例如GET或POST
　　url:'',//請求的URL地址
　　data:{
bookname:"史記",
author:"司馬遷"
},//這次請求要攜帶的數據
　　success:function(res){}//請求成功之后的回調函數
});