jQuery插件jQuery-JSONP開(kāi)發(fā)ajax調(diào)用使用注意事項(xiàng)

jQuery-JSONP是一個(gè)支持 JSONP 調(diào)用的 jQuery 插件，使用它是因?yàn)樗С殖鲥e(cuò)時(shí)的 AJAX 回調(diào)，而 jQuery 的 $.ajax 不支持。

JSONP 調(diào)用示例代碼：

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個(gè)需要注意的地方是 callbackParameter，如果沒(méi)有專(zhuān)門(mén)的 callback 函數(shù)，一定要寫(xiě)上 "callback"；
第2個(gè)需要注意的地方是在 success 回調(diào)函數(shù)中，直接通過(guò)變量名 originImgSrc 得到的是 undefined，需要通過(guò) xOptions.data.imgSrc 獲取。

JavaScript、jQuery與Ajax的關(guān)系

簡(jiǎn)單總結(jié)：

1、JS是一門(mén)前端語(yǔ)言。

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

3、jQuery是一個(gè)框架，它對(duì)JS進(jìn)行了封裝，使其更方便使用。jQuery使得JS與Ajax的使用更方便

詳細(xì)情況：

實(shí)際上, 其中只有一種是編程語(yǔ)言。

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

AJAX 是一種在頁(yè)面內(nèi)的瀏覽器和服務(wù)器之間進(jìn)行通信的技術(shù)。聊天就是一個(gè)很好的例子。您寫(xiě)一條消息, 發(fā)送一條消息, 并強(qiáng)制其他消息, 而無(wú)需離開(kāi)頁(yè)面。您可以使用瀏覽器提供的 xmlhttp 對(duì)象在客戶(hù)端管理與 javascript 的這種交互。

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

總結(jié)一下:

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

AJAX 和 jQuery 使用 Javascript

jQuery 用于使用 AJAX 和頁(yè)面操作 (樣式、動(dòng)畫(huà)等) 簡(jiǎn)化常見(jiàn)任務(wù)

最后， 舉個(gè)例子看看語(yǔ)法：

// javascript 中的頁(yè)面操作
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是一種在客戶(hù)端執(zhí)行的腳本語(yǔ)言。ajax是基于javascript的一種技術(shù)，它主要用途是提供異步刷新（只刷新頁(yè)面的一部分，而不是整個(gè)頁(yè)面都刷新）。一個(gè)是語(yǔ)言，一個(gè)是技術(shù),兩者有本質(zhì)區(qū)別.

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

3. JavaScript可以做什么？

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

使用JavaScript來(lái)確保用戶(hù)以表單形式輸入有效的信息，這可以節(jié)省你的業(yè)務(wù)時(shí)間和開(kāi)支。

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

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

JavaScript不能做什么？

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

1.JavaScript不允許讀寫(xiě)客戶(hù)機(jī)器上的文件。這是有好處的，因?yàn)槟憧隙ú幌ＭW(wǎng)頁(yè)能夠讀取自己硬盤(pán)上的文件，或者能夠?qū)⒉《緦?xiě)入硬盤(pán)，或者能夠操作你的計(jì)算機(jī)上的文件。唯一例外是，JavaScript可以寫(xiě)到瀏覽器的cookie文件，但是也有一些限制。

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

3.JavaScript不能關(guān)閉不是它自己打開(kāi)的窗口。這是為了避免一個(gè)站點(diǎn)關(guān)閉其他任何站點(diǎn)的窗口，從而獨(dú)占瀏覽器。

4.JavaScript不能從來(lái)自另一個(gè)服務(wù)器的已經(jīng)打開(kāi)的網(wǎng)頁(yè)中讀取信息。換句話(huà)說(shuō)，網(wǎng)頁(yè)不能讀取已經(jīng)打開(kāi)的其它窗口中的信息，因此無(wú)法探查訪(fǎng)問(wèn)這個(gè)站點(diǎn)沖浪者還在訪(fǎng)問(wèn)其它哪些站點(diǎn)。

Ajax是什么？

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

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

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

Ajax的好處是:

應(yīng)用程序的大多數(shù)處理在用戶(hù)的瀏覽器中發(fā)生，而且對(duì)服務(wù)器的數(shù)據(jù)請(qǐng)求往往很短。所以可以使用Ajax建立功能豐富的應(yīng)用程序，這些應(yīng)用程序依賴(lài)基于web的數(shù)據(jù)，但是其性能遠(yuǎn)遠(yuǎn)超過(guò)老式的，因?yàn)槔鲜椒椒ㄒ蠓?wù)器傳回整個(gè)HTML頁(yè)面來(lái)響應(yīng)用戶(hù)操作。

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

1、JavaScript

定義：

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

組成部分：

核心（ECMAScript）、文檔對(duì)象模型（Document Object Model，簡(jiǎn)稱(chēng)DOM）、瀏覽器對(duì)象模型（Browser Object Model，簡(jiǎn)稱(chēng)BOM)

描述：

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

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

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

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

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

2、Ajax

定義：

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

AJAX不是一個(gè)技術(shù)，它實(shí)際上是幾種技術(shù)，每種技術(shù)都有其獨(dú)特之處，合在一起就成了一個(gè)功能強(qiáng)大的新技術(shù)。

組成：

基于XHTML和CSS標(biāo)準(zhǔn)的表示；

使用Document Object Model進(jìn)行動(dòng)態(tài)顯示和交互；

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

使用XML HttpRequest與服務(wù)器進(jìn)行異步通信；

使用JavaScript綁定一切。

描述：

Ajax是結(jié)合了Java技術(shù)、XML以及JavaScript等編程技術(shù)，可以讓開(kāi)發(fā)人員構(gòu)建基于Java技術(shù)的Web應(yīng)用，并打破了使用頁(yè)面重載的管理。

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

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

3、jQuery

定義：

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

特點(diǎn)：

輕量級(jí)、鏈?zhǔn)秸Z(yǔ)法、CSS1-3選擇器、跨瀏覽器、簡(jiǎn)單、易擴(kuò)展；

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

jQuery是當(dāng)前很流行的一個(gè)JavaScript框架，使用類(lèi)似于CSS的選擇器，可以方便的操作HTML元素，擁有很好的可擴(kuò)展性，擁有不少插件。

描述：

對(duì)于程序員來(lái)說(shuō)，簡(jiǎn)化javascript和ajax編程，能夠使程序員從設(shè)計(jì)和書(shū)寫(xiě)繁雜的JS應(yīng)用中解脫出來(lái)，將關(guān)注點(diǎn)轉(zhuǎn)向功能需求而非實(shí)現(xiàn)細(xì)節(jié)上，從而提高項(xiàng)目的開(kāi)發(fā)速度。

對(duì)于用戶(hù)來(lái)說(shuō)，改善了頁(yè)面的視覺(jué)效果，增強(qiáng)了與頁(yè)面的交互性，體驗(yàn)更絢麗的網(wǎng)頁(yè)物資。

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