Native Ajax and its interaction with server (Java) Learning notes

Ajax is primarily used for asynchronous interaction with the server (and, of course, synchronous processing of the technology).

Because the traditional non-Ajax web interaction, is the entire browser to the background processing of data, the latter processing, the user can only wait, which is very inefficient. And the server returns the entire HTML page, and the user has to wait for the entire page to load. This is a very wasteful resource.

Ajax can be done when the user triggers the AJAX request, still able to operate, and the service processing and return the data without a page reload, and the user can get the desired data.

The following explains the AJAX request process directly from the code and corresponding annotations

1 functionButtononclick () {2     //page Data3     varinfo = ' content= ' + document.getElementById (' contentId ')). Value;4     //XHR Object5     varxhr;6     /*7 * The XMLHttpRequest object provides full access to the HTTP protocol, including the ability to make POST and HEAD requests, as well as normal GET requests. 8 * XMLHttpRequest can return the response of the WEB server synchronously or asynchronously, and can return content in the form of text or a DOM document. 9 * XMLHttpRequest is well supported by all modern browsers. The only browser dependencies involve the creation of XMLHttpRequest objects. In IE 5 andTen * IE 6, you must use the IE-specific ActiveXObject () constructor above instructions from W3school One      */ A     if(window. XMLHttpRequest) { -XHR =NewXMLHttpRequest (); -}Else { theXHR =NewActiveXObject (' Microsoft.XMLHTTP '); -     } -Xhr.onreadystatechange =function() { -         /* + * 0 uninitialized initialization state. The XMLHttpRequest object has been created or has been reset by the Abort () method. 1 Open - * The Open () method has been called, but the Send () method is not called. The request has not been sent yet. 2 Sent Send () method called, HTTP + * The request has been sent to the WEB server. The response was not received. 3 receiving all the response headers have been received. The response body begins to receive but is not completed. 4 Loaded A * HTTP response has been fully received. The value of readyState does not decrement at          */ -         if(Xhr.readystate = = 4) { -             //Status is the HTTP state code, too much content, not detailed expansion, broadly divided into five categories -             /* - * 1XX 100-101 information tip 2XX 200-206 success 3XX 300-305 redirect 4XX 400-415 client Error - * 5XX 500-505 Server error in              */ -             if(Xhr.status = = 200) {//indicates success to                 /* + * ResponseText response content as text -                  *  the * Responsexml response content as an XML document *                  */ $                 returnajaxsuccess (xhr.responsetext);Panax Notoginseng             } -         } the     } +     /* A * The first parameter is the Send request mode, common Post/get, not case-sensitive, but usually uppercase.  the * ' GET ' is used for regular requests and it applies to resources that are fully specified by the URL. When the request to the server does not have any side effects that are cacheable, + * ' POST ' is often used for requests that contain additional data -      *  $ * The second parameter is a URL $      *  - * The third parameter is whether the asynchronous request, the default is true, an asynchronous request -      */ theXhr.open (' POST ', '/webdemo/servletdemoa ',true); - Wuyi     /* the * The Content-type in Http headers generally have these three kinds: -      *  Wu * application/x-www-form-urlencoded: Data is encoded as a name/value pair. This is the standard encoding format.  -      *  About * Multipart/form-data: Data is encoded as a message, and each control on the page corresponds to a part of the message. Text/plain: $      *  - * The data is encoded in plain text (text/json/xml/html) and does not contain any control or formatting characters. The Postman software is marked with raw.  -      *  - * The Enctype property of the form is encoded in two common ways: application/x-www-form-urlencoded and Multipart/form-data, which are application/by default. X-www-form-urlencoded.  A      *  + * When uploading files.  the * That is, there is a type=file control, to use Multipart/form-data, specify that the transfer data is a binary type -      *  $ * When the action is post and the Content-type type is multipart/form-data, the browser splits the entire form in the control unit, the * and add content-disposition (form-data or file) to each section, Content-type (the default is Text/plain), name (control name), and a separator (boundary).  the      *  the * When action is get, the browser uses x-www-form-urlencoded encoding to convert the form data into a string (Name1=value1&name2=value2 ... ), then append the string to the URL, and use the? Split to load the new URL.  the      *  - * When the action is post, the browser encapsulates the form data into the HTTP body and then sends it to the server.  in * Because URL length is limited, the data of Get request is limited, and post infinite the      */ the     //Content-type detailed content see Content-type table AboutXhr.setrequestheader ("Content-type", "application/x-www-form-urlencoded"); the Xhr.send (info); the } the  + functionajaxsuccess (restxt) { -Console.log (' Success '); the Console.log (restxt);Bayi}

Simple and common native Ajax processes

The following is the servlet code

1 /**2 * @see Httpservlet#dopost (httpservletrequest request, HttpServletResponse3 * Response)4      */5ProtectedvoidDoPost (httpservletrequest request, httpservletresponse response)6 throws Servletexception, IOException {7         /*8 * In this example9 * Semicolon beforeTen * '/' before media format, common text application One * Text/plain for normal text A          *  - * '/' after the commonly used have - * HTML HTML code the * XML XML - * JavaScript js - * JSON JSON object - * See Content-type table in detail +          *  - * utf-8 for encoding format, not detailed deployment, all understand ....  +          */ AResponse.setcontenttype ("Text/plain;charset=utf-8"); at         //transfer of data to the foreground -         //response.getwriter (). Write ("Success"); -         //the object to complete the operation is Java.io.PrintWriter, passing the data through the IO output stream -PrintWriter writer =Response.getwriter (); -Writer.write ("Success"); -}

Additional Information

ContentType is the description of what the output data is to the server.

Ajax in Jqeury has an attribute datatype, which is used to describe the type of data to accept, cast, and possibly cause failure.

When datatype is not specified, it automatically infers and transforms the returned data, especially when the data type is indicated in ContentType.

If datatype is specified, the returned data is converted to datatype specified type regardless of the ContentType content.

Native Ajax and its interaction with server (Java) Learning notes