jQuery基礎---Ajax基礎

時間 2019-12-20

標籤 jquery 基礎 ajax 欄目 JQuery 简体版

原文原文鏈接

內容提綱：php

1.Ajax 概述html

2.load()方法ajax

3.$.get()和$.post()json

4.$.getScript()和$.getJSON()瀏覽器

5.$.ajax()方法緩存

6.表單序列化安全

發文不易，轉載請註明出處~服務器

一．Ajax 概述異步

Ajax 這個概念是由 Jesse James Garrett 在 2005 年發明的。它自己不是單一技術，是一串技術的集合，主要有：函數

1.JavaScript，經過用戶或其餘與瀏覽器相關事件捕獲交互行爲；

2.XMLHttpRequest 對象，經過這個對象能夠在不中斷其它瀏覽器任務的狀況下向服務器發送請求；

3.服務器上的文件，以 XML、HTML 或 JSON 格式保存文本數據；

4.其它 JavaScript，解釋來自服務器的數據（好比 PHP 從 MySQL 獲取的數據）並將其呈現到頁面上。

因爲 Ajax 包含衆多特性，優點與不足也很是明顯。

Ajax優點主要有如下幾點：

1.不須要插件支持（通常瀏覽器且默認開啓 JavaScript 便可）；

2.用戶體驗極佳（不刷新頁面便可獲取可更新的數據）；

3.提高 Web 程序的性能（在傳遞數據方面作到按需放鬆，沒必要總體提交）；

4.減輕服務器和帶寬的負擔（將服務器的一些操做轉移到客戶端）；

Ajax 的不足有如下幾點：

1.不一樣版本的瀏覽器度 XMLHttpRequest 對象支持度不足(好比 IE5 以前)；

2.前進、後退的功能被破壞（由於 Ajax 永遠在當前頁，不會概率先後頁面）；

3.搜索引擎的支持度不夠（由於搜索引擎爬蟲還不能理解 JS 引發變化數據的內容）；

4.開發調試工具缺少（相對於其餘語言的工具集來講，JS 或 Ajax 調試開發少的可憐）。

使用 Ajax 最關鍵的地方，就是實現異步請求、接受響應及執行回調。那麼異步與同步有什麼區別呢？

咱們普通的 Web 程序開發基本都是同步的，意爲執行一段程序才能執行下一段，相似電話中的通話，一個電話接完才能接聽下個電話；而異步能夠同時執行多條任務，感受有多條線路，相似於短信，不會由於看一條短信而中止接受另外一條短信。Ajax 也可使用同步模式執行，但同步的模式屬於阻塞模式，這樣會致使多條線路執行時又必須一條一條執行，會讓 Web 頁面出現假死狀態，因此，通常 Ajax 大部分採用異步模式。

二．load()方法

jQuery 對 Ajax 作了大量的封裝，咱們使用起來也較爲方便，不須要去考慮瀏覽器兼容性。

對於封裝的方式，jQuery 採用了三層封裝：

最底層的封裝方法爲：$.ajax()；

第二層封裝了三種方法：.load()、$.get()和$.post()；

最高層是$.getScript()和$.getJSON()方法。

.load()方法有三個參數：

url(必須，請求 html 文件的 url 地址，參數類型爲 String)；

data(可選，發送的 key/value 數據，參數類型爲 Object)；

callback(可選，成功或失敗的回調函數，參數類型爲函數 Function)。

若是想讓 Ajax 異步載入一段 HTML 內容，咱們只須要一個 HTML 請求的 url 便可。

//HTML

//jQuery

$('input').click(function () {

　　$('#box').load('test.html');

});

若是想對載入的 HTML 進行篩選，那麼只要在 url 參數後面跟着一個選擇器便可。

//帶選擇器的 url

$('input').click(function () {

　　$('#box').load('test.html .my');

});

若是是服務器文件，好比.php。通常不只須要載入數據，還須要向服務器提交數據，那麼咱們就可使用第二個可選參數 data。

向服務器提交數據有兩種方式：get 和 post。

//不傳遞 data，則默認採用get 方式

$('input').click(function () {

　　$('#box').load('test.php?url=googleXXX');

});

//get 方式接受的PHP代碼

<?php

　　if ($_GET['url'] == 'googleXXX') {

　　　　echo '谷歌';

　　} else {

　　　　echo '其餘網站';

　　}

//傳遞 data，則爲 post 方式

