輕鬆掌握AJAX(Jquery)非同步通訊
上篇部落格談了AJAX,下面再說說它的優缺點,我們知道不管是什麼技術一般都是因為有它的利用價值才出現的,也就是它們都是有優點的,而有老句話說的是“是藥三分毒”,技術也一樣,什麼樣的技術一般也都會有它的缺陷的。專案中只要是它的優點大於它的缺點我們就會去使用它。AJAX的缺點相對於它的優點來說基本上可以忽略,因為它的優點真的是很優秀。
AJAX優點:
1、 使用非同步方式與伺服器通訊,不需要打斷使用者正在進行的操作,具有更加迅速的響應能力。
2、 可以在不更新整個頁面的前提下維護資料(不重新整理頁面),給使用者的體驗非常棒。這也是它最大的優點。
3、 AJAX的原則是“按需取資料”,可以最大程度的減少冗餘請求,充分利用了客戶端閒置的處理能力,降低伺服器的負荷。
AJAX缺點:
1、破壞瀏覽器後退按鈕的正常行為。在動態更新頁面後,使用者無法回到前一個頁面的狀態,這是因為瀏覽器只能記下歷史記錄中的靜態頁面。
2、使用JavaScript作Ajax的引擎,JavaScript的相容性和Debug需要特別注意。
AJAX讓使用者頁面豐富起來,增強使用者體驗.AJAX也是所有Web開發的必修課.雖然說AJAX技術並不複雜,但是實現方式還是會因為每個開發人員而有所差異。看著它如此之好,是不是感覺使用起來還是不太方便,不太好控制而煩惱呢?不要著急,下面就再介紹一種技術,讓AJAX的非同步通訊技術更加方便的應用到我們的程式中,那就是
jQuery提供一系列AJAX函式來幫助我們統一這種差異, 並且讓呼叫AJAX更加簡單.jQuery提供了幾個用於傳送AJAX請求的函式. 其中最核心的也是最複雜的是jQuery.ajax(),所有的其他AJAX函式都是它的一個簡化呼叫.當我們想要完全控制AJAX時可以使用此方法, 否則還是使用簡化方法如get, post, load等更加方便。下面我們就來逐一認識這些個方法:
1. load(url, [data], [callback] )
載入遠端 HTML 檔案程式碼並插入至 DOM 中,預設使用 GET 方式傳遞,附加引數時自動轉換為 POST 方式。jQuery 1.2 中,可以指定選擇符,來篩選載入的 HTML 文件,DOM 中將僅插入篩選出的 HTML 程式碼。語法形如 "url #some > selector"。
引數:
url |
待裝入 HTML 網頁網址 |
data(可選)Map,String |
傳送至伺服器的 key/value 資料。在jQuery 1.3中也可以接受一個字串了。 |
callback(可選)Callback |
載入成功時回撥函式。 |
示例:
描述: 載入 feeds.html 檔案內容。
jQuery 程式碼:
$("#feeds").load("feeds.html");
2. jQuery.get(url, [data], [callback], [type] )
通過遠端 HTTP GET 請求載入資訊,這是一個簡單的 GET 請求功能以取代複雜 $.ajax 。請求成功時可呼叫回撥函式。如果需要在出錯時執行函式,請使用 $.ajax。
引數:前面的解釋參見1
type (可選)String
返回內容格式,xml,html, script, json, text, _default。
示例:
描述: 顯示 test.php 返回值(HTML 或 XML,取決於返回值)。
jQuery 程式碼:
$.get("test.php",function(data){
alert("Data Loaded: " + data);
});
描述: 顯示 test.cgi 返回值(HTML 或 XML,取決於返回值),新增一組請求引數。
jQuery 程式碼:
$.get("test.cgi",{ name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
3. jQuery.getJSON(url, [data], [callback] )
通過 HTTP GET 請求載入 JSON 資料,在 jQuery 1.2 中,您可以通過使用JSONP 形式的回撥函式來載入其他網域的JSON資料,如 "myurl?callback=?"。jQuery 將自動替換 ? 為正確的函式名,以執行回撥函式。 注意:此行以後的程式碼將在這個回撥函式執行前執行。
引數:解釋參見1
示例:
描述: 從 test.js 載入 JSON 資料,附加引數,顯示 JSON 資料中一個 name 欄位資料。
jQuery 程式碼:
$.getJSON("test.js",{ name: "John", time: "2pm" }, function(json){
alert("JSON Data: " +json.users[3].name);
});
4. jQuery.getScript(url, [callback] )
通過 HTTP GET 請求載入並執行一個 JavaScript 檔案,jQuery 1.2 版本之前,getScript 只能呼叫同域 JS 檔案。 1.2中,您可以跨域呼叫 JavaScript 檔案。注意:Safari 2 或更早的版本不能在全域性作用域中同步執行指令碼。如果通過 getScript 加入指令碼,請加入延時函式。
引數:參見1
示例:
描述:載入並執行 test.js ,成功後顯示資訊。
jQuery 程式碼:
$.getScript("test.js",function(){
alert("Script loaded andexecuted.");
});
5. jQuery.post(url, [data], [callback], [type] )
通過遠端 HTTP POST 請求載入資訊,這是一個簡單的 POST 請求功能以取代複雜 $.ajax 。請求成功時可呼叫回撥函式。如果需要在出錯時執行函式,請使用 $.ajax。
引數:參見2
示例:
描述1:請求 test.php 網頁,忽略返回值
jQuery 程式碼:
$.post("test.php");
描述2:請求 test.php 頁面,並一起傳送一些額外的資料(同時仍然忽略返回值)
jQuery 程式碼:
$.post("test.php",{ name: "John", time: "2pm" } );
描述3:輸出來自請求頁面 test.php 的結果(HTML 或 XML,取決於所返回的內容)
jQuery 程式碼:
$.post("test.php",function(data){
alert("Data Loaded: " + data);
});
6. jQuery.ajax(options )
通過 HTTP 請求載入遠端資料。jQuery 底層 AJAX 實現。簡單易用的高層實現見 $.get, $.post 等。$.ajax() 返回其建立的 XMLHttpRequest 物件。大多數情況下你無需直接操作該函式,除非你需要操作不常用的選項,以獲得更多的靈活性。
最簡單的情況下,$.ajax()可以不帶任何引數直接使用。
注意:所有的選項都可以通過 $.ajaxSetup()函式來全域性設定。
一些引數介紹請參見:
關於jQuery.ajax百度文庫裡介紹的非常全面(還有示例):
總結:
各種功能的實現隨著技術的不斷革新將會變得越來越簡單,我們只需要掌握某些主流技術的基本原理和學習的方法即可,有了一套完整的思想,學習什麼技術基本上都一樣,有時候遇到一門新技術我們可能用兩三天的時間就能明白其大概的框架,參考說明就能將其應用到我們的專案中來。
相關推薦
輕鬆掌握AJAX(Jquery)非同步通訊
上篇部落格談了AJAX,下面再說說它的優缺點,我們知道不管是什麼技術一般都是因為有它的利用價值才出現的,也就是它們都是有優點的,而有老句話說的是“是藥三分毒”,技術也一樣,什麼樣的技術一
嵌入式核心及驅動開發之學習筆記(十) 非同步通訊+中斷實現讀取資料
對於linux一切都是檔案,驅動裝置在應用層也是以檔案的形式進行讀寫。之前學了阻塞、非阻塞、多路複用的方式讀裝置,它們都需要應用主動讀取。那麼應用層有沒有一種方式,當底層將資料準備好了,應用程式自動處理這些資料?通過非同步通訊可以實現,這有寫類似硬體層的中斷概念 驅動層(準備好了資料) --&g
Ajax(jquery)入門程式--------仿百度提示
前端介面實現: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C/
ajax(jquery)前後臺傳陣列(Springmvc後臺)
前端程式碼: <script> $(function () { var list=new Array(); list.push(6);
Apache Mina 入門 (二)—— 非同步通訊機制
通過前面的Apache mina 入門(一)— 基礎知識 我們可以瞭解到 mina是個非同步通訊框架,一般使用場景是服務端開發,長連線、非同步通訊使用mina是及其方便的。不多說,看例子。 本次mina 使用的例子是使用maven構建的,過程中需要用到的ja
HTML&javaSkcript&CSS&jQuery&ajax(二)
log height query 使用 get 元素 .com row center 一、HTML 1、標簽<a href="http:www.baidu.com">This is a link </a> <img s
HTML&javaSkcript&CSS&jQuery&ajax(四)
gpo world sch bit pos ant w3cschool doctype with 一、HTML創建響應設計 Responsive Web Design 可以改變尺寸傳遞網頁,對於平板和移動設備是必須的 1、<!DOCTYPE html>
HTML&javaSkcript&CSS&jQuery&ajax(九)
path onclick have mage lin www 列表 繪圖 canvas 一、HTML 1、單選按鈕 <form action="><inpput type="radio" name="sex" value="male" >Ma
HTML&javaSkcript&CSS&jQuery&ajax(十)
htm firefox min drag xpl jquer fire anti end HTML 1、SVG直接嵌入HTML網頁 ,SVG 是使用XML描述2D圖像的語言,Canvas通過JavaScript來繪制2D <svg xmlns="http:
HTML&javaSkcript&CSS&jQuery&ajax(11)
ppc 圖片 meta 一次 版本 bst height api demo 1、localStorage 沒有 時間的限制數據存儲, sessionStorage 針對一個session的存儲,首先檢查瀏覽器是否支持對這兩個的存儲, ifI(type(Storag
從零開始學 Web 之 Ajax(六)jQuery中的Ajax
var 技術分享 else parse cnblogs 我會 clas alt jquer 大家好,這裏是「 從零開始學 Web 系列教程 」,並在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公眾號:Web
ajax error 函式詳解(jquery)
文章來自:原始碼線上https://www.shengli.me/jquery/186.html error函式 返回的引數有三個: 1.5版本以後返回的是jqXHR物件,該物件不僅包括XMLHttpRequest物件,還包含其他更多詳細屬性和資訊: 這裡主
TCP通訊(二)——非同步連線
本篇部落格主要講述的非同步的問題。首先明確非同步到底是什麼東東,非同步就是發起一個指令,並不需要一直等待指令的執行結果,而是可以繼續忙其他的事情。 一、非同步連線 服務端程式碼: using
通過Ajax請求後臺資料,返回JSONArray(JsonObject),頁面(Jquery)以table的形式展示
點選“會商人員情況表”,彈出層,顯示一個表格,如下圖: 利用Ajax和Jquery和JSONArray和JsonObject來實現: 程式碼如下: 在hspersons.html中: <!DOCTYPE html> <html> <head&g
從零開始學 Web 之 Ajax(五)同步非同步請求,資料格式
一、同步請求與非同步請求 同步請求:在使用者進行請求傳送之後,瀏覽器會一直等待伺服器的資料返回,如果網路延遲比較高,瀏覽器就一直卡在當前介面,直到伺服器返回資料才可進行其他操作。 非同步請求:在使用者進行請求傳送之後,瀏覽器可以自由操作頁面中其他的元素,當伺服器放回資料的時候,才觸發相應事件,對返回的資料
原生JavaScript實現Ajax(二):同步,非同步,GET,POST
上文使用同步方式實現了ajax,本文使用非同步的方式,因為非同步才是我們的目的,也是真正常用的手段,使用非同步需要觸發readystatechange事件,然後檢測readyState這個屬性就行。不同的瀏覽器,這裡略有不同,但大致分為下面5種狀態值:
Go Ticker實現原理剖析(輕鬆掌握Ticker實現原理)
前言 本節我們從Ticker資料結構入手,結合原始碼分析Ticker的實現原理。 實際上,Ticker與之前講的Timer幾乎完全
Struts2處理(jQuery)Ajax請求
1. Ajax Ajax(Asynchronous JavaScript and XML,非同步JavaScript和XML)時一種建立互動式網頁應用的網頁開發技術,它並不是一項新的技術,其產生的目的是用於實現頁面的區域性重新整理。通過Ajax技術可以使之前的應用程式在
Sping MVC不使用任何註解處理(jQuery)Ajax請求(基於XML配置)
1. Spring Spring框架是一個輕量級的解決方案,是一個潛在的一站式商店,用於構建企業就緒的應用程式。Spring框架是一個Java平臺,為開發Java應用程式提供全面的基礎架構支援。Spring處理基礎結構,因此您可以專注於應用程式。Spring使您能夠從&ldquo
ajax(post)
url pos function con before end name let html $.ajax({ url:‘/comm/test1.php‘, type:‘POST‘, //GET async:true,