簡單的ajax和jquery的文章外文翻譯

1、<p>　　山　東　輕　工　業(yè)　學(xué)　院</p><p><b>　　外文資料及中文譯文</b></p><p>　　院系名稱 信息學(xué)院 </p><p>　　學(xué)生姓名 孫吉祥 </p><p>　　學(xué)生學(xué)號 200803014116 </

2、p><p>　　專業(yè)班級 _ 計科08-3 </p><p>　　指導(dǎo)教師 姜文峰 </p><p><b>　　年 月 日</b></p><p><b>　　外文資料</b></p><p><b>　　出處：<

3、;/b></p><p>　　http://www.sitepoint.com/ajax-jquery</p><p>　　Easy Ajax with jQuery Article</p><p>　　Ajax is changing web applications, giving them a responsiveness that’s unheard

4、of beyond the desktop. But behind all the hype, there’s not much to Ajax — (X)HTML, JavaScript, and XML are nothing new, and in this tutorial, I’ll show you how to simplify the process of adding Ajax to your application

5、even further with the help of jQuery, a popular JavaScript library.</p><p>　　What’s Ajax?</p><p>　　You’ve probably heard about Ajax before, or at least used an Ajax-based application — Gmail, fo

6、r instance. Quite simply, Ajax is a technique for handling external data through JavaScript asynchronously, without reloading the entire page. Site Point offers a good introduction to Ajax. Jesse James Garrett is credite

7、d with coining the term in this article.Unfortunately, in-depth tutorials on practical ways to enter the world of Ajax are few and far between. To add to the problem, the XML Http Reque</p><p>　　What’s jQuer

8、y?</p><p>　　jQuery is another mature JavaScript library that offers some features that the others do not. Admittedly, it’s not exactly as lightweight as some of the other offerings: jQuery comes in at 19kb,

9、while moo.fx is only 3kb. You can read more about jQuery at The JavaScript Library World Cup for a comparison of a few other JavaScript libraries that offer similar functionality.</p><p>　　Assumed Knowledge&

10、lt;/p><p>　　To complete this tutorial, you’ll need some basic JavaScript knowledge. If you know any C-style languages, you’ll get the hang of JavaScript in no time. Just think curly braces, function declaration

11、s, and optional semicolons at the end of each line (they’re not optional with jQuery, though). If you’re keen to get started with JavaScript, see this excellent, concise JavaScript tutorial designed for programmers. Also

12、, since we’re talking about web applications, a basic knowledge of HTML is require</p><p>　　jQuery 101</p><p>　　Let’s walk through a quick introduction to jQuery. To be able to use it in your pa

13、ges, you’ll first need to download the library. You can download the latest version — 1.1.2 at the time of writing. jQuery’s methodology is simple: find things, do stuff. We select elements from the document (via the DOM

14、) using the jQuery function, aliased as $(). This handy function acts just like document.getElementById(), except that instead of only supporting IDs, it supports CSS selectors and some XPath select</p><p>　

15、　We then use functions to perform actions on our selections. For example, to append the text “Hello World!” to all divs with the class 'foo', then set the color to red, we’d use the following code:</p><

