jQuery插件jQuery-JSONP開發(fā)ajax調用使用注意事項

jQuery-JSONP是一個支持 JSONP 調用的 jQuery 插件，使用它是因為它支持出錯時的 AJAX 回調，而 jQuery 的 $.ajax 不支持。

JSONP 調用示例代碼：

var originImgSrc = 'cnbogs-logo.gif';
$.jsonp({
    url: '',
    data: { imgSrc: originImgSrc },
    callbackParameter: "callback",
    success: function (newImgSrc, textStatus, xOptions) {
        console.log(xOptions.data.imgSrc);
    },
    error: function (xOptions, textStatus) {
    }
});

第1個需要注意的地方是 callbackParameter，如果沒有專門的 callback 函數(shù)，一定要寫上 "callback"；
第2個需要注意的地方是在 success 回調函數(shù)中，直接通過變量名 originImgSrc 得到的是 undefined，需要通過 xOptions.data.imgSrc 獲取。

JavaScript、jQuery與Ajax的關系

簡單總結：

1、JS是一門前端語言。

2、Ajax是一門技術，它提供了異步更新的機制，使用客戶端與服務器間交換數(shù)據(jù)而非整個頁面文檔，實現(xiàn)頁面的局部更新。

3、jQuery是一個框架，它對JS進行了封裝，使其更方便使用。jQuery使得JS與Ajax的使用更方便

詳細情況：

實際上, 其中只有一種是編程語言。

javascript 是一種編程語言，主要用于網(wǎng)頁中，使網(wǎng)站具有交互性。當瀏覽器分析網(wǎng)頁時，它將創(chuàng)建該網(wǎng)頁的內存中表示形式。它是一個樹結構，包含頁面上的所有元素。因此，有一個根元素，其中包含頭部和正文元素，其中包含其他元素，其中包含其他元素。所以它看起來基本上像一棵樹?，F(xiàn)在，使用 javascript，您可以使用此樹操作頁面中的元素。您可以通過元素的 id (getElementsById) 或它們的標記名稱 (getElementsByTagName) 或簡單地遍歷樹 (parentNode、firstChild、lastChild、nextSibling、previousSibling等) 來選取元素。一旦您有元素可以使用，您就可以通過更改它們在頁面上的外觀、內容或位置來修改它們。此接口也稱為 DOM (文檔對象模型)。因此，您可以使用 javascript 執(zhí)行其他編程語言可以執(zhí)行的所有操作，通過將其嵌入到 wepages 中，您還可以獲得當前網(wǎng)頁的內存對象，您可以通過該對象以交互方式對頁面進行更改。

AJAX 是一種在頁面內的瀏覽器和服務器之間進行通信的技術。聊天就是一個很好的例子。您寫一條消息, 發(fā)送一條消息, 并強制其他消息, 而無需離開頁面。您可以使用瀏覽器提供的 xmlhttp 對象在客戶端管理與 javascript 的這種交互。

jquery 是一個庫, 旨在簡化客戶端 web 開發(fā)的一般 (上面的另外兩個)。它創(chuàng)建了一個抽象層, 以便您可以在 javascript 中重用諸如 css 和 html 之類的公共語言。它還包括可用于與服務器進行通信的功能 (AJAX)。它是用 Javascript 編寫的，不會為你做所有的事情，只會讓常見的任務變得更容易。它還隱藏了瀏覽器的一些誤解和錯誤。

總結一下:

Javascript 是一種編程語言 (對象、數(shù)組、數(shù)字、字符串、計算)

AJAX 和 jQuery 使用 Javascript

jQuery 用于使用 AJAX 和頁面操作 (樣式、動畫等) 簡化常見任務

最后， 舉個例子看看語法：

// javascript 中的頁面操作
var el = document.getElementById("box");
el.style.backgroundColor = "#000";
var new_el = document.createElement("div");
el.innerHTML = "<p>some content</p>";
el.appendChild(new_el);
// 以及如何在 jQuery 中執(zhí)行此操作
$("#box")
.css({ "background-color": "#000" })
.append("<div><p>some content</p></div>");

1. javascript是一種在客戶端執(zhí)行的腳本語言。ajax是基于javascript的一種技術，它主要用途是提供異步刷新（只刷新頁面的一部分，而不是整個頁面都刷新）。一個是語言，一個是技術,兩者有本質區(qū)別.

