Use ajax to asynchronously improve web application interaction (Xu Chengyu)

(Taiyuan Railway Bureau Information Technology Department, Taiyuan 030013 ) Abstract: traditional Web applications cannot provide the same rich client functions as desktop applications. While Ajax technology is an effective solution. This paper introduces the basic principles and technologies of Ajax, and uses Ajax technology in a railway safety vehicle accident analysis system. Keywords: Ajax; XML; XMLHTTPRequest object; Asynchronous interaction improving interactivity of Web application based on ajaxxu Cheng-yu (I Nformation and Technology Office, Taiyuan railways Bureau, Taiyuan 030013, China ) Abstract: Web applications couldn't offer abundant client function like desktop application. Ajax was such a technique which was a correct solution. It was introduced the principle of Ajax and a web application based on AJAX .. Key words: Ajax, XML; XMLHTTPRequest object; asynchronous interactivity with the rapid development of network technology, the IT industry is increasingly dependent on web systems in terms of providing commercial and other applications. How to improve the poor interaction ability of B/S architecture application systems on the client has been disturbing the design and developers of web systems. They have found many ways to enhance the interaction between client interfaces, these methods can only be said to realize some interactive methods of desktop applications, but they do not actually solve the problem. As the core application of Web2.0, AJAX can solve this problem well. Asynchronous interaction is a simple multi-thread. When necessary, the application does not need to refresh the entire page to update the content on the page. It is completely a "no refreshing" or "no blocking" process for users, in this process, asynchronous interactions work silently in the background, instead of being required as traditional B/S applications: HTTP requests must be submitted when users request to refresh the page content, then, force the user to submit, wait, and re-display the interaction result. 1. Traditional interactive solutions and their advantages and disadvantages In the process of developing Web applications, designers and developers have designed many methods to enhance the interaction of Web applications: 1.1. Use the showmodaldialog (URL) method called in the event processing function to open the request Page Link through showmodaldialog window. After the request is processed by the server, the window is closed immediately after it is opened, then, the script in the event processing function processes the data returned by the window. Disadvantage: You can only process mouse-click events. If it is a keyboard event, even the fastest network speed may delay the client. And the screen flashes. 1.2 use JS scripts. Generate all the basic data to the JS file, download it to the local device during page loading, or dynamically generate the Javascript array definition when loading the page. When processing events, analyze the array of JS files and then display the results. Advantages: the speed is fast and can be applied to various events, but the development is difficult, the script is complex, the function is single, the maintenance is complex, and the page source Program It is too large to speed up loading. 1.3 load scripts on the page as needed. Add a piece of JavaScript with no content to the page source program in advance Code And set the ID to dynamically load JavaScript code using the src attribute of the code segment during event processing. And execute the code. <Script language = JavaScript id = script_do type = text/JavaScript> </SCRIPT> <script language = JavaScript> function fun_do () {script_do.src = URL ;}</SCRIPT>. The advantage is that the response speed is fast and complicated business logic can be implemented. However, when processing a keyboard event, such as an onkeypress event, you can feel a certain delay. You can also use the hidden IFRAME. Based on the above three methods, we can see that although some functions of desktop applications are implemented, however, because Browser/Server is basically used in this disconnected Network Communication Mode of request/response, users will have to wait for the information returned by the server. 2. Ajax technology 2.1 Ajax Composition Ajax is short for Asynchronous JavaScript and XML. That is, "Asynchronous JavaScript and XML processing" or "non-synchronous JavaScript and XML technology", which is not a new language or technology, it is actually a combination of several technologies in a certain way, and plays their respective roles in the collaboration of the same Communist Party. It covers. (1) XMLHttpRequest: the XMLHTTPRequest object has been implemented in most browsers and has a simple interface that allows data to be transmitted from the client to the server. Then, data can be obtained through subsequent activities, however, the current operation is not interrupted. The data transmitted using XMLHttpRequest can be in any format, although the data in XML format is recommended from the name. (2) CSS: stacked style sheets. CSS provides a mechanism to separate application styles and designs from the content. In Ajax applications, user interface styles can be modified independently through CSS. (3) DHTML or dynamic HTML, used to dynamically update forms. Generally, HTML is marked by Div, span, and other dynamic HTML elements. (4) Dom: Document Object Model, used to process HTML structures (using JavaScript code) and (in some cases) the XML returned by the server. Use Dom to achieve dynamic display and interaction of Ajax applications. (5) javascript: javascript is an adhesive that integrates all parts of an Ajax application. JavaScript code is the core code for running Ajax applications.
2.2 Working Principle Ajax basically stores JavaScript and XMLHttpRequest objects between web pages and servers. When the logic is triggered, the data is sent to some JavaScript code instead of directly sent to the server. After the JavaScript code captures the data, it sends a request to the server. The request is sent asynchronously, that is, the JavaScript code (and the user) you do not have to wait for the response from the server. Therefore, you can continue to input data, scroll the screen, and use applications. The server then returns the response data to the JavaScript code, which determines how to process the data. It can operate the Dom to process data and update the page. It can also perform some calculation on the received data and send another request without user intervention. It can interact with the server as needed. The result is similar to the dynamic, rapid response, and highly interactive experience of desktop applications. 2.3 General Applicability Ajax becomes possible because many major browsers now provide objects that can carry out independent xml http requests. Internet Explorer 5 and later provide an XMLHTTP object, while mozilla-based browsers provide an XMLHTTPRequest object. These objects can request XML data from the server and process the data in a similar way. All technologies that can dynamically provide XML can use server-side Ajax components. Any Dynamic Web Technology (from ASP, PHP to JSP, Servlet) can act as an Ajax server. Because all popular browsers support JavaScript and necessary XMLHTTP request objects, and almost all web server technologies can generate xml (or any tag), the core Ajax technology is widely used. 3. Ajax implementation in Railway Safety Vehicle accident Comprehensive Analysis System 3.1 Background The Railway Safety Accident comprehensive analysis system is an important system for the statistical analysis of railway transportation accidents. Its basic information must be absolutely correct and serious. During design and development, the system adopts the B/S architecture. The vehicle accident overview table (safety supervision report 1) is the basic data source of the system. There are more than 60 data items, and more than 8000 "accident locations" are optional, "accident category" has more than 60 options, "line" has more than 530 options, and "responsible unit" has more than 1000 options. To standardize data input, you can only enter the pinyin code in the desktop application system. The application retrieves qualified options based on the pinyin code and quickly updates them to the drop-down selection box, however, it is difficult to achieve such smooth operations in traditional Web applications. As the design and developer of the system, the author uses Ajax technology for implementation. The following describes how to input railway lines. 3.2 specific implementation (1) Create an XMLHttpRequest request object: the browser must use XMLHttpRequest or activexobject. The main difference between the two objects lies in the use of their browsers and the method of creating objects. <SCRIPT> function createrequestobject () {var ro; var browser = navigator. appname; If (Browser = "Microsoft Internet Explorer "){ RO = new activexobject ("Microsoft. XMLHTTP "); } Else {RO = new XMLHttpRequest ();} return ro ;}
VaR txtobj; // enter the text box (51aspx.com) VaR HTTP = createrequestobject (); </SCRIPT> (2) send a request: Create a request object, that is, prepare for sending a request to the server. The sndreq (txt, PYM) function is triggered when you enter the pinyin code of the line in the "line name" input field. The specific implementation is as follows: <Input type = "text" name = "line_name" onkeyup = "sndreq (this, this. Value);"> The called function has two parameters: the text box object and its value. The function is implemented as follows: <SCRIPT> function sndreq (txt, PYM) {txtobj = txt; // the text box currently obtained If (PYM = "") {return false ;} HTTP. Open ('get', 'quick _ ajax_retrun.jsp? Pym = '+ PYM, 'true'); // 51aspx.com HTTP. onreadystatechange = handleresponse; http. Send (null) ;}</SCRIPT> The function first sets the request object HTTP Of URL : HTTP. Open ("Get", URL, true ); " True "Indicates that it is asynchronous, Next, set the Receiving Method of the request return value: HTTP. onreadystatechange = handleresponse ; ( Handleresponse is the request Finally, send the request: Req. Send (null) . ( 3 ) The application processes the request: The application that processes the request is Quick_ajax_retrun.jsp is used to retrieve matching records from the database using the value of PYM as the matching condition of the pinyin code. Implementation is also relatively simple:, Use JDBC to connect to an Oracle database B, Organization query statement query database C, Before 50 The line name field data of a record is separated by commas (,) to form a string and return it to the client. ( 4 ) The client receives a request from the processing server: the client immediately calls the processing function of the request after receiving string data from the server. Application here Hmlhttprequest Object Responsetext Attribute, which is used to receive response information as a string. <SCRIPT> function handleresponse () {If (HTTP. readystate = 4) {var response = ""; If (HTTP. Status = 200) {try {response = http. responsetext; // obtain the returned string } Catch (exception) {response = "quick input is not supported by the browser ";} VaR lines = new array (); lines = response. Split (','); // convert to array Toosing_show (txtobj, quicksel, quicklays, lines); // refresh the list in the drop-down box. }}}</SCRIPT> The toosing_show function is a function that takes the text box, drop-down box, layer containing the drop-down box, and lines array as parameters. The function is to load the lines array into the drop-down box and locate the drop-down box below the text box, and displayed. The whole process makes people feel that the web program is completed immediately, the page is not submitted, and users get new data. Iv. Conclusion In addition to the system, Web Application Software Development also takes into account application interaction capabilities to facilitate user operations. Ajax technology provides an Interactive Choice for B/S architecture applications. Its Asynchronous interaction feature enables data exchange between pages, you do not need to refresh the entire page every time you submit a request. This article illustrates the powerful functions of Ajax in enhancing web application interaction through a specific project practice. As a technology, there is no fixed pattern for Ajax applications. The specific implementation methods should be designed based on specific applications to provide users with more convenient, fast, and timely services, this article hopes to serve as an example.