16、;p>　　$("div.foo").append("Hello World!").css("color","red");</p><p>　　Easy! Normally, this task would require two lines of code, like so:</p><p>　　$(&q

17、uot;div.foo").append("Hello World!");</p><p>　　$("div.foo").css("color","red");</p><p>　　jQuery’s chainable methods allow us to write much more compa

18、ct code than other JavaScript libraries. There are functions in jQuery that don’t need an object, as they work independently, and many of the Ajax functions fall into this group. For example, the post function, which we

19、will soon make use of, is called by typing $.post(parameters). For more jQuery functions, check the online documentation or visualjquery.com.</p><p>　　Example 1 – Our First Ajax Application</p><p&

20、gt;　　As an example, we’re going to make an interactive concept generator. Basically, this involves our selecting two terms at random from a list, then combining them to create a phrase. For this exercise, we’ll use web 2

21、.0 buzzwords (‘Mashup’, ‘Folksonomy’, ‘Media’ and so on), and normally we’d fetch these terms from a flat file. To save you from downloading every single combination (or at least every element) in JavaScript, we’re going

22、 to generate it on the fly at the server end, and fetch it for th</p><p>　　Server-side Code (PHP)</p><p>　　To keep it simple, we’ll use the basic code below to create our concept generator. Don’

23、t worry about how it works, just look at what it does: it outputs a randomized quote. Note that this code doesn’t output XML — it merely outputs raw text:</p><p><b>　　<?php</b></p><

24、p>　　header("Cache-Control: no-cache");</p><p>　　Ideally, you'd put these in a text file or a database.  </p><p>　　Put an entry on each line of 'a.txt' and use $pref

25、ixes = file("a.txt");</p><p>　　You can do the same with a separate file for $suffixes.</p><p>　　$prefixes = array('Mashup','2.0','Tagging','Folksonomy')

26、;</p><p>　　$suffixes = array('Web','Push','Media','GUI');</p><p>　　This selects a random element of each array on the fly</p><p>　　echo $prefixes[ran

27、d(0,count($prefixes)-1)] . " is the new "  </p><p>　　. $suffixes[rand(0,count($prefixes)-1)];</p><p>　　Example output: Tagging is the new Media</p><p><b>　　?>

28、;</b></p><p>　　Here, I’ve used the Cache-Control header response because Internet Explorer has a habit of caching pages that have the same URL, even if the content between the pages differs. Obviously,

29、 that defeats the purpose of our script — the production of a new quote on every load. We could have used jQuery to include a random number in the URL that would then be discarded, but it’s easier to address this caching

30、 issue on the server side than the client side.</p><p>　　Client-side Code (HTML)</p><p>　　Let’s start creating the HTML for the front end, then work our Ajax into it. All we need on the page is

31、a button that users can click to request another quote, and a div into which we’ll put the quote once we’ve received it from the server. We’ll use jQuery to select this div and load the quote into it, and we’ll reference

32、 the div by its id. If we wanted to, we could use jQuery to load the quote into multiple elements, with the help of a class, but an id is all we need for now. Let’s make this t</p><p>　　<input type="

33、submit" id="generate" value="Generate!"></p><p>　　<div id="quote"></div></p><p>　　We can put the quote itself inside the div. Normally, we’d hav

34、e a lengthy onSubmit event for the button (the input with the id 'generate'). Sometimes, we’d have an onSubmit event handler that called a JavaScript function. But with jQuery, we don’t even need to touch the HTM

35、L — we can separate behavior (the event handler) from the structure (the page HTML) with ease.</p><p>　　Client-side Code (jQuery)</p><p>　　It’s time to bring our back end together with our front

36、 end using jQuery. I mentioned earlier that we can select elements from the DOM with jQuery. First, we have to select the button and assign an onClick event handler to it. Within the code for this event, we can select th

37、e div and load the content of our script into it. Here’s the syntax for the click event handler:</p><p>　　$("element expression").click(function(){</p><p>　　// Code goes here</p>

38、<p><b>　　});</b></p><p>　　As you probably already know, if we were to select this element in CSS, the # would identify that we were making our selection using the element’s id attribute. Y

39、ou can use exactly the same syntax with jQuery. Therefore, to select the button with the id 'generate' (which we gave it above), we can use the element expression #generate. Also, be aware that this syntax define

40、s our event handler as an anonymous function within the event itself.</p><p>　　Mark Wubben’s JavaScript Terminology page offers a great explanation of anonymous functions, if you’d like to know more.</p&g

41、t;<p>　　We’re going to use one of jQuery’s higher level Ajax functions, load(). Let’s assume that our generator script is saved as script.php. Let’s integrate it with our client side with the help of the load() fu

42、nction:</p><p>　　$("#generate").click(function(){</p><p>　　$("#quote").load("script.php");</p><p><b>　　});</b></p><p>　　That’s

43、 it: three lines of code, and we have fully functioning Ajax random quote generator! Well, almost.</p><p>　　The problem with JavaScript is that code that’s not within a function is executed as soon as the br

44、owser reaches it during rendering — not once the page has finished rendering. As such, this code will try to attach to an element that has not yet loaded. Normally, we’d use window.onload to deal with this issue. However

45、, the limitation with that approach is that window.onload is called once everything has finished loading — images and all. We’re not interested in waiting for those images — it’s ju</p><p>　　Fortunately, jQu

46、ery has $(document).ready(), which, as its name suggests, is executed when the DOM is ready to be manipulated.</p><p>　　The Complete Code</p><p>　　Here’s the complete code, including the $(docum

47、ent).ready wrapper and some basic HTML and CSS:</p><p><b>　　<html></b></p><p><b>　　<head></b></p><p>　　<title>Ajax with jQuery Example</

48、title></p><p>　　<script type="text/JavaScript" src="jquery.js"></script></p><p>　　<script type="text/JavaScript"></p><p>　　$(docum

49、ent).ready(function(){</p><p>　　$("#generate").click(function(){</p><p>　　$("#quote p").load("script.php");</p><p><b>　　});</b></p>

50、<p><b>　　});</b></p><p><b>　　</script></b></p><p>　　<style type="text/css"></p><p>　　#wrapper {</p><p>　　width: 240px

51、;</p><p>　　height: 80px;</p><p>　　margin: auto;</p><p>　　padding: 10px;</p><p>　　margin-top: 10px;</p><p>　　border: 1px solid black;</p><p>　　

52、text-align: center;</p><p><b>　　}</b></p><p><b>　　</style></b></p><p><b>　　</head></b></p><p><b>　　<body><