2. javascript是一種在瀏覽器端執(zhí)行的腳本語言，Ajax是一種創(chuàng)建交互式網(wǎng)頁應用的開發(fā)技術 ，它是利用了一系列相關的技術其中就包括javascript。

3. JavaScript可以做什么？

用JavaScript可以做很多事情，使網(wǎng)頁更具交互性，給站點的用戶提供更好,更令人興奮的體驗。JavaScript使你可以創(chuàng)建活躍的用戶界面，當用戶在頁面間導航時向他們反饋。

使用JavaScript來確保用戶以表單形式輸入有效的信息，這可以節(jié)省你的業(yè)務時間和開支。

使用JavaScript，根據(jù)用戶的操作可以創(chuàng)建定制的HTML頁面。

JavaScript還可以處理表單，設置cookie，即時構建HTML頁面以及創(chuàng)建基于Web的應用程序。

JavaScript不能做什么？

JavaScript是一種客戶端語言。（實際上，也存有服務器端實現(xiàn)的JavaScript版本）。也就是說，設計它的目的是在用戶的機器上執(zhí)行任務，而不是在服務器上。因此，JavaScript有一些固有的限制，這些限制主要出于如下安全原因：

1.JavaScript不允許讀寫客戶機器上的文件。這是有好處的，因為你肯定不希望網(wǎng)頁能夠讀取自己硬盤上的文件，或者能夠將病毒寫入硬盤，或者能夠操作你的計算機上的文件。唯一例外是，JavaScript可以寫到瀏覽器的cookie文件，但是也有一些限制。

2.JavaScript不允許寫服務器機器上的文件。盡管寫服務器上的文件在許多方面是很方便的（比如存儲頁面點擊數(shù)或用戶填寫表單的數(shù)據(jù)），但是JavaScript不允許這么做。相反，需要用服務器上的一個程序處理和存儲這些數(shù)據(jù)。這個程序可以是Perl或者PHP等語言編寫的CGI運行在服務器上的程序或者Java程序

3.JavaScript不能關閉不是它自己打開的窗口。這是為了避免一個站點關閉其他任何站點的窗口，從而獨占瀏覽器。

4.JavaScript不能從來自另一個服務器的已經打開的網(wǎng)頁中讀取信息。換句話說，網(wǎng)頁不能讀取已經打開的其它窗口中的信息，因此無法探查訪問這個站點沖浪者還在訪問其它哪些站點。

Ajax是什么？

Ajax是一種創(chuàng)建交互式web應用程序的方式。Ajax是ASynchronouS JavaScript and XML(異步JavaScript和xml)的縮寫，這個詞是由web開發(fā)人員JeSSe JameS Garrett在2005年年初首創(chuàng)的。嚴格地說，Ajax只是JavaScript的一小部分（盡管這一部分特別流行）。但是，隨著頻繁的使用，這個詞不再指某種技術本身（比如Java或JavaScript）。

在大多數(shù)情況下，Ajax一般是指以下這些技術的組合:

• XMTML；
  
• CSS（CaScading Style Sheet，層疊樣式表）；
  
• 使用JavaScript訪問的DOM（Document Object Model，文檔對象模型）；
  
• XML，這是在服務器和客戶端之間傳輸?shù)臄?shù)據(jù)格式；
  
• XMLHttpRequeSt,用來從服務器獲取數(shù)據(jù)。

Ajax的好處是:

應用程序的大多數(shù)處理在用戶的瀏覽器中發(fā)生，而且對服務器的數(shù)據(jù)請求往往很短。所以可以使用Ajax建立功能豐富的應用程序，這些應用程序依賴基于web的數(shù)據(jù)，但是其性能遠遠超過老式的，因為老式方法要求服務器傳回整個HTML頁面來響應用戶操作。

一些公司已經在Ajax方面投入大量資金，尤其是Google。Google已經建立了幾個著名的Ajax應用程序，包括Gmail（基于web的電子郵件），Google calendar，Google docS和Google mapS。另外一個大型的Ajax支持者Yahoo！，它使用Ajax增強個性化的MY Yahoo門戶，Yahoo首頁，Yahoo Mail，等等。這兩家公司都向公眾開放了其web應用程序的接口，人們可以使用這些程序會獲得地圖并且在地圖上加上有意思，有用或者好玩的信息，比如洛杉磯地區(qū)所有日本餐館的位置或者電影射鵬的位置。

