1、 山 东 轻 工 业 学 院 外文资料及中文译文 院系名称 信息学院 学生姓名 孙吉祥 学生学号 200803014116 专业班级 _ 计科 08-3 指导教师 姜文峰 年 月 日 1 外文资料 出处: http:/ Easy Ajax with jQuery Article Ajax 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)HTML, J
2、avaScript, 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 Gma
3、il, 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 tutorials
4、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 librarie
5、s 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 Knowledge To 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
8、web applications, a basic knowledge of HTML is required. jQuery 101 Lets walk through a quick introduction to jQuery. To be able to use it in your 2 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
9、things, 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
10、element, 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
11、to red, 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
12、 libraries. 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 doc
13、umentation or . Example 1 Our First Ajax Application As 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,
14、Media and so 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 no
15、rmal JavaScript, 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 merely outputs raw text: ?php