JQuery's AJAX-based Applications

Abstract: In the current upsurge in Web2.0, AJAX are attracting worldwide attention, becoming the most talked-about technical terms. AJAX technology has improved very much WEB application user experience, jQuery simplifies the creation and use of the AJAX development. This article first AJAX technology with the traditional Web development were compared to explain the advantages of AJAX technology asynchronous interaction, followed by an example of jQuery in specific applications embody the characteristics of, and finally, concluding remarks and discusses the prospects.
Keywords: jQuery; AJAX; asynchronous interaction; XMLHttpRequest
CLC number: TP312
1. Introduction At present, the network is in a Web2.0 [1] age, appeared at this time a large number of related technologies, Ajax is one of them representative. AJAX is attracting worldwide attention, becoming the most talked-about technical terms, a large number of scholars began to study or are studying AJAX technology.
If developers use a simple Javascript Ajax approach to development, it would make very difficult to debug the application, thus reducing the efficiency of production, and a lot of Javascript code that makes the process complex, the relative increase in processing time, affect the user experience. However, Ajax technology has hastened the development of a large number of technology based on its own JavaScript libraries. The use of JavaScript libraries help to minimize use of JavaScript and Ajax to bring many of the frequently asked questions. jQuery [3] is one of the very best of a JavaScript library simple and fast. Many scholars have termed the Ajax framework, but I believe that it has not reached the level of the framework. jQuery encapsulates the B / S development process of a large number of technical details, so developers can focus more on business logic development action and user interface development process. One example of this realization, through case analysis, embodied in the specific application characteristics of jQuery.
2. AJAX Introduction
What is 2.1 AJAX
AJAX (Asynchronous JavaScript And XML) translated into Chinese, it means asynchronous JavaScript and XML technology. In fact, AJAX is not a single technology or a computer language, it is an integrated multi-molding technology, which includes the following five aspects: (1) the use of XHTML and CSS standards-based presentation technology. (2) the use of DOM for dynamic display and interaction. (3) the use of XML and XSLT for data exchange and processing. (4) Asynchronous data retrieval using XMLHttpRequest. (5) the use of JavaScript to the above techniques together. I believe that Ajax technology is the core JavaScript object XMLHttpRequest [3], the object is an asynchronous technology to send the request, AJAX technology using asynchronous HTTP request, in the Browser and Web server to transfer data between, so that only updates part of the Browser page content without re-loading the new page. Asynchronous interaction, and not transferred to the new page view is Ajax greatly improve the user experience areas.
WEB 2.2 AJAX effects and the development of the traditional advantages of a traditional Web application allows users to fill out the form, when the form is submitted when a request is sent to the Web server. Server to receive and process the form came, and then returns a new page. This approach to waste a lot of bandwidth, because the majority of around two pages in HTML code are the same. Since each application needs to interact with the request to the server, application response time depends on the server's response time. This has resulted in response to the user interface is much slower than native applications. Ajax application is different, Ajax applications can only send to the server and retrieve the necessary data, and handle the client using JavaScript from the server response. Because the server and browser exchange of data between the significant reduction, the results we can see a more responsive application. Meanwhile, many of the processing of a request can be done on the client machine, so Web servers also reduces the processing time.

Figure 2-1 interact traditional WEB

