Ajax technical details
Overview: the technology that allows the browser to communicate with the server without refreshing the current page is called Ajax. The core of AJAX is the JavaScript Object XMLHttpRequest.
Analysis: Before using Ajax, you must create an XMLHTTPRequest object. The method of creating an XMLHTTPRequest object varies with the browser. After the object is created successfully, we need to use the method in this object to request the background, and then use the property of this object to obtain the data returned by the background, and then we have completed the asynchronous request.
1. Create XMLHttpRequest.
Function createxmlhttprequest () {var XMLHTTP; try {// XMLHTTP = new XMLHttpRequest ();} catch (Ex) in non-ie browsers such as Firefox Opera) {try {// xml http = new activexobject ("msxml2.xmlhttp");} catch (e) {XMLHTTP = new activexobject ("Microsoft. XMLHTTP ");}}
Return XMLHTTP;
}
Ii. Define Request Parameters
Use the XMLHTTPRequest object to call the open method to define the request parameters, and determine the submission method, URL, and request method. XMLHTTP. Open ("get", "./servlet/employeeservlet", true );
Parameter 1: indicates that the request is submitted in the same way as the method in form. The value is generally get post.
Parameter 2: indicates the requested address, which can be a relative or absolute path. Generally, a random number or millisecond value is added to indicate the uniqueness of the address.
Parameter 3: Indicates whether asynchronous request is used. If it is false, it indicates synchronous request, which is generally true.
If a POST request is submitted, a request header must be specified.
XMLHTTP. setRequestHeader ("Content-Type", "application/X-WWW-form-urlencoded ");
3. Send a request
If it is post, you can specify the parameter and use the & symbol for multiple connections. If you use get, it is generally set to null. XMLHTTP. Send ("nowpage =" + nowpage );
4. You have used the request object in the background to obtain your parameters. Then you can perform background processing and return the processing results and data pipeline to the foreground.
5. receiving data from the backend on the front-end server
XMLHTTP. onreadystatechange = function () {// the system automatically calls this event.
If (XMLHTTP. readystate = 4) {judge the status. If it is 4, the request is successful.
If (XMLHTTP. Status = 200) {// indicates that the page is correct
XMLHTTP. responsetext;
If it is XML, you can use XMLHTTP. responsexml to obtain XML objects and directly access node operations.
}
}
}
6. XMLHttpRequest methods and attributes
7. instance code: the city is connected, and the background is not released yet.
<% @ Page Language = "Java" Import = "Java. util. * "pageencoding =" UTF-8 "%> <% string Path = request. getcontextpath (); string basepath = request. getscheme () + ": //" + request. getservername () + ":" + request. getserverport () + path + "/"; %> <! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en"> <HTML>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
