ISBN 978-952-5726-07-7 (Print), 978-952-5726-08-4 (CD-ROM) Proceedings of the Second Symposium International Computer Science and Computational Technology(ISCSCT ’09) Huangshan, P. R. China, 26-28,Dec. 2009, pp. 170-174
Effective Bandwidth Management Using Ajax Technology for E-Learning Gaudence Uwamahoro1, and Zuping Zhang 2 1
Central South University/School of Information Science and Engineering, Changsha, China Email:
[email protected] 2 Central South University/School of Information Science and Engineering, Changsha, China Email:
[email protected]
Abstract—New technique for web development is emerged as a powerful platform for building web applications with extensive client-side interactivity. The Ajax technology which is based on existing web technologies nowadays is used to build more responsive web applications. Ajax makes a significant advancement in a website. It delivers web contents better, smarter and richer. Ajax enhances the user’s experience of application significantly with improvement of interactivity and speed in the application. The benefits of Ajax are adapted by E-learning to serve the application to be faster and responsive in order to help students to interact with the system, especially during the examination. With this new technology, amount of Elearning server load will be more decreased and traffic data between server and student computer will be reduced at maximum, which will help the student to get enough time to do the exam. Only small page bits are requested and sent to the browser as they are requested by the student, not the whole page at once, and as well small data will be transferred from the student’s computer to the server which will reduce the E-learning web server load and so decreasing the bandwidth usage.
Reducing the data transfer between E-learning server and student’s computer can decrease the efficient use of bandwidth and the server load problems. In Ref. [6], the Ajax (Asynchronous JavaScript and XML) technology is used to solve those problems using the ability of sending and receiving necessary information and this will reduces web server load. Ajax is an emerging advanced technique used in web development to make web content faster and is a worktogether of several pre-existing technologies. During the process of examination, the student does not have to undergo any kind of interruption. From Ref. [4], Ajax application avoids any interruption that can occur during interaction using Ajax engine as a new layer between web server and user to make application more responsive. The process the student uses in the examination has impact on results. If the student does the first question of the exam and if amount of data transferred between server and student’s computer is minimized, that can make examination process faster. We propose the development of E-learning web application using client-side caching and Ajax in order to minimize the number of client requests to the server. Better performance, more responsive interface and reduced or eliminated waiting time are the advantages that E-learning beneficiates using Ajax. Small amount of data transferred from the server as well as reduced number of client requests to the server is a result that shows a significantly high performance of Ajax application that also makes the Ajax technique special for data intensive application as well as for low bandwidth networks. The improved performance leads to much more responsive interfaces, which create the illusion that updates are happening instantly. As stated in Ref. [1], Ref. [3] and Ref. [6], in Ajax-based applications only the relevant page elements are updated with the rest of the page remaining unchanged and this approach eliminates the white screen and significantly decreases the idle waiting time.
Index Terms—Ajax, E-learning
I. INTRODUCTION Nowadays internet is used as source of knowledge in this world where people are intending to acquire knowledge as quick as possible using learning via internet. As reported in Ref. [5], Web based learning often called online learning or E-learning has become a new way in learning. E-learning is used by many universities in developing countries to promote the education of their people. Current E-learning technology has some drawbacks in its processing that can be obstacle for the student who is intended to get all satisfaction while he is learning. The student needs E-learning to be faster and responsive for a good interaction. After finishing course, the student is evaluated from the exam passed. The examination process has to be considered with more importance because it is an evaluation tool for a student to know his understanding level of the course. Lack of enough bandwidth, can weaken the examination process.
II. RELATED WORK Many researchers in software engineering have worked on web applications area, especially dynamic web applications. The traditional web applications like Elearning enables more bandwidth and server load where the server is required to load a full page for every request.
Supported by Hunan Province Natural Science Fund under Grant No. 07JJ6122 and Postdoctoral Science Fund of Central South University.
Corresponding author, Zhang Zuping. © 2009 ACADEMY PUBLISHER AP-PROC-CS-09CN005
170
As reported in Ref. [9], Ajax engine requests information from the web server asynchronously. That means that the user can continue to perform other actions while the request is processed by the server, which is different from the synchronous system used in classic
The emergence of advanced web technologies was the reason for the web applications developers tried to improve the traditional web applications using Ajax. A pertinent example has been the case of E-learning web applications. Many researchers on E-learning have used that technology for its improvement. Examination process is a very important part of E-learning that interested many researchers. From Ref. [3], the data transfer between the server and student computer can allow efficiently use of the bandwidth and reduce server load using Ajax to minimize traffic between student computer and server. In examination process when many students are considered to start at the same time, the server loads the full page. At the second time when all students start for the first question, the next question is downloaded from the server. After finishing one question, the answer is sent to the server and so on. Downloading all questions at the same time takes a long time and sending each one response alone, will lead to the waste of bandwidth usage and server load which is not enough to make examination faster and convenient to the student and that is why we propose caching method to minimize the number of requests sent to the server and reducing time of request in order to make E-learning more efficient. This method shall solve the problem of lack of enough bandwidth and server load, considered as obstacle for student during the exam.
Figure1. A traditional web application is a synchronous system
III. AJAX OVERVIEW In this paper we proposed Ajax (Asynchronous JavaScript and XML), an emerged technology for web applications that helps to build more interactive web applications. This technology was coined by Jesse James Garrett in 2005. Ajax is not really a new technology because it is a combination of existing technologies which are already in use by traditional web applications. Ajax uses HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) for data presentation, DOM (Document Object Model) for dynamic display and interaction, XML (Extensible Markup Language) and XSLT (Extensible StyleSheet Language Transformations) for data interchange and manipulation, XMLHttpRequest for data retrieval, and JavaScript which binds everything together. In the classic web applications, the communication is performed using directly http Request. From literatures of Ref. [4] and Ref. [6], Ajax architecture differs from today's web applications architecture by adding a client-side engine called Ajax engine used as intermediate or new layer between user interface and server. The user activity leads to program calls to the client-side engine instead of a page request to the server and XML data transfer between server and the client-side engine. Moreover, Ajax engine is a collection of JavaScript code that instantiates and uses XMLHttpRequest object to handle all communication with the server. As without this engine every user event would go back to the server for processing. All requests for data to the server are sent as JavaScript calls to this engine. 171
web application which requires the user to wait for the server refreshing entire page in order to send him/her the first page of system before he/she can request the second which makes user operation interrupted as shown in Fig. 1 above. Using Ajax, the page is loaded entirely only once the first time it is requested. After the page is loaded Ajax engine displays only the information needed by the user without reloading the entire page. Thus the waiting time is beneficiated and the web server load is reduced. As Ajax is asynchronous system as reported in Ref. [6] and Ref. [9], they noticed that when a user sends a request to the server, there will be neither waiting nor interruption for response. Because of that fact, the student after finishing a question he/she sends the response and starts the next question immediately. This produces the feeling that the information is displayed immediately as in Fig. 2.
Figure 2. An Ajax web application is an asynchronous system
From Fig. 3, we were comparing classic web and Ajax technologies. We noticed that synchronous system can communicate directly with the server using http request whereas asynchronous system can communicate with a new layer between server and browser. In synchronous system, when the user requests a page for the first time the server sends full HTML and CSS code at once ass is shown in Fig. 3.
That can happen when the student starts the exam and requests for the first question. After the page is loaded; if the user requests for the next question, the server processes the information, rebuilds the page and sends full page back to the browser Ref. [1] and that is shown in Fig. 3.
Figure 4. E-learning caching model
A. Reduce Server Load and Minimize Size of Response The application consists of a typical page layout with a central section containing the changing content. The header, footer and navigation menu do not change during the application operation. Using traditional method, that content would have to be reloaded on every request. Ajax helps to reduce server load by not reloading a page where Ajax is used. However, using Ajax, a web application can request only the content that needs to be updated, thus drastically reducing bandwidth usage and load time. If the student starts the exam, E-learning server must load full page that contains header, navigation menu, footer and body where body contains the first question at the first time. In the traditional method, when student requests the second question, the server loads again a page with header, navigation menu and footer and second question. That increases loading time and bandwidth misusing. But using Ajax, Ajax engine requests only the second question without reloading whole page. Fig. 5 illustrates an example. Let 50KB be the size of header and 3.12s (seconds) be the time used to load it. Let 40K be the size of navigation menu and 2.5s is the time to load the navigation menu. The size of footer is 30KB and 1.85s are needed to load it. The total size of header, navigation menu and footer is 120 KB and the size of each question is not fixed. The question one has 8KB and server use 0.5s to load it, the question 2 has 6KB and is loaded using 0.37s . For the first time the server loads entire page that has 128KB as size and 7.97s for loading time. For the second question, the server loads 126KB and that takes 7.84s. Using Ajax, instead of loading 120KB, the server loads only 6KB for the second question using 7.84s because that size is only data needed by student to do the question 2. The same process is used for question 3, question 4 and question 5 as is shown on Table I below. The following abbreviations are used in Table I. Q represents question, HS represents header size, TL represents time to load, MS is used to represent menu size, FS for footer size, TT represent total time, TSL
Figure 3. Comparison of classic web application model and Ajax web application model
In Ajax application communication model, the full page is loaded only one time when a user requests for a page for the first time as is in synchronous system or classic web application communication model. When the user makes a new request considered as next question, the Ajax requests only for small information to the server and displays the returned information without reloading the entire page. In this process JavaScript is used for asynchronous request and retrieves data from remote server and it is also used to extract data from XML. XML is used to collect numerical or text style data to the browser. Displaying of information returned from the server is done by HTML and CSS. IV. CACHING METHOD We propose a new approach that uses client caching using JavaScript associative arrays as client cache to make e-learning faster and more responsive. Our proposed method comes to support improvement of examination process by minimizing the request bandwidth usage and time request. For the first time, the server loads full page once when student requests the first question. If the student starts the first question, Ajax engine is responsible for making further request of other questions and stores them into the client cache. A second cache is used to store the answers. If some questions are present in the answer cache, the Ajax engine would make further request with the transportation of an answer to provide efficient usage of the bandwidth. After finishing all questions, the student will submit the examination answers to the server, in this case only those answers which are remained in the answer cache will be sent to the server. The fig.4 above shows the interaction process of E-learning especially in examination using Ajax.
172
TABLE I MEASUREMENT OF AJAX WEB PAGE SIZE
Q
HS
MS
FS
&TT
&TT
&TL
QS
QLT
TT
TSL
Q1
50
3.12
40
2.5
30
1.85
8
0.5
7.97
128
Q2
50
3.12
40
2.5
30
1.85
6
0.37
7.84
126
Q3
50
3.12
40
2.5
30
1.85
3
0.18
7.65
123
Q4
50
3.12
40
2.5
30
1.85
12
0.75
8.22
132
Q5
50
3.12
40
2.5
30
1.85
7
0.43
7.9
127
represents total size to be loaded, QS represents question size and QLT is used to represent question load time. We assume that we have used the internet connection of 128kbps to calculate loading time. Ajax eliminates the common contents that are header, navigation menu and footer that are reloaded on every request of question. Thus, the loading time is decreased and a considerable amount of bandwidth usage could be saved. In the Table I above the unit of HS is KB, TT unit is s(seconds), MS unit is KB, TT unit is s, FS unit is KB, TL unit is s, QS unit is KB, QLT unit is s, TT unit is s and TSL unit is KB. B. Minimize Number of Requests If we use caching method it is possible to minimize number of requests to the server in order to efficiently use the bandwidth and decrease the data traffic between server and client. When a student finishes a question, Ajax engine sends it to the answer cache. Consider the student starts the exam; when the first question is processed, the Ajax engine requests next question to the server and server responds by sending the question to the Ajax engine. Ajax engine as intermediate is responsible to know if it is necessary to send the question to the student. When the student finishes, he/she shall send answer and requests the next question. Ajax engine sends the answer to the answers data cache and sends the next question requested by the student at the same time from the questions data cache. Sending the question from the answers data cache reduces time of request. Ajax engine is responsible to know when to transmit answers to the server according to the number of responses in the answers data cache. If the answer has a big size, it can be transmitted alone, but the answers with small size are aggregated before being sent to the server. When data is transmitted from the client computer to server, there is some information called headers added to the data to allow moving on the network. Headers are different from layer to other. In Ref. [11], they noticed that when a layer receives a data it adds its own header before transmitting it to the next layer. In this paper we consider the headers used by the protocols in application layer, transport layer, network layer and data link layer. We use Http protocol with 566 bytes for header size. As stated in Ref. [10] and Ref. [12], the TCP (Transmission Control Protocol) header has fixed size of 20 bytes, the IP (Internet Protocol) header has 20 bytes and data link layer header has 22 bytes.
The size of data to send has impact on data transfer between E-learning server and the student’s computer. To send answer one by one to the server increases the data traffic and misuses the bandwidth. The answers data cache helps to make aggregation of requests from the answers stored in. Aggregation of multiple requests through data caching method reduces the number of requests to the server which allows efficient use of bandwidth to make network efficient. As each request to the server requires its own overhead, aggregating multiple answers in a single unit of request reduces the number of requests and the bandwidth is used efficiently because the size of overheads needed for each request is decreased. We are based on 5 questions prepared as exam. Let 30 bytes be the data size considered as the size of one question, 566 bytes for Http headers, 20 bytes for TCP header without any option, 20 bytes for IP header without any option and 22 bytes for header added by data link layer. Transmitting one answer needs 628 bytes of headers. The total size of one request is 658 bytes. Using classic web application technology which requires sending the answers to the server one by one without considering the size of request, sending every answer requires 658 bytes. Comparing to the Ajax technology and client caching method which allows aggregation of requests, it is possible to send one or more answers to the server in one request with only 628 bytes of header. The typical example illustrated at the Fig. 5. If we send one answer we need 658 bytes, but when we combine two answers in one request, only 688 bytes are needed, whereas the classic web application requires 1316 bytes to send two answers to the server. Thus, using Ajax the bandwidth is saved as shown on Fig. 5. The OT used at the figure represents old technology or classic technology. NT is used to represent new technology or Ajax technology.
Request size(Bytes)
3500 3000 2500 2000
OT NT
1500 1000 500 0 0
1
2 3 Number of Requests
4
5
Figure 5. Request size comparison between classic web application technology and Ajax technology
V. CONCLUSION In applications that have a significant part of each page containing content that is identical in multiple page requests, using Ajax-style methods to update only the relevant parts of a web page can bring significant bandwidth savings and reduce loading time. Caching 173
[4]
Matthew J. Travi, “Response Web Application Using Ajax,” unpublished. [5] Ridwan Sanjaya and Chaiyong Brahmawong, “Distance examination using Ajax to reduce web server load and student data transfer,” Forth International Conference on eLearning for Knowledge-Based Society, 24thSouth East Asia Regional Computer Conference, Sunday, November 18, 2007. [6] http://www.interaktonline.com/Support/Articles/Details/A JAX:+Asynchronously+Moving+ForwardHow+does+AJAX+work%3F.html?id_art=36&id_asc=30 8, 13 October 2009 [7] http://articles.sitepoint.com/article/build-your-own-ajaxweb-apps, 19 October 2009 [8] L.D. Paulson, “Building rich web applications with Ajax,” Computer, IEEE, vol.38, no.10, Oct.2005, pp.1417 [9] Tina Schmidt, “Routing and packet forwarding,” September2008, http://www14.informatik.tu-muenchen. de/konferenzen/Ferienakademie08/talks/tina_schmidt/pap er_schmidt_tina_routing_and_packet_forwarding.pdf, 20 October 2009 [10] http://web.uettaxila.edu.pk/CMS/seSPbsSp09/notes%5CT CP,IP,UDP%20Headers%20&%20TCP%20State%20Tra nsition%20Diagram.pdf(TCP-IP-UDP), September, 2009 [11] http://raider.muc.edu/~kirchmjf/SP2004/cs360/EthernetFr ame.htm, 15 October 2009
method also allows efficient usage of the bandwidth using aggregation of requests and reducing time of request using question data caching. That helps the student to do exam without any problem on bandwidth. ACKNOWLEDGMENT This work was supported in part by a grant from Hunan Province Natural Science Fund (No. 07JJ6122), Postdoctoral Science Fund of Central South University. REFERENCES [1]
[2]
[3]
Yen-Ting Lin, Yi-Chiun Chi, Lien-Chien Chang, ShuChen Cheng and Yueh-Min Huang “A web 2.0 Synchronous Learning Environment using Ajax,” Proceedings of the Ninth IEEE International Symposium on Multimedia Workshops, ISBN:0-7695-3084-2, Pages 453-458, 2007 http://www.interaktonline.com/Support/Articles/Details/A JAX:+Asynchronously+Moving+Forward-How+does +AJAX+work%3F.html?id_art=36&id_asc=308, 13 October 2009 Jesse James Garrett, “A New Approach to Web Applications,” January 2005 http://www.adaptivepath. com/publications/essays/archives/000385.php, 12 0ctober 2009
174