Figure 2-2AJAX technology interactively comparing Figure 2-1 and Figure 2-2 shows, Ajax engine on behalf of the user to communicate with the server and update the user interface seen. The interaction is conducted asynchronously in the background and does not interrupt the user the current operation. In addition, because only with the server-side Ajax level data exchange, and some page display, calibration data and other functions will be given to Ajax engine for themselves. Ajax will be the work of some server-side transfer to the client, the client full use of idle capacity so as to reduce the burden on the server, to speed up the browser's response time, reduce the user waiting time [4].
3. JQuery Introduction
What is 3.1 jQuery
jQuery John Resig created by the early 2006, for any programmer to use JavaScript code, it is a very useful JavaScript libraries. Whether new to JavaScript language and would like to get a document object model to resolve (Document Object Model, DOM) scripting and Ajax development issues in the library complex, or as a DOM scripting and Ajax are tired of boring repetition of development work Senior JavaScript expert, jQuery will be the first choice. It can operate in a simple Web page documents, handle events, run the animation or add Ajax interactions [5].
3.2 jQuery can do
jQuery's purpose is to WRITE LESS, DO MORE, write less code, do more. WEB jQuery library to provide a common scripting abstraction layer, making it suitable for almost all situations scripting, speaking only in respect of its core features, jQuery can satisfy my needs: (1) get the page elements. (2) modify the appearance of the page. (3) change the page content. (4) respond to user's page operation. (5) for the page to add dynamic effects. (7) No need to refresh the data can be obtained from the server. (8) JavaScript simplify common tasks. These strategies not only ensure that the jQuery Package miniaturization - after compression is about 20KB, the same time, we use this library for custom code to ensure us to provide the technical support [6].
Here is a simple example, it illustrates the impact of jQuery code. To perform some really simple and common tasks, for example, an area for the page attached to each link a click (click) event, you can use pure JavaScript code and DOM scripting to implement the code as follows:
var external_links = document.getElementById ('external_links');
var links = external_links.getElementsByTagName ('a');
for (var i = 0; i <links.length; i + +) (
var link = links.item (i);
link.onclick = function () (
return confirm ('You are going to visit:' + this.href);
The following code shows the use of jQuery to achieve the same functionality.
$ ('# External_links a'). Click (function () (
return confirm ('You are going to visit:' + this.href);
Use jQuery, you can grasp the crux of the matter, only to realize we want the function code, while eliminating the cumbersome process. Cycle of the elements do not, click () function will complete these operations. Similarly, the script does not need to call more than DOM. We only need to use a short string to define the required elements can be. We use the $ () function - jQuery the most powerful function. Usually, we are using this function to select elements from the document. In this case, a cascading style sheet that contains some (Cascading Style Sheet, CSS) syntax of the string is passed to the function, then jQuery as efficiently as possible to find out these elements. # External_links used to retrieve the id for the external_links elements. JQuery after a space that needs to retrieve all the elements external_links <a> elements. $ () Function returns a CSS selector that contains all the elements of the jQuery object matching. jQuery object similar to the array, but it comes with a large number of special jQuery functions. This example is just a brief overview of jQuery's operations, more detailed operation on the jQuery functions jQuery can see the API, the jQuery jQuery official website and various communities can be downloaded by jQuery's API.
jQuery's applicability on the one hand due to its design, on the other hand benefit from the emergence of open source projects around the active role of the community. jQuery engineers for engineers in addition to providing a flexible and stable outside the system, jQuery's final product is free for everybody.
4. JQuery implementation of the AJAX
During the development process using the jQuery 4.1 jQuery's AJAX-based development, we must be prepared to JavaScript development environment and jquery.js the library. The examples use the development environment is IntelliJ [7] IDEA 7.0.3, use IntelliJ because Intellij IDEA is a comprehensive Java programming environment, it can be said to support JavaScript, the best of all IDEA, its strong Accessibility write JavaScript code on the ability of weak or very fear of JavaScript code, but who is the best choice. Also, jQuery v.1.3.2 release the latest version is available from jQuery's official website (http://jquery.com/) to download the js file to get a jquery.js we develop in this paper is to use the js file . During development so long as this jquery.js in a public place, in the corresponding page into the can.
This example is a simple check whether there are examples of user name, in this case the jQuery application includes four parts: Html documents, for the acts of the page to add JavaScript file, another is the web.xml configuration file and use the Java language simple scenes, the background operation is the most basic background operation and does not include a complex approach, we focus our effort on the implementation of jQuery, but we can back-needed expansion of operations. Code section contains information about comments, these comments very good explanation of the information is almost end of each code operation role.
First, open IntelliJ, create a new Project (IntelliJ in the Project equal to Eclips in WorkSpace, the work space), followed by a new Module, is a project, then in the web directory under the Module to create a new Html document, name jquery.html, the code is as follows:
<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN"
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title> verify the existence of the user name </ title>
<! - Here should pay attention to the introduction of jQuery library file <script> label must be placed into the custom script file before <script> tag ->
<script type="text/javascript" src="jslib/jquery.js"> </ script>
<script type="text/javascript" src="jslib/verify.js"> </ script>
</ Head>
Check the jQuery instance of the user name, please enter your user name: <br/>
<! - Ajax mode data does not need to use form to submit, so do not write the form tag ->
<! - Ajax way without name attribute, need a id attribute ->
<input type="text" />
<input type="button" value=" Validation ">
<! - Div returned for storage of information server, start the air, div is the CSS in the block-level element ->
<! - Id attribute definition is to find the node for operation ->
<! - This div is to receive and display the data returned by the server side ->
<div> </ div>
</ Body>
</ Html>
Then in the Module directory under the web folder create a new jslib this jslib js folder for storing files, create a new directory this jslib jquery.js, open the empty js file to download in advance good jquery. js to open, copy the code inside the jslib directory jquery.js file, this is mainly due to IntelliJ does not support direct copy the following files in the project. And then create a new directory in the jslib verify.js, verify.js code as follows:
function verify () (
var url = "JqueryServer? name =" + $ ("# userName"). val ();
url = converURL (url);
$. Get (url, null, function (data) (
$ ("# Result"). Html (data);
/ / To the url address to increase the time stamp, fool the browser, does not read cache
function converURL (url) (
/ / Get the timestamp
var timstamp = new Date (). valueOf ();
/ / The time stamp on products spliced to the url
/ / Url = "JqueryServer"
if (url.indexOf ("?")>= 0) (
url = url + "& t =" + timstamp;
) Else (
url = url + "? t =" + timstamp;
return url;
Then in the src directory under the Module to create a new JqueryServer.java file, this file is a simple background operation. Code is as follows:
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLEncoder;
import java.net.URLDecoder;
public class JqueryServer extends HttpServlet (
protected void doGet (HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException (
try (
httpServletResponse.setContentType ("text / html; charset = utf-8");
PrintWriter out = httpServletResponse.getWriter ();
/ / Here to join the operation code Session is mainly to explain how to resolve browser cache problems
/ / Use of time stamps in verify.js, fool the browser, does not read the cache.
Integer inte = (Integer) httpServletRequest.getSession (). GetAttribute ("total");
int temp = 0;
if (inte == null) (
temp = 1;
httpServletRequest.getSession (). setAttribute ("total", temp);
) Else (
temp = inte.intValue () +1;
httpServletRequest.getSession (). setAttribute ("total", temp);
/ / 1. Get the page parameter information are sent by client
String old = httpServletRequest.getParameter ("name");
/ / 2. Check whether the parameters of transmission over the issue
if (old == null | | old.length () == 0) (
out.println ("User name can not be null!");
) Else (
/ / 3. To verify operation
/ / Here can be extended depending on the circumstances, such as the preparation of complex business layer, from the database / / read data.
String name = old;
if (name.equals ("qq")) (
/ / 4. And the difference between the traditional way: the user data of interest (data) to return to, but / / not re-turned to a new view layer. But as with the traditional formulation, but not the same in real terms
out.println ("User name" + name + "already exists, another user name" + temp);
) Else
out.println ("User Name [" + name + "] does not exist, you can register!" + temp);
) Catch (Exception e)
e.printStackTrace ();

protected void doPost (HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException (
doGet (httpServletRequest, httpServletResponse);
Just after the preparation of the necessary configuration Servlet, in the WEB-INF directory of the web.xml configuration file to configure, the code is as follows:
<? Xml version = "1.0" encoding = "UTF-8"?>
<Web-app xmlns = "http://java.sun.com/xml/ns/javaee"
xmlns: xsi = "http://www.w3.org/2001/XMLSchema-instance"
xsi: schemaLocation = "http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd "
version = "2.5">
<servlet-name> JqueryServer </ servlet-name>
<servlet-class> JqueryServer </ servlet-class>
</ Servlet>
<servlet-name> JqueryServer </ servlet-name>
<url-pattern> / JqueryServer </ url-pattern>
</ Servlet-mapping>
</ Web-app>
These are complete, you can put this simple application deployment on the server, and in this instance the server is Tomcat6.0, in the browser address bar http://localhost:8080/jquery.html can.
Chinese garbled jQuery 4.2 solution and browser cache problem over the instance of a defect in Chinese garbage problem, then introduce the two programs to solve the Chinese garbled. First: the data is issued in verify.js do a encodeURI operation, code changes part:
var url = "AJAXServer? name =" + encodeURI ($("# userName "). val ());
Also on the server side JqueryServer.java also to make changes, that is, after obtaining the data, adding such a code String name = new String (old.getBytes ("iso8859-1"), "UTF-8"); then the following of a code: String name = old; delete.
Second: the data sent in verify.js done in two encodeURI operation, code changes part:
var url = "AJAXServer? name =" + encodeURI (encodeURI ($("# userName "). val ()));
Also on the server side JqueryServer.java also to make changes, that is, after obtaining the data, adding such a code String name = URLDecoder.decode (old, "UTF-8"); then following a code: String name = old ; delete.
In both methods the author recommends using the second method.
In addition, JqueryServer.java this file to do the deal by adding the corresponding session aims to introduce the browser cache problem, the code is as follows:
Integer inte = (Integer) httpServletRequest.getSession (). GetAttribute ("total");
int temp = 0;
if (inte == null) (
temp = 1;
httpServletRequest.getSession (). setAttribute ("total", temp);
) Else (
temp = inte.intValue () +1;
httpServletRequest.getSession (). setAttribute ("total", temp);
In verify.js document, use the time stamp fool the browser cache does not read the main approach is to use the timestamp to change URL addresses, the code is as follows:
/ / To the url address to increase the time stamp, fool the browser, does not read cache
function converURL (url) (
/ / Get the timestamp
var timstamp = new Date (). valueOf ();
/ / The time stamp on products spliced to the url
/ / Url = "JqueryServer"
if (url.indexOf ("?")>= 0) (
url = url + "& t =" + timstamp;
) Else (
url = url + "? t =" + timstamp;
return url;
Call $. Get () before, simply use converURL () function to convert the URL with the timestamp can be. Code:
url = converURL (url);
In this way, we solved the jQuery Chinese garbled and browser cache problem. While this is a simple use case, but one solution jQuery Chinese garbled and browser cache problem in the practical application of skills among the good.
5. Conclusions In this paper, realization of the jQuery AJAX applications studied, briefly introduced the AJAX, the AJAX framework for analysis and research technology and its best to resolve the substantive issues. Can be concluded, Ajax framework through asynchronous data request, the fine effect of UI is changing people's views of Web applications [8]. The application of AJAX technology and traditional WEB a comparative study shows that the AJAX applications with asynchronous interaction and increase the user experience and so on. JQuery AJAX applications for development in the role of the analysis, and to achieve a complete example of this instance of a detailed analysis, by this example, use time stamps to resolve browser cache problems and offered two ways to solve jQuery The Chinese disorderly, these two problems the solution of actual application development has a good guide.
Ajax technology in J2EE Web applications in research and development of J2EE will become the mainstream, other, jQuery has been recognized as ASP.NET MVC and Visul Studio in future versions of the formal components of the mobile phone platform Nokia Web Run-Time is also will be included, such a development environment, jQuery will certainly have an even broader space for development.

[1] Tim O'Reilly. Web2.0. http://www.enet.com.cn/article/2005/1122/A20051122474593.shtml, 2005-11-22.
[2] http://jquery.com ,2009-11-19.
[3] Anne van Kesteren. W3C Working Draft. http://www.w3.org/TR/XMLHttpRequest/ ,2009-11-19.
[4] JESSE JAMES GARRETT. Ajax: A new approach to Web applications [EB / OL].
[5] Jesse Skinner. Simplify Ajax development using jQuery.
[6] Jonathan Chaffer, Karl Swedbeger. jQuery Essentials [M]. Willington Lee Li Wei. Beijing: People's Education Press, 2008.
[7] http://baike.baidu.com/view/1654125.htm?fr=ala0_1.
[8] Dong-Hua Zhang. Ajax framework in J2EE architecture and application of [D]. Qingdao: China Ocean University, 2008.

The Research of AJAX application based on jQuery

In the current boom of the Web2.0, AJAX is attracting the world's eyes, becoming the most talked-about technical terms by people of the word. AJAX has improved experience of the users in WEB application. The creation and use of jQuery has simplified the development of AJAX greatly. In this paper, first, the author have a compare and analysis between the AJAX and traditional development of the Web, and expound advantage of the asynchronous, second, show the characteristics of jQuery in the specific applications through an example , at last, have a summary on the paper, then look into the future about AJAX and jQuery.
Keywords: jQuery, AJAX, Asynchronous, XMLHttpRequest

分类:Web 时间:2010-03-09 人气:612
blog comments powered by Disqus


  • Ajax based applications 2010-08-13

    Here's how to create XMLHttpRequest XMLHttpRequest class first by the introduction of Internet Explorer with ActiveX object, called XMLHTTP. Later, Netscape Mozilla ﹑ ﹑ Safari and other browsers also provide a XMLHttpRequest class, but they create th

  • Use of jQuery, Part 3: Using jQuery and Ajax Building Rich Internet Applications 2010-04-23

    Effects and Ajax ( Reprinted from ) <script type="text/javascript"> </ script> <noscript> </ noscript> <noscript> </ noscript> Sample code English original <! - START RESERVED FOR FUTURE USE INCLUDE FILES -

  • JQUERY and AJAX applications Xiangjie 1 2010-06-05

    6.1 Ajax history </ font> </ p> <p> <font size="2"> AJAX all called "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML), is a kind of creating interactive web applications, web development techno

  • Based on jQuery's AJAX and JSON data to achieve pure html templates 2010-07-28

    Built-in AJAX through jQuery function, direct access to the backstage access JSON data format, and then jQuer the data binding to a pre-designed html templates, directly on the page display. We first look at the html template: <table border="1&quo

  • zt strongly recommended more than 240 jQuery plugin ajax with Google speed up your application 2010-09-28

    More than 240 highly recommended jQuery plugin ajax with Google speed up your application zt Overview jQuery is the second prototype followed by an excellent Javascript framework. Its purpose is to - write less code and do more things. It is lightwei

  • JQuery's AJAX cross-domain to solve the problem take xml 2009-07-12

    Problem Description: 1. According to the known url, get url in the id, and then spliced out another url, to get the id corresponding value. For example: Known url: http://video.guoshi.com/play/index/4b6a3c233b4cb.html?peixun=1&start=680000 Get id of:

  • JQuery's AJAX cross-domain access to solve the problem xml 2010-03-07

    Problem description: 1. According to the known url, get url in the id, and then spliced to another url, to obtain the corresponding value of the id. For example: Known url: http://video.guoshi.com/play/index/4b6a3c233b4cb.html?peixun=1&start=680000 A

  • jQuery's ajax after summing up the data-processing 2009-10-25

    jQuery's ajax after basically three kinds of data formats: html, xml, json. $.ajax({ url : "/trundle/RawContentAction.getAjaxContent.act", data : "param1=22", dataType : "json",// Here, dataType is returned back to the data f

  • jQuery's ajax mass participation Using JSON 2010-05-10

    jQuery's ajax call is easy, when the transmission parameter like to use Json data format. For example: JavaScript code to add a comment function AddComment (content) ( var threadId = $ ("# span_thread_id"). html (); var groupId = $ ("# span

  • JQuery's Ajax submit 2010-06-08

    View of the project needs to start watching Demo edge using JQuery. Project now being encountered in the use JQuery for Ajax submission of three ways to be a summary. Because there is no systematic study, a little cottage, just to function in the pro

iOS 开发

Android 开发

Python 开发



PHP 开发

Ruby 开发






Javascript 开发

.NET 开发



Copyright (C) codeweblog.com, All Rights Reserved.

CodeWeblog.com 版权所有 闽ICP备15018612号

processed in 0.049 (s). 13 q(s)