53、;/b></p><p>　　<div id="wrapper"></p><p>　　<div id="quote"><p> </p></div></p><p>　　<input type="submit" id="gen

54、erate" value="Generate!"></p><p><b>　　</div></b></p><p><b>　　</body></b></p><p><b>　　</html></b></p>&

55、lt;p>　　This code is also included in this downloadable zip file. Remember, this code assumes the jQuery library has been saved as jquery.js in the same folder as the PHP script and the HTML front end. Now that you’re

56、familiar with jQuery, let’s move on to something more complicated: form elements and XML handling. This is true Ajax!</p><p><b>　　中文譯文</b></p><p>　　簡單的Ajax和jQuery的文章</p><p

57、>　　Ajax是改變web應(yīng)用程序中,給他們一個反應(yīng)是聞所未聞的超越桌面。但在所有的大肆宣傳,沒有太多的Ajax -(X)HTML、JavaScript和XML是沒有什么新東西,并且在本教程中,我將向您展示如何簡化過程添加Ajax應(yīng)用程序甚至進一步借助jQuery,一個流行的JavaScript庫。</p><p><b>　　什么是ajax ?</b></p><

58、p>　　Ajax是改變web應(yīng)用程序中,給他們一個反應(yīng)是聞所未聞的超越桌面。但在所有的大肆宣傳,沒有太多的Ajax -(X)HTML、JavaScript和XML是沒有什么新東西,并且在本教程中,我將向您展示如何簡化過程添加Ajax應(yīng)用程序甚至進一步借助jQuery,一個流行的JavaScript庫。</p><p>　　不幸的是,實際的方法深入教程進入世界上的Ajax是少之又少。添加到這個問題,XMLHt

59、tpRequest類使用了Ajax不是很容易,web開發(fā)人員開始使用。幸運的是,大量的JavaScript庫提供了一種更簡單的方法。今天,我將向您展示如何jQuery的這些庫,允許你輕松地添加Ajax應(yīng)用程序。</p><p>　　什么是jquery?</p><p>　　jQuery是另一個成熟的JavaScript庫,提供了一些特性,別人不。誠然,它并不完全一樣輕便的其他一些產(chǎn)品:jQ

60、uery排在19 kb,而哞。外匯只有3 kb。你可以閱讀更多關(guān)于jQuery在世界杯上的JavaScript庫的比較,其他一些JavaScript庫,提供類似的功能。</p><p><b>　　認(rèn)識知識?</b></p><p>　　為了完成本教程,您將需要一些基本的JavaScript知識。如果你知道任何c風(fēng)格的語言,你會得到游戲中的JavaScript在沒有時

61、間。只是覺得花括號,函數(shù)聲明,和可選的分號每一行的末尾(他們不會隨意與jQuery,盡管)。如果你渴望開始使用JavaScript,看到這個優(yōu)秀的、簡潔的JavaScript教程為程序員。同時,因為我們正在談?wù)搘eb應(yīng)用程序,具備基本的HTML是必需的。</p><p>　　Jquery 101?</p><p>　　讓我們?yōu)g覽一下jQuery快速的介紹。能夠使用它在你的頁面,您首先需要下

62、載該庫。你可以在這里下載最新版本1.1.2在撰寫本文的時候。jQuery的方法很簡單:找到的東西,做的東西。我們從文檔中選擇元素(通過DOM)使用jQuery函數(shù),別名$()。這個方便的函數(shù)的行為就像document . getelementbyid(),不過不是只支持IDs,它支持CSS選擇器和一些XPath選擇器,而沒有返回一個元素,它可以返回一個數(shù)組的元素。好吧,或許一種更好的方式來描述$(),它就像document . gete