1、JavaScript

定義：

javaScript的簡寫形式就是JS，是由Netscape公司開發(fā)的一種腳本語言，一種廣泛用于客戶端Web開發(fā)的腳本語言，常用來給HTML網(wǎng)頁添加動態(tài)功能（其編寫的程序可以被嵌入到HTML或XML頁面中，并直接在瀏覽器中解釋執(zhí)行）。

組成部分：

核心（ECMAScript）、文檔對象模型（Document Object Model，簡稱DOM）、瀏覽器對象模型（Browser Object Model，簡稱BOM)

描述：

Javascript就是適應動態(tài)網(wǎng)頁制作的需要而誕生的一種新的編程語言，如今越來越廣泛地使用于Internet網(wǎng)頁制作上。

Javascript是由 Netscape公司開發(fā)的一種腳本語言（scripting language），或者稱為描述語言。在HTML基礎上，使用Javascript可以開發(fā)交互式Web網(wǎng)頁。

Javascript的出現(xiàn)使得網(wǎng)頁和用戶之間實現(xiàn)了一種實時性的、動態(tài)的、交互性的關系，使網(wǎng)頁包含更多活躍的元素和更加精彩的內容。

Javascript短小精悍，又是在客戶機上執(zhí)行的，大大提高了網(wǎng)頁的瀏覽速度和交互能力。同時它又是專門為制作Web網(wǎng)頁而量身定做的一種簡單的編程語言。

主流的javaScript框架有：YUI ,Dojo，Prototype，jQuery...

2、Ajax

定義：

AJAX即“Asynchronous JavaScript and XML”（異步JavaScript和XML)，AJAX并非縮寫詞，而是由Jesse James Gaiiett創(chuàng)造的名詞，是指一種創(chuàng)建交互式網(wǎng)頁應用的網(wǎng)頁開發(fā)技術。

AJAX不是一個技術，它實際上是幾種技術，每種技術都有其獨特之處，合在一起就成了一個功能強大的新技術。

組成：

基于XHTML和CSS標準的表示；

使用Document Object Model進行動態(tài)顯示和交互；

使用XML和XSLT做數(shù)據(jù)交互和操作；

使用XML HttpRequest與服務器進行異步通信；

使用JavaScript綁定一切。

描述：

Ajax是結合了Java技術、XML以及JavaScript等編程技術，可以讓開發(fā)人員構建基于Java技術的Web應用，并打破了使用頁面重載的管理。

Ajax技術使用非同步的HTTP請求，在Browser和Web Server之間傳遞數(shù)據(jù)，使Browser只更新部分網(wǎng)頁內容而不重新載入整個網(wǎng)頁.

Ajax是使用客戶端腳本與Web服務器交換數(shù)據(jù)的Web應用開發(fā)方法。這樣，Web頁面不用打斷交互流程進行重新加裁，就可以動態(tài)地更新。使用Ajax，用戶可以創(chuàng)建接近本地桌面應用的直接、高可用、更豐富、更動態(tài)的Web用戶界面。

3、jQuery

定義：

jQuery是一個快速的，簡潔的javaScript庫，使用戶能更方便地處理HTML documents、events、實現(xiàn)動畫效果，并且方便地為網(wǎng)站提供AJAX交互。

特點：

輕量級、鏈式語法、CSS1-3選擇器、跨瀏覽器、簡單、易擴展；

jQuery是一種獨立于服務器端代碼的框架，獨立于ASP.NET或者JAVA；

jQuery是當前很流行的一個JavaScript框架，使用類似于CSS的選擇器，可以方便的操作HTML元素，擁有很好的可擴展性，擁有不少插件。

描述：

對于程序員來說，簡化javascript和ajax編程，能夠使程序員從設計和書寫繁雜的JS應用中解脫出來，將關注點轉向功能需求而非實現(xiàn)細節(jié)上，從而提高項目的開發(fā)速度。

對于用戶來說，改善了頁面的視覺效果，增強了與頁面的交互性，體驗更絢麗的網(wǎng)頁物資。

javaScript框架實際上是一系列工具和函數(shù)。