203
JavaScript、jQuery與Ajax的關係
簡單總結：
- javascript是一種在客戶端執行的腳本語言。ajax是基於javascript的一種技術，它主要用途是提供異步刷新（隻刷新頁麵的一部分，而不是整個頁麵都刷新）,Ajax是利用了一係列相關的技術其中就包括javascript。一個是語言,一個是技術,兩者有本質區別
2、Ajax是一門技術，它提供了異步更新的機製，使用客戶端與服務器間交換數據而非整個頁麵文檔，實現頁麵的局部更新
3、jQuery是一個框架，它對JS進行了封裝，使其更方便使用。jQuery使得JS與Ajax的使用更方便
JavaScript可以做什麼
用JavaScript可以做很多事情，使網頁更具交互性，給站點的用戶提供更好,更令人興奮的體驗
使用JavaScript來確保用戶以表單形式輸入有效的信息，這可以節省你的業務時間和開支
使用JavaScript，根據用戶的操作可以創建定製的HTML頁麵
JavaScript還可以處理表單，設置cookie，即時構建HTML頁麵以及創建基於Web的應用程序
JavaScript是一種客戶端語言。（實際上，也存有服務器端實現的JavaScript版本）。也就是說，設計它的目的是在用戶的機器上執行任務，而不是在服務器上。因此，JavaScript有一些固有的限製，這些限製主要出於如下安全原因：
1.JavaScript不允許讀寫客戶機器上的文件。這是有好處的，因為你肯定不希望網頁能夠讀取自己硬盤上的文件，或者能夠將病毒寫入硬盤，或者能夠操作你的計算機上的文件。唯一的例外是，JavaScript可以寫到瀏覽器的cookie文件，但是也有一些限製
2.JavaScript不允許寫服務器機器上的文件。盡管寫服務器上的文件在許多方麵是很方便的（比如存儲頁麵點擊數或用戶填寫表單的數據），但是JavaScript不允許這麼做。相反，需要用服務器上的一個程序處理和存儲這些數據。這個程序可以是Perl或者PHP等語言編寫的CGI運行在服務器上的程序或者Java程序
3.JavaScript不能關閉不是它自己打開的窗口。這是為了避免一個站點關閉其他任何站點的窗口，從而獨占瀏覽器
4.JavaScript不能從來自另一個服務器的已經打開的網頁中讀取信息。換句話說，網頁不能讀取已經打開的其它窗口中的信息，因此無法探查訪問這個站點衝浪者還在訪問其它哪些站點
Ajax是什麼
Ajax是一種創建交互式web應用程序的方式。Ajax是ASynchronouS JavaScript and XML(異步JavaScript和xml)的縮寫，這個詞是由web開發人員JeSSe JameS Garrett在2005年年初首創的。嚴格地說，Ajax隻是JavaScript的一小部分（盡管這一部分特別流行）。但是，隨著頻繁的使用，這個詞不再指某種技術本身（比如Java或JavaScript）
在大多數情況下，Ajax一般是指以下這些技術的組合:
XMTML；
CSS（CaScading Style Sheet，層疊樣式表）；
使用JavaScript訪問的DOM（Document Object Model，文檔對象模型）；
XML，這是在服務器和客戶端之間傳輸的數據格式；
XMLHttpRequeSt,用來從服務器獲取數據。
Ajax的好處
應用程序的大多數處理在用戶的瀏覽器中發生，而且對服務器的數據請求往往很短。所以可以使用Ajax建立功能豐富的應用程序，這些應用程序依賴基於web的數據，但是其性能遠遠超過老式的，因為老式方法要求服務器傳回整個HTML頁麵來響應用戶操作。
一些公司已經在Ajax方麵投入大量資金，尤其是Google。Google已經建立了幾個著名的Ajax應用程序，包括Gmail（基於web的電子郵件），Google calendar，Google docS和Google mapS。另外一個大型的Ajax支持者Yahoo！，它使用Ajax增強個性化的MY Yahoo門戶，Yahoo首頁，Yahoo Mail，等等。這兩家公司都向公眾開放了其web應用程序的接口，人們可以使用這些程序會獲得地圖並且在地圖上加上有意思，有用或者好玩的信息。
1、JavaScript
定義：
javaScript的簡寫形式就是JS，是由Netscape公司開發的一種腳本語言，一種廣泛用於客戶端Web開發的腳本語言，常用來給HTML網頁添加動態功能（其編寫的程序可以被嵌入到HTML或XML頁麵中，並直接在瀏覽器中解釋執行）。
組成部分：
核心（ECMAScript）、文檔對象模型（Document Object Model，簡稱DOM）、瀏覽器對象模型（Browser Object Model，簡稱BOM)
描述：
Javascript就是適應動態網頁製作的需要而誕生的一種新的編程語言，如今越來越廣泛地使用於Internet網頁製作上。
Javascript是由 Netscape公司開發的一種腳本語言（scripting language），或者稱為描述語言。在HTML基礎上，使用Javascript可以開發交互式Web網頁。
Javascript的出現使得網頁和用戶之間實現了一種實時性的、動態的、交互性的關係，使網頁包含更多活躍的元素和更加精彩的內容。
Javascript短小精悍，又是在客戶機上執行的，大大提高了網頁的瀏覽速度和交互能力。同時它又是專門為製作Web網頁而量身定做的一種簡單的編程語言。
主流的javaScript框架有：YUI ,Dojo，Prototype，jQuery...
2、Ajax
定義：
AJAX即“Asynchronous JavaScript and XML”（異步JavaScript和XML)，AJAX並非縮寫詞，而是由Jesse James Gaiiett創造的名詞，是指一種創建交互式網頁應用的網頁開發技術。
AJAX不是一個技術，它實際上是幾種技術，每種技術都有其獨特之處，合在一起就成了一個功能強大的新技術。
組成：
基於XHTML和CSS標準的表示；
使用Document Object Model進行動態顯示和交互；
使用XML和XSLT做數據交互和操作；
使用XML HttpRequest與服務器進行異步通信；
使用JavaScript綁定一切。
描述：
Ajax是結合了Java技術、XML以及JavaScript等編程技術，可以讓開發人員構建基於Java技術的Web應用，並打破了使用頁麵重載的管理。
Ajax技術使用非同步的HTTP請求，在Browser和Web Server之間傳遞數據，使Browser隻更新部分網頁內容而不重新載入整個網頁.
Ajax是使用客戶端腳本與Web服務器交換數據的Web應用開發方法。這樣，Web頁麵不用打斷交互流程進行重新加裁，就可以動態地更新。使用Ajax，用戶可以創建接近本地桌麵應用的直接、高可用、更豐富、更動態的Web用戶界麵。
3、jQuery
定義：
jQuery是一個快速的，簡潔的javaScript庫，使用戶能更方便地處理HTML documents、events、實現動畫效果，並且方便地為網站提供AJAX交互。
特點：
輕量級、鏈式語法、CSS1-3選擇器、跨瀏覽器、簡單、易擴展；
jQuery是一種獨立於服務器端代碼的框架，獨立於ASP.NET或者JAVA；
jQuery是當前很流行的一個JavaScript框架，使用類似於CSS的選擇器，可以方便的操作HTML元素，擁有很好的可擴展性，擁有不少插件。
描述：
對於程序員來說，簡化javascript和ajax編程，能夠使程序員從設計和書寫繁雜的JS應用中解脫出來，將關注點轉向功能需求而非實現細節上，從而提高項目的開發速度。
對於用戶來說，改善了頁麵的視覺效果，增強了與頁麵的交互性，體驗更絢麗的網頁物資。
javaScript框架實際上是一係列工具和函數
對於鍵名為數字或者非正常變量字符時（如有空格），必須使用obj[xx]方式獲取值不能用.的格式
jquery中ajax調用json數據的使用說明
$.get()和$.post()這兩個方法基本都一樣使用，所以隻說$.post()
情形1： $.post("url",function);此時返回的數據沒有處理，所以不是json格式
情形2：$.post("url",function, "json");此時雖然指定了返回的數據為json格式，但實際上卻不是！
情形3：$.post("url",{},function);此時傳入的參數為空，沒有指定返回的數據格式，所以也不是json格式
情形4：$.post("url",{},function, "json");正確的返回了json格式的數據
要點：當要把返回的數據當做json格式來處理，必須傳入參數（參數為空就寫成{}），並且還得指定返回類型為"json"
$.ajax({
url:"url",
dataType:"json",
type:"get"
success:function
})
要點：要指定dataType為"json"，此時無論是get還是post方式都會得到json格式數據，但我建議為了和上麵的兩個方法保持一致，最好加上data:{}這個條件
$.getJSON("url",function)
要點：以get的方式得到json格式數據，是$.get()的方便寫法
jQuery Ajax用法詳解
jQuery Ajax在web應用開發中很常用，它主要包括有ajax,get,post,load,getscript等這幾種常用無刷新操作方法，處理複雜的ajax請求時，jQuery使用jQuery.ajax()方法進行處理
在jQuery中有一些簡單的方法，它對jQuery.ajax()方法進行了封裝，使得我們在處理一些簡單的Ajax事件時，不需要使用jQuery.ajax()方法
以下5個方法執行一般Ajax請求的簡短形式，在處理複雜的Ajax請求時應該使用jQuery.ajax().
1.load(url,[data],[callback]):載入遠程HTML文件代碼並插入至DOM中，默認使用GET方式，傳遞參數時自動轉換為POST方式
url:要載入的遠程url地址
data:發送至服務器的key/value 數據
callback:載入成功時的回調函數
//無參數、無回調函數
$("#showload").load("load.htm");
//無回調函數
$("#showload").load("load.htm", { "para": "para-value" });
$("#showload").load("load.htm", { "para": "para-value" },
function() {
//處理
}
)
這裏將顯示加載的文件的內容Load
2.jQuery.get(url, [data], [callback]):使用get方式從服務器端獲取數據
url:發送請求的URL地址
data:要發送給服務器的數據
callback:載入成功時回調函數
$.get("jqueryget.htm", { "id": this.id },
function(req) {
$("#showget").html(req);//成功時的回調方法
});
})
使用$.get()方法，通過傳遞id來獲取不同的logo。值得一提的是，此時是通過get方法獲得請求，所以在獲取參數值時要使用Request.QueryString
3.百度logo穀歌logo:這裏將顯示logo3.jQuery.post(url, [data], [callback])
使用POST方式來進行異步請求，同jQuery.get()相比，差別在於請求的方式，所以這裏不做特別的說明，使用方法同jQuery.get()相似
4.jQuery.getScript(url,[callback])：通過 GET 方式請求載入並執行一個JavaScript文件。這個技術在前邊文章中已經提到過，也是jQuery.ajax的一種簡單的使用方法
5.jQuery.getJSON(url,[data],[callback])：通過get方式獲取json格式的數據
$.getJSON("https://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(req) {
$.each(req.items, function(i, item) {
if (i == vnum) {
$("<img src="" + item.media.m + "" title="" + item.title + "" />").appendTo("#showjson");
}
});
});
同樣的，這也是jQuery.ajax()方法的一種簡寫方法，代碼如下：
$.ajax({
url: url,
dataType: 'json',
data: data,
success: callback
});
6.jQuery.ajax():使用jQuery.ajax()方法獲取數據
下邊給個常用寫法，並做了相應的注釋:
$.ajax({
url: "https://www.aaa.com", //請求的url地址,也可以拚接。例如：https://www.aaa.com?password2='+password2,
dataType: "json", //返回格式為json
async: true, //請求是否異步，默認為異步，這也是ajax重要特性
data: { "id": "value" }, //參數值
type: "GET", //請求方式
cache:false, //是否從緩存中獲取數據
beforeSend: function() {
//請求前的處理
},
success: function(data) {//請求成功時處理
if(data.msg =="true" ){
// view("修改成功！");
alert("修改成功！");
window.location.reload();
}else{
view(data.msg);
}
},
complete: function() {
//請求完成的處理
},
error: function() {//請求出錯處理
alert("異常！");
}
});
自定義函數名
可以在傳遞過程中自定義函數名，隻要使用jsonpCallback參數就可以了
jsonp:表示傳遞的參數，默認為callback，我們也可以自定義，服務器端通過此參數，獲取自定義的函數名稱，服務器這樣獲取 Request.QueryString["callback"]
jsonpCallback表示傳遞的參數值，也就是回調的函數名稱，這是自定義的名稱
無參數的方法調用
$(function() {
$("#btnOK").click(function() {
$.ajax({
type: "Post", //要用post方式
url: "Demo.aspx/SayHello", //方法所在頁麵和方法名
data: "{}", //沒有參數也一定要傳一個空參數
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
alert(data.d); //返回的數據用data.d獲取內容
},
error: function(err) {
alert(err);
}
});
return false; //禁用按鈕的提交
});
});
有參數的方法調用
$(function() {
$("#btnOK").click(function() {
$.ajax({
type: "Post",
url: "demo.aspx/GetStr",
data: "{'str':'我是','str2':'XXX'}", //方法傳參的寫法一定要對
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
alert(data.d); //返回的數據用data.d獲取內容
},
error: function(err) {
alert(err);
}
});
return false; //禁用按鈕的提交
});
});
返回數組方法
$(function() {
$("#btnOK").click(function() {
$.ajax({
type: "Post",
url: "demo.aspx/GetArray",
contentType: "application/json; charset=utf-8", //在Http協議消息頭中，使用Content-Type來表示具體請求中的媒體類型信息
dataType: "json",
success: function(data) {
$("#list").html(""); //插入前先清空ul
$(data.d).each(function() { //遞歸獲取數據
$("#list").append("<li>" + this + "</li>"); //插入結果到li裏麵
});
alert(data.d);
},
error: function(err) {
alert(err);
}
});
return false; //禁用按鈕的提交
});
});
最後更新：2017-05-22 15:03:15