$('input').click(function () {

$('#box').load('test.php', {

url : ‘google’

});

//post 方式接受的 PHP代碼

<?php

　　if ($_POST['url'] == 'google') {

　　　　echo '谷歌';

　　} else {

　　　　echo '其餘網站';

　　}

在 Ajax 數據載入完畢以後，就能執行回調函數 callback，也就是第三個參數。

回調函數也能夠傳遞三個可選參數： responseText （請求返回），textStatus （請求狀態)，XMLHttpRequest（XMLHttpRequest 對象）。

 1 $('input').click(function () {
 2 
 3     $('#box').load('test.php', {
 4 
 5         url : 'google'
 6 
 7     }, function (response, status, xhr) {
 8 
 9     alert('返回的值爲：' + response + '，狀態爲：' + status + '，狀態是：' + xhr.statusText);
10 
11     });
12 
13 });

注意： status 獲得的值，若是成功返回數據則爲：success，不然爲：error。 XMLHttpRequest對象屬於 JavaScript 範疇，能夠調用一些屬性以下：

若是成功返回數據，那麼 xhr 對象的 statusText 屬性則返回'OK'字符串。除了'OK'的狀態字符串，statusText 屬性還提供了一系列其餘的狀態說明的值，以下：

三．$.get()和$.post()

.load()方法是局部方法，由於他須要一個包含元素的 jQuery 對象做爲前綴。而$.get()和$.post()是全局方法，無須指定某個元素。 對於用途而言， .load()適合作靜態文件的異步獲取，而對於須要傳遞參數到服務器頁面的，$.get()和$.post()更加合適。

$.get()方法有四個參數，前面三個參數和.load()同樣，多了一個第四參數 type，即服務器返回的內容格式：包括 xml、html、script、json、jsonp 和 text。第一個參數爲必選參數，後面三個爲可選參數。

//使用$.get()異步返回 html 類型有3種方法：

//1. 經過第二個參數data，字符串鍵值對傳參

1 $('input').click(function () {
2 
3         $.get('test.php', 'url=googleXXX',function (response, status, xhr) {
4 
5               $('#box').html(response);
6 
7      });
8 
9 });

//2. 經過第二個參數data，對象鍵值對傳參，而後自動轉換爲問號緊跟傳參

 1 $('input').click(function () {
 2 
 3        $.get('test.php', {
 4 
 5                 url : 'googleXXX'
 6 
 7         },function (response, status, xhr) {
 8 
 9                 $('#box').html(response);
10 
11      });
12 
13 });

//3. 經過url問號後面緊跟傳參

1 $('input').click(function () {
2 
3         $.post('test.php?url=googleXXX', function (response, status, xhr) {
4 
5                    $('#box').html(response);
6 
7          });
8 
9 });

PS：第四參數 type 是指定異步返回的類型。通常狀況下 type 參數是智能判斷，並不須要咱們主動設置，若是主動設置，則會強行按照指定類型格式返回。

//使用$.get()異步返回 xml

$('input').click(function () {

　　$.get('test.xml', function (response, status, xhr) {

　　　　$('#box').html($(response).find('root').find('url').text());

　　}); //type 自動轉爲 xml

});

PS：若是載入的是 xml 文件，type 會智能判斷。若是強行設置 html 類型返回，則會把 xml 文件當成普通數據所有返回，而不會按照 xml 格式解析數據。

//使用$.get()異步返回 json

$.get('test.json', function (response, status, xhr) {

　　alert(response[0].url);

});

//使用$.post()異步返回 html

//1. post提交不能使用問號傳參，可使用字符串形式的鍵值對傳參

1 $('input').click(function () {
2 
3            $.post('test.php', 'url=googleXXX',function (response, status, xhr) {
4 
5                     $('#box').html(response);
6 
7           });
8 
9  });

//2. post提交可使用對象鍵值對

 1 $('input').click(function () {
 2 
 3          $.post('test.php', {
 4 
 5                    url : 'ycku'
 6 
 7          },function (response, status, xhr) {
 8 
 9                    $('#box').html(response);
10 
11          }, 'html');                    //PHP文件返回的數據是純文本，默認是html或text
12 
13 });

$.post()方法的使用和$.get()基本上一致，他們之間的區別也比較隱晦，基本都是背後的不一樣，在用戶使用上體現不出。具體區別以下：

1.GET 請求是經過 URL 提交的，而 POST 請求則是 HTTP 消息實體提交的；

2.GET 提交有大小限制（2KB），而 POST 方式不受限制；

3.GET 方式會被緩存下來，可能有安全性問題，而 POST 沒有這個問題；

4.GET 方式經過$_GET[]獲取，POST 方式經過$_POST[]獲取。

四．$.getScript()和$.getJSON()

jQuery 提供了一組用於特定異步加載的方法：

$.getScript()，用於加載特定的 JS 文件；

$.getJSON()，用於專門加載 JSON 文件。

PS：這樣，就不須要前面第四個參數type了！

有時咱們但願可以特定的狀況再加載 JS 文件，而不是一開始把全部 JS 文件都加載了，這時可使用$.getScript()方法。

//點擊按鈕後再加載 JS 文件

$('input').click(function () {

　　$.getScript('test.js');

});

$.getJSON()方法是專門用於加載 JSON 文件的，使用方法和以前的相似。

$('input').click(function () {

　　$.getJSON('test.json', function (response, status, xhr) {

　　　　alert(response[0].url);

　　});

五．$.ajax()

$.ajax()是全部 ajax 方法中最底層的方法，全部其餘方法都是基於$.ajax()方法的封裝。這個方法只有一個參數，傳遞一個各個功能鍵值對的對象。

//$.ajax 使用

 1 $('input').click(function () {
 2 
 3     $.ajax({
 4 
 5         type : 'POST', //這裏能夠換成 GET
 6 
 7         url : 'test.php',
 8 
 9         data : {
10 
11             url : 'googleXXX'
12 
13         },
14 
15         success : function (response, stutas, xhr) {
16 
17             $('#box').html(response);
18 
19         }
20 
21     });
22 
23 });

PS：對於 data 屬性，若是是 GET 模式，可使用三種以前說所的三種形式。若是是POST 模式可使用以前的兩種形式。

六．表單序列化

Ajax 用的最多的地方莫過於表單操做，而傳統的表單操做是經過 submit 提交將數據傳輸到服務器端。若是使用 Ajax 異步處理的話，咱們須要將每一個表單元素逐個獲取才方能提交。這樣工做效率就大大下降。

//常規形式的表單提交

 1 $('form input[type=button]').click(function () {
 2 
 3     $.ajax({
 4 
 5     type : 'POST',
 6 
 7     url : 'test.php',
 8 
 9     data : {
10 
11         user : $('form input[name=user]').val(),
12 
13         email : $('form input[name=email]').val()
14 
15     },
16 
17     success : function (response, status, xhr) {
18 
19         alert(response);
20 
21     }
22 
23 });
24 
25 });

PS：表單元素特別多的狀況下，寫起來很是麻煩，容易出錯。複製提交的JS內容時，data屬性須要修改的很是多。

使用表單序列化方法.serialize()，會智能的獲取指定表單內的全部元素。這樣，在面對大量表單元素時，會把表單元素內容序列化爲字符串，而後再使用 Ajax 請求。

//使用.serialize()序列化表單內容

 1 $('form input[type=button]').click(function () {
 2 
 3     $.ajax({
 4 
 5         type : 'POST',
 6 
 7         url : 'test.php',
 8 
 9         data : $('form').serialize(),
10 
11         success : function (response, status, xhr) {
12 
13             alert(response);
14 
15         }
16 
17     });
18 
19 });
20 
21

serialize()方法不但能夠序列化表單內的元素，還能夠直接獲取單選框、複選框和下拉列表框等內容。

//使用序列化獲得選中的元素內容

$(':radio').click(function () {

　　$('#box').html(decodeURIComponent($(this).serialize()));

});

除了.serialize()方法，還有一個能夠用於返回 JSON 數據的方法：.serializeArray()。這個方法能夠直接把數據整合成鍵值對的 JSON 對象。

$(':radio').click(function () {

　　console.log($(this).serializeArray());

　　var json = $(this).serializeArray();

　　$('#box').html(json[0].value);

});

有時，咱們可能會在同一個程序中屢次調用$.ajax()方法。而它們不少參數都相同，這個時候咱們可使用 jQuery 提供的$.ajaxSetup()請求默認值來初始化參數。

 1 $('form input[type=button]').click(function () {
 2 
 3     $.ajaxSetup({
 4 
 5         type : 'POST',
 6 
 7         url : 'test.php',
 8 
 9        data : $('form').serialize()
10 
11     });
12 
13     $.ajax({
14 
15         success : function (response, status, xhr) {
16 
17             alert(response);
18 
19         }
20 
21     });
22 
23 });