Getting started with Ajax (I)

1. Introduction
   1. Ajax is a new idea that uses JavaScript scripts to integrate xhtml css xml dom and other technologies, and uses xmlhttpresquest objects for asynchronous data requests, which improves user experience, it can be said that the emergence of various frameworks, such as ext dojo, was developed to improve user experience. The new idea is the purpose of our software design for users.
2. Difference with traditional Web requests
   1. It is different from the traditional web page data processing process and can be operated and processed asynchronously, that is, the user can simultaneously process the browser and server without waiting.
   2. See the following figure.
   3.  
      1. In a classic web application, after the browser submits data to the server, it needs to wait for the server to return the result to continue execution. The returned result is the entire page, which is generally an HTML page.
      2. The Ajax web does not need to wait for the server to return results. The browser can continue other operations, and the server does not necessarily return the entire page. The returned data is part of the data we need, select the format as needed, such as json xml.
3. Steps
   1. Obtain browser data
   3. Submit the obtained data to the server
   4. Receive Server Response Data
   5. Dynamically display accepted data on the page
4. Instance Introduction

Provincial/Municipal drop-down list cascade menu implementation

1. Interface

3. $ (Function () {// register the change event in the drop-down list box $ ('# dropprovince '). change (function () {// 1. obtain the id value var proid = $ (this) of the browser (select an item from the drop-down list ). val (); // The server address var url = ".. /hander/test. ashx? Proid = "+ proid // 2. use the get () method of jquery to submit data to the server $. get (URL, function (data) {// 3, 4. process the data returned from the server and load it to the interface. var dtjson = eval (data); // clear the data added during the last change to avoid accumulating values ('your dropcity'your .html (""); $ ("<option value =''> "+" select city "+" </option> "). appendto ($ ('# dropcity'); For (VAR I = 0; I <dtjson. length; I ++) {// create a new selection and add it to the drop-down list $ ("<option value =" + dtjson [I]. cityname + ">" + dtjson [I]. cityname + "</option> "). appendto ($ ('# dropcity '));}})});});

   Server code and convert data to JSON format

Public void processrequest (httpcontext context) {context. response. contenttype = "text/plain"; // string proid = context. request. querystring ["proid"]; // instantiate the operation class votemanager = new votemanager (); datatable dt = new datatable (); // execution method dt = votemanager. selectcitybyprovince (proid); // convert data to the JSON Format String strjson = datatabletojson ("JSON", DT); context. response. write (strjson); context. response. end () ;}// convert datatable data to the JSON data format Public String datatabletojson (string jsonname, datatable DT) {stringbuilder JSON = new stringbuilder (); JSON. append ("["); If (DT. rows. count> 0) {for (INT I = 0; I <DT. rows. count; I ++) {JSON. append ("{"); For (Int J = 0; j <DT. columns. count; j ++) {JSON. append (DT. columns [J]. columnname. tostring () + ": \" "+ dt. rows [I] [J]. tostring () + "\" "); If (j <DT. columns. count-1) {JSON. append (",") ;}} JSON. append ("}"); if (I <DT. rows. count-1) {JSON. append (",") ;}} JSON. append ("]"); Return JSON. tostring ();}

 

1. Application Prospects
   1. Since AJAX can solve and improve user experience, Ajax applications will inevitably be indispensable in Web development in the future, and its application prospects should be very broad.
   2. Ajax will make the browser a quick way to improve the user experience. It is possible that the browser will be more mined and used. As the Internet and network speed increase, in the future, it may replace some local software applications to make our computers lighter and more convenient.