63、lementbyid()在類固醇。</p><p>　　然后,我們使用函數(shù)來執(zhí)行行動對我們的選擇。例如,要添加文本“Hello World !“所有的div與類的‘foo’,然后設(shè)置顏色為紅色,我們會用下面的代碼: </p><p>　　$("div.foo").append("Hello World!").css("color"

64、,"red");</p><p>　　簡單!通常,這個任務(wù)需要兩行代碼,就像這樣:</p><p>　　$("div.foo").append("Hello World!");</p><p>　　$("div.foo").css("color","red&

65、quot;);</p><p>　　jQuery的鏈的方法允許我們寫更緊湊的代碼比其他JavaScript庫。這些函數(shù)在jQuery中,不需要一個對象,因為它們獨立工作,很多Ajax功能屬于這個組。例如,post函數(shù),我們將馬上利用叫做打字$ . post(參數(shù))。更多的jQuery函數(shù)、檢查或visualjquery.com在線文檔。</p><p>　　示例1-我們的第一個Ajax應(yīng)用

66、程序</p><p>　　作為一個例子,我們要制定一個交互式概念生成器?；旧?這涉及到我們的選擇兩個術(shù)語隨意地從一個列表,然后將它們組合起來創(chuàng)建一個短語。對于這個練習(xí),我們將使用web 2.0術(shù)語(“混搭”、“大眾分類法”、“媒體”等等),通常我們會拿這些術(shù)語從一個平面文件。為了不讓你下載每個組合(或至少每個元素)在JavaScript中,我們將生成它飛在服務(wù)器端和客戶端獲取與jQuery。jQuery集成完全

67、正常的JavaScript,因此你會發(fā)現(xiàn)它是一個簡單的任務(wù)才能進入你的代碼。</p><p>　　服務(wù)器端的代碼（php）</p><p>　　為簡單起見,我們將使用以下代碼來創(chuàng)建我們的基本概念生成器。不要擔(dān)心它是如何工作的,只是看看它所做的:它輸出一個隨機的報價。注意,這段代碼并不輸出XML -它僅僅輸出原始文本:</p><p><b>　　<?

68、php</b></p><p>　　header("Cache-Control: no-cache");</p><p>　　Ideally, you'd put these in a text file or a database.  </p><p>　　Put an entry on each line of

69、'a.txt' and use $prefixes = file("a.txt");</p><p>　　You can do the same with a separate file for $suffixes.</p><p>　　$prefixes = array('Mashup','2.0','Taggi

70、ng','Folksonomy');</p><p>　　$suffixes = array('Web','Push','Media','GUI');</p><p>　　This selects a random element of each array on the fly</p>

71、<p>　　echo $prefixes[rand(0,count($prefixes)-1)] . " is the new "  </p><p>　　. $suffixes[rand(0,count($prefixes)-1)];</p><p>　　Example output: Tagging is the new Media</p&

72、gt;<p><b>　　?></b></p><p>　　這里,我使用了ie瀏覽器cache - control頭部響應(yīng)。因為有一個習(xí)慣緩存的頁面具有相同的URL,即使內(nèi)容頁面之間的不同。很明顯,這一目的的腳本——一個新的引用的生產(chǎn)在每個負(fù)載。我們可以使用jQuery來包括一個隨機數(shù),然后在URL被丟棄,但很容易解決這個問題在服務(wù)器端緩存比客戶端。</p>

73、<p>　　客戶端代碼（HTML）</p><p>　　讓我們開始創(chuàng)建的HTML前端,那么我們的Ajax工作它。所有我們需要的頁面是一個按鈕,用戶可以點擊請求另一個報價,一個div,我們要把這個報價,一旦我們收到從服務(wù)器。我們將使用jQuery選擇此div和加載報價,我們將參考div的id。如果我們想,我們可以使用jQuery來加載引用到多個元素的幫助下,一個類,但是一個id,所有我們需要的只是現(xiàn)在。

74、讓我們把這個內(nèi)容我們身體的元素:</p><p>　　<input type="text"></p><p>　　<input type="submit" id="generate" value="Generate!"></p><p>　　<div id=

75、"quote"></div></p><p>　　我們可以把報價里面div。通常,我們會有一個漫長的onSubmit事件為按鈕(輸入id為“生成”)。有時,我們就有了一個onSubmit事件處理程序,稱為一個JavaScript函數(shù)。但在jQuery中,我們甚至不需要觸碰HTML——我們可以單獨的行為(事件處理程序)從結(jié)構(gòu)(頁面的HTML)輕松。</p><

76、;p>　　客戶端代碼（jquery）</p><p>　　它的時候把我們的后端一起使用jQuery的前端。我前面提到的,我們可以選擇從DOM元素與jQuery。首先,我們必須選擇按鈕,并分配給它一個onClick事件處理程序。在代碼中為這個事件,我們可以選擇div和負(fù)載的內(nèi)容腳本到它。這里的語法單擊事件處理程序</p><p>　　$("element expression

77、").click(function(){</p><p>　　Code goes here</p><p><b>　　});</b></p><p>　　正如您可能已經(jīng)知道,如果我們選擇這個元素的CSS,#將確認(rèn),我們做我們的選擇使用元素的id屬性。您可以使用完全相同的語法和jQuery。因此,選擇按鈕id為‘generate’(我

78、們給它上面),我們可以使用元素表達(dá)式#生成。此外,一定要知道這種語法定義了我們的事件處理程序作為一個匿名函數(shù)在事件本身。</p><p>　　馬克Wubben的JavaScript術(shù)語頁面提供了一個很好的解釋的匿名函數(shù),如果你想要知道更多。</p><p>　　我們將使用一個jQuery的更高層次的Ajax函數(shù),load()。讓我們假設(shè)我們保存為script.php生成器腳本。讓我們與我們

79、的客戶端集成的幫助下load()函數(shù):</p><p>　　$("#generate").click(function(){</p><p>　　$("#quote").load("script.php");</p><p><b>　　});</b></p><

80、p>　　這是它:三行代碼,和我們有功能齊全的Ajax隨機引用發(fā)電機!嗯,差不多。問題是,代碼使用JavaScript并不是在一個函數(shù)執(zhí)行一旦瀏覽器到達(dá)它呈現(xiàn)期間—不是一次頁面完成的渲染。因此,這個代碼將嘗試連接到一個元素,還沒有加載。通常,我們會用窗口。onload處理這個問題。然而,這種方法有一個局限是,窗口。onload叫做一旦一切都已完成加載-圖像和所有。我們等待著那些不感興趣的圖片——這只是DOM,我們想要訪問。幸運的是,

81、jQuery已經(jīng)$(文檔)項(),正如它的名字所表明的,時執(zhí)行DOM是準(zhǔn)備被操縱</p><p><b>　　完整的代碼</b></p><p>　　下面是完整的代碼,包括$(文檔)。準(zhǔn)備好了包裝器和一些基本的HTML和CSS</p><p><b>　　<html></b></p><p&

82、gt;<b>　　<head></b></p><p>　　<title>Ajax with jQuery Example</title></p><p>　　<script type="text/JavaScript" src="jquery.js"></script>

83、;</p><p>　　<script type="text/JavaScript"></p><p>　　$(document).ready(function(){</p><p>　　$("#generate").click(function(){</p><p>　　$("#

84、quote p").load("script.php");</p><p><b>　　});</b></p><p><b>　　});</b></p><p><b>　　</script></b></p><p>　　<st

85、yle type="text/css"></p><p>　　#wrapper {</p><p>　　width: 240px;</p><p>　　height: 80px;</p><p>　　margin: auto;</p><p>　　padding: 10px;</p>

86、;<p>　　margin-top: 10px;</p><p>　　border: 1px solid black;</p><p>　　text-align: center;</p><p><b>　　}</b></p><p><b>　　</style></b>&

87、lt;/p><p><b>　　</head></b></p><p><b>　　<body></b></p><p>　　<div id="wrapper"></p><p>　　<div id="quote">

88、<p> </p></div></p><p>　　<input type="submit" id="generate" value="Generate!"></p><p><b>　　</div></b></p><p>&

89、lt;b>　　</body></b></p><p><b>　　</html></b></p><p>　　這段代碼中還包含了這個可下載zip文件中。記住,該代碼假設(shè)jQuery庫已被保存為jQuery。js在相同的文件夾中PHP腳本和HTML前端。現(xiàn)在,你熟悉jQuery,讓我們進入到更加復(fù)雜的東西:表單元素和XML處理。