03 计科083班 03014116 孙吉祥外文翻译汇总.docx

1、03 计科083班 03014116 孙吉祥外文翻译汇总山东轻工业学院外文资料及中文译文院系名称 信息学院 学生姓名 孙吉祥 学生学号 200803014116 专业班级 _ 计科08-3 指导教师 姜文峰 年 月 日外文资料出处：Easy Ajax with jQuery ArticleAjax is changing web applications, giving them a responsiveness thats unheard of beyond the desktop. But behind all the hype, theres not much to Ajax (X)HT

2、ML, JavaScript, and XML are nothing new, and in this tutorial, Ill show you how to simplify the process of adding Ajax to your application even further with the help of jQuery, a popular JavaScript library.Whats Ajax?Youve probably heard about Ajax before, or at least used an Ajax-based application

3、Gmail, for 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 credited with coining the term in this article.Unfortunately, in-depth tutoria

4、ls on practical ways to enter the world of Ajax are few and far between. To add to the problem, the XML Http Request class used by Ajax isnt very easy for beginning web developers to use. Luckily, a number of JavaScript libraries offer an easier way. Today Ill show you how j Query one of these libra

5、ries allows you to easily add Ajax to your application.Whats jQuery?jQuery is another mature JavaScript library that offers some features that the others do not. Admittedly, its not exactly as lightweight as some of the other offerings: jQuery comes in at 19kb, while moo.fx is only 3kb. You can read

6、 more about jQuery at The JavaScript Library World Cup for a comparison of a few other JavaScript libraries that offer similar functionality.Assumed KnowledgeTo complete this tutorial, youll need some basic JavaScript knowledge. If you know any C-style languages, youll get the hang of JavaScript in

7、no time. Just think curly braces, function declarations, and optional semicolons at the end of each line (theyre not optional with jQuery, though). If youre keen to get started with JavaScript, see this excellent, concise JavaScript tutorial designed for programmers. Also, since were talking about w

8、eb applications, a basic knowledge of HTML is required.jQuery 101Lets walk through a quick introduction to jQuery. To be able to use it in your pages, youll first need to download the library. You can download the latest version 1.1.2 at the time of writing. jQuerys methodology is simple: find thing

9、s, do stuff. We select elements from the document (via the DOM) 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 selectors; and, instead of returning one eleme

10、nt, it can return an array of elements. Okay, so maybe a better description of $() is that its like document.getElementById() on steroids.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 r

11、ed, wed use the following code:$(div.foo).append(Hello World!).css(color,red);Easy! Normally, this task would require two lines of code, like so:$(div.foo).append(Hello World!);$(div.foo).css(color,red);jQuerys chainable methods allow us to write much more compact code than other JavaScript librarie

12、s. There are functions in jQuery that dont need an object, as they work independently, and many of the Ajax functions fall into this group. For example, the post function, which we will soon make use of, is called by typing $.post(parameters). For more jQuery functions, check the online documentatio

13、n or .Example 1 Our First Ajax ApplicationAs an example, were 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, well use web 2.0 buzzwords (Mashup, Folksonomy, Media and s

14、o on), and normally wed fetch these terms from a flat file. To save you from downloading every single combination (or at least every element) in JavaScript, were going to generate it on the fly at the server end, and fetch it for the client with jQuery. jQuery integrates perfectly with normal JavaSc

15、ript, so youll find it an easy task to work it into your code.Server-side Code (PHP)To keep it simple, well use the basic code below to create our concept generator. Dont worry about how it works, just look at what it does: it outputs a randomized quote. Note that this code doesnt output XML it mere

16、ly outputs raw text:Here, Ive 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, that defeats the purpose of our script the production of a new quote on every load. We could h

17、ave used jQuery to include a random number in the URL that would then be discarded, but its easier to address this caching issue on the server side than the client side.Client-side Code (HTML)Lets start creating the HTML for the front end, then work our Ajax into it. All we need on the page is a but

18、ton that users can click to request another quote, and a div into which well put the quote once weve received it from the server. Well use jQuery to select this div and load the quote into it, and well reference the div by its id. If we wanted to, we could use jQuery to load the quote into multiple

19、elements, with the help of a class, but an id is all we need for now. Lets make this the content of our body element:We can put the quote itself inside the div. Normally, wed have a lengthy onSubmit event for the button (the input with the id generate). Sometimes, wed have an onSubmit event handler

20、that called a JavaScript function. But with jQuery, we dont even need to touch the HTML we can separate behavior (the event handler) from the structure (the page HTML) with ease.Client-side Code (jQuery)Its time to bring our back end together with our front end using jQuery. I mentioned earlier that

21、 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 the div and load the content of our script into it. Heres the syntax for the click event handler:$(element expression).click(

22、function()/ Code goes here);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 elements id attribute. You can use exactly the same syntax with jQuery. Therefore, to select the button with the id generate (which we

23、gave it above), we can use the element expression #generate. Also, be aware that this syntax defines our event handler as an anonymous function within the event itself.Mark Wubbens JavaScript Terminology page offers a great explanation of anonymous functions, if youd like to know more.Were going to

24、use one of jQuerys higher level Ajax functions, load(). Lets assume that our generator script is saved as script.php. Lets integrate it with our client side with the help of the load() function:$(#generate).click(function()$(#quote).load(script.php););Thats it: three lines of code, and we have fully

25、 functioning Ajax random quote generator! Well, almost.The problem with JavaScript is that code thats not within a function is executed as soon as the browser 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 lo

26、aded. Normally, wed use window.onload to deal with this issue. However, the limitation with that approach is that window.onload is called once everything has finished loading images and all. Were not interested in waiting for those images its just the DOM that we want access to.Fortunately, jQuery h

27、as $(document).ready(), which, as its name suggests, is executed when the DOM is ready to be manipulated.The Complete CodeHeres the complete code, including the $(document).ready wrapper and some basic HTML and CSS: Ajax with jQuery Example $(document).ready(function() $(#generate).click(function()

28、$(#quote p).load(script.php); ); ); #wrapper width: 240px; height: 80px; margin: auto; padding: 10px; margin-top: 10px; border: 1px solid black; text-align: center; 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 youre familiar with jQuery, lets move on to something more complicated: form elements and XML handling. This is true Ajax!中文译文简单的Ajax和jQuery的文章Ajax是改变web应用程序中,给他们一个反