(WORD)-简单的Ajax和jQuery的文章外文翻译-其他专业

(WORD)-简单的Ajax和jQuery的文章外文翻译-其他专业 山 东 轻 工 业 学 院 院系名称 信息学院 学生姓名 孙吉祥 学生学号 200803014116 专业班级 _ 计科08-3 指导教师 姜文峰 年 月 日 外文资料 出处: Easy Ajax with jQuery Article Ajax is changing web applications, giving them a responsiveness that‘s unheard 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 even further with the help of jQuery, a popular JavaScript library. What‘s Ajax? You‘ve probably heard about Ajax before, or at least used an Ajax-based application — 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 tutorials 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 isn‘t very easy for beginning web developers to use. Luckily, a number of JavaScript libraries offer an easier way. Today I‘ll show you how j Query — one of these libraries — allows you to easily add Ajax to your application. What‘s jQuery? 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, 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. Assumed Knowledge 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 declarations, 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, since we‘re talking about web applications, a basic knowledge of HTML is required. jQuery 101 Let‘s walk through a quick introduction to jQuery. To be able to use it in your pages, 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) 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 element, it can return an array of elements. Okay, so maybe a better description of $() is that it‘s 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 red, we‘d 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"); jQuery‘s chainable methods allow us to write much more compact 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 will soon make use of, is called by typing $.post(parameters). For more jQuery functions, check the online documentation or visualjquery.com. Example 1 – Our First Ajax Application 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.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 to generate it on the fly at the server end, and fetch it for the client with jQuery. jQuery integrates perfectly with normal JavaScript, so you‘ll find it an easy task to work it into your code. Server-side Code (PHP) To keep it simple, we‘ll use the basic code below to create our concept generator. Don‘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: 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, 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 issue on the server side than the client side. Client-side Code (HTML) Let‘s start creating the HTML for the front end, then work our Ajax into it. All we need on the page is 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 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 the content of our body element: We can put the quote itself inside the div. Normally, we‘d have 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 HTML — we can separate behavior (the event handler) from the structure (the page HTML) with ease. Client-side Code (jQuery) It‘s time to bring our back end together with our front 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 the div and load the content of our script into it. Here‘s the syntax for the click event handler: $("element expression").click(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 element‘s id attribute. You 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 defines our event handler as an anonymous function within the event itself. Mark Wubben‘s JavaScript Terminology page offers a great explanation of anonymous functions, if you‘d like to know more. 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() function: $("#generate").click(function(){ $("#quote").load("script.php"); }); That‘s it: three lines of code, and we have fully functioning Ajax random quote generator! Well, almost. The problem with JavaScript is that code that‘s 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 loaded. Normally, we‘d 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. We‘re not interested in waiting for those images — it‘s just the DOM that we want access to. Fortunately, jQuery has $(document).ready(), which, as its name suggests, is executed when the DOM is ready to be manipulated. The Complete Code Here‘s the complete code, including the $(document).ready wrapper and some basic HTML and CSS: 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 familiar with jQuery, let‘s move on to something more complicated: form elements and XML handling. This is true Ajax! 中文译文 简单的Ajax和jQuery的文章 Ajax是改变web应用程序中,给他们一个反应是闻所未闻的超越桌面。但在所有的大肆宣传,没有太多的Ajax -(X)HTML、JavaScript和XML是没有什么新东西,并且在本教程中,我将向您展示如何简化过程添加Ajax应用程序甚至进一步借助jQuery,一个流行的JavaScript库。 什么是ajax ? Ajax是改变web应用程序中,给他们一个反应是闻所未闻的超越桌面。但在所有的大肆宣传,没有太多的Ajax -(X)HTML、JavaScript和XML是没有什么新东西,并且在本教程中,我将向您展示如何简化过程添加Ajax应用程序甚至进一步借助jQuery,一个流行的JavaScript库。 不幸的是,实际的方法深入教程进入世界上的Ajax是少之又少。添加到这个问题,XMLHttpRequest类使用了Ajax不是很容易,web开发人员开始使用。幸运的是,大量的JavaScript库提供了一种更简单的方法。今天,我将向您展示如何jQuery的这些库,允许你轻松地添加Ajax应用程序。 什么是jquery? jQuery是另一个成熟的JavaScript库,提供了一些特性,别人不。诚然,它并不完全一样轻便的其他一些产品:jQuery排在19 kb,而哞。外汇只有3 kb。你可以阅读更多关于jQuery在世界杯上的JavaScript库的比较,其他一些JavaScript库,提供类似的功能。 认识知识? 为了完成本教程,您将需要一些基本的JavaScript知识。如果你知道任何c风格的语言,你会得到游戏中的JavaScript在没有时间。只是觉得花括号,函数声明,和可选的分号每一行的末尾(他们不会随意与jQuery,尽管)。如果你渴望开始使用JavaScript,看到这个优秀的、简洁的JavaScript教程为程序员。同时,因为我们正在谈论web应用程序,具备基本的HTML是必需的。 Jquery 101? 让我们浏览一下jQuery快速的介绍。能够使用它在你的页面,您首先需要下载该库。你可以在这里下载最新版本1.1.2在撰写本文的时候。jQuery的方法很简单:找到的东西,做的东西。我们从文档中选择元素(通过DOM)使用jQuery函数,别名$()。这个方便的函数的行为就像document . getelementbyid(),不过不是只支持IDs,它支持CSS选择器和一些XPath选择器,而没有返回一个元素,它可以返回一个数组的元素。好吧,或许一种更好的方式来描述$(),它就像document . getelementbyid()在类固醇。 然后,我们使用函数来执行行动对我们的选择。例如,要添加文本―Hello World !―所有的div与类的?foo‘,然后设置颜色为红色,我们会用下面的代码: $("div.foo").append("Hello World!").css("color","red"); 简单!通常,这个任务需要两行代码,就像这样: $("div.foo").append("Hello World!"); $("div.foo").css("color","red"); jQuery的链的方法允许我们写更紧凑的代码比其他JavaScript库。这些函数 在jQuery中,不需要一个对象,因为它们独立工作,很多Ajax功能属于这个组。例 如,post函数,我们将马上利用叫做打字$ . post(参数)。更多的jQuery函数、检查 或visualjquery.com在线文档。 示例1-我们的第一个Ajax应用程序 作为一个例子,我们要制定一个交互式概念生成器。基本上,这涉及到我们的 选择两个术语随意地从一个列表,然后将它们组合起来创建一个短语。对于这个 练习,我们将使用web 2.0术语(―混搭‖、―大众分类法‖、―媒体‖等等),通常我们会 拿这些术语从一个平面文件。为了不让你下载每个组合(或至少每个元素)在 我们将生成它飞在服务器端和客户端获取与jQuery。jQuery集成完JavaScript中, 全正常的JavaScript,因此你会发现它是一个简单的任务才能进入你的代码。 服务器端的代码(php) 为简单起见,我们将使用以下代码来创建我们的基本概念生成器。不要担心 它是如何工作的,只是看看它所做的:它输出一个随机的报价。注意,这段代码并不 输出XML -它仅仅输出原始文本: 这里,我使用了ie浏览器cache - control头部响应。因为有一个习惯缓存的页 面具有相同的URL,即使内容页面之间的不同。很明显,这一目的的脚本——一个 新的引用的生产在每个负载。我们可以使用jQuery来包括一个随机数,然后在URL被丢弃,但很容易解决这个问题在服务器端缓存比客户端。 客户端代码(HTML) 让我们开始创建的HTML前端,那么我们的Ajax工作它。所有我们需要的页面是一个按钮,用户可以点击请求另一个报价,一个div,我们要把这个报价,一旦我们收到从服务器。我们将使用jQuery选择此div和加载报价,我们将参考div的id。如果我们想,我们可以使用jQuery来加载引用到多个元素的帮助下,一个类,但是一个id,所有我们需要的只是现在。让我们把这个内容我们身体的元素: 我们可以把报价里面div。通常,我们会有一个漫长的onSubmit事件为按钮(输入id为―生成‖)。有时,我们就有了一个onSubmit事件处理程序,称为一个JavaScript函数。但在jQuery中,我们甚至不需要触碰HTML——我们可以单独的行为(事件处理程序)从结构(页面的HTML)轻松。 客户端代码(jquery) 它的时候把我们的后端一起使用jQuery的前端。我前面提到的,我们可以选择从DOM元素与jQuery。首先,我们必须选择按钮,并分配给它一个onClick事件处理程序。在代码中为这个事件,我们可以选择div和负载的内容脚本到它。这里的语法单击事件处理程序 $("element expression").click(function(){ Code goes here }); 正如您可能已经知道,如果我们选择这个元素的CSS,#将确认,我们做我们的选择使用元素的id属性。您可以使用完全相同的语法和jQuery。因此,选择按钮id为?generate‘(我们给它上面),我们可以使用元素表达式#生成。此外,一定要知道这种语法定义了我们的事件处理程序作为一个匿名函数在事件本身。 马克Wubben的JavaScript术语页面提供了一个很好的解释的匿名函数,如果你想要知道更多。 我们将使用一个jQuery的更高层次的Ajax函数,load()。让我们假设我们保存为script.php生成器脚本。让我们与我们的客户端集成的帮助下load()函数: $("#generate").click(function(){ $("#quote").load("script.php"); }); 这是它:三行代码,和我们有功能齐全的Ajax随机引用发电机!嗯,差不多。问题是,代码使用JavaScript并不是在一个函数执行一旦浏览器到达它呈现期间—不是一次页面完成的渲染。因此,这个代码将尝试连接到一个元素,还没有加载。通常,我们会用窗口。onload处理这个问题。然而,这种方法有一个局限是,窗口。onload叫做一旦一切都已完成加载-图像和所有。我们等待着那些不感兴趣的图片——这只是DOM,我们想要访问。幸运的是,jQuery已经$(文档)项(),正如它的名字所表明的,时执行DOM是准备被操纵 完整的代码 下面是完整的代码,包括$(文档)。准备好了包装器和一些基本的HTML和 CSS 这段代码中还包含了这个可下载zip文件中。记住,该代码假设jQuery库已被 保存为jQuery。js在相同的文件夹中PHP脚本和HTML前端。现在,你熟悉jQuery, 让我们进入到更加复杂的东西:表单元素和XML处理。这是真正的Ajax !