Ajax object Properties and methods:
Abort ()--Cancel Request
getAllResponseHeaders ()--Get all HTTP headers for the response
getResponseHeader ()--Gets the specified HTTP header
Open (Method,url)--Create request, method for request type Get/post
Send ()--Sends a request
setRequestHeader ()--Specifies the requested HTTP
onreadystatechange--event Control object when any state changes occur
Status of the readystate--request: (1) 0-not initialized, (2) 1-request is being sent, (3) 2-Request completed, (4) 3-Request succeeded, receiving data; (5) 4-Data received successfully
responsetext--the text returned by the server
The XML returned by the responsexml--server can be treated as a DOM
status--server returns HTTP, request response status, commonly used are:
200-Indicates a successful request
202-Request accepted but processing not completed
400-Bad Request
404-Resource Not Found
500-server internal errors, such as JSP code errors or Java code
Ajax sends a request STEP code: * * *
1. Get Ajax objects
var xhr = GETXHR ()
function Getxhr () {
var xhr = null;
if (window. XMLHttpRequest) {
XHR = new XMLHttpRequest ();
}else{
XHR = new ActiveXObject (' microsoft.xmlhttp ');
}
return XHR;
}
2.1: Send GET request
Xhr.open (' Get ', uri,true);
The open () method can be understood as preparation, filling in the information before sending the request.
The first parameter location, which uses "get" to send a GET request.
The second parameter location, fill in the address of the sending request, if you need to carry the parameter value in the address when sending the GET request, you can pass the "? "The way to append the" Name=value "object
The third parameter position, which is a Boolean-type value. When the Boolean value is true, the server request is asynchronous, that is, the script executes the Send () method without waiting for the result of the server execution, but continues to execute the script code, when the Boolean value is False, the server request is synchronous, That is, the script executes the Send () method and waits for the result of the execution of the server to return, and if it times out during the wait, no longer waits, and then executes the script code that follows!
Note: This method does not have a real send request.
Xhr.open (' Get ', ' xx.do?uname=bear ', true);
Xhr.onreadystatechange = fn;
Xhr.send (NULL);
2.2: Send a POST request-the first three steps are the same as a GET request, and the POST request sends the request parameter as a parameter to send ().
(1) Creating an Ajax object
(2) Set the necessary data before the Ajax object sends the request through the open () method
(3) Specifying the method of event response
(4) Call the Send () method to initiate the request
Xhr.open (' Post ', ' xx.do ', true);
Xhr.setrequestheader (' Content-type ', ' applicaton/x-www-form-urlencoded ');
Xhr.onreadystatechange = fn;
Xhr.send (' uname = Bear ');
4. Writing background Java code
public class Actionservlet extends HttpServlet {
public void Service (HttpServletRequest request, httpservletresponse response)
Throws Servletexception, IOException {
Request.setcharacterencoding ("Utf-8");
Response.setcontenttype (
"Text/html;charset=utf-8");
PrintWriter out = Response.getwriter ();
String uri = Request.getrequesturi ();
String action = uri.substring (Uri.lastindexof ("/"), Uri.lastindexof ("."));
if (Action.equals ("/check_username")) {
String username = request.getparameter ("username");
if ("Wang Cubs". Equals (username)) {
Out.println ("User name already exists");
}else{
Out.println ("can be used");
}
}
Out.close ();
}
}
5. Writing event handler functions
Xhr.onreadystatechange=function () {
if (xhr.readystate = = 4 && xhr.status==200) {
var txt = xhr.responsetext;
Positioning DOM nodes, adding text, Implementing refreshes
$ (' s2 '). InnerHTML = ';
}
};
Troubleshooting get requests with garbled issues:
Step1. Specify the character set to decode--tomcat the installation path can be modified in the Conf/server.xml file <connector uriencoding= "UTF-8" > (70 Rows or so), Enables Tomcat to decode in UTF-8 manner.
Step2. Use encodeURI to encode the requested address. encodeURI will use Utf-8 to encode the Chinese parameters in the request address for IE
var uri = ' xxx.do?uname= ' + $F (' username ');
Xhr.open (' Get ', encodeURI (URI), true);
Garbled issue when resolving post requests:
Step1. Service side
Request.setcharacterencoding ("Utf-8");
Response.setcontenttype ("Text/html;charset=utf-8");
Step2. Client
function Check_username () {
Get Ajax objects
var xhr = getxhr ();
Send Request
var uri = ' check_username.do?username= ' + $F (' username ');
Xhr.open (' Get ', encodeURI (URI), true);
Xhr.onreadystatechange=function () {
/* Only xhr readystate equals 4 o'clock, HR obtains all data returned by the server. */
if (xhr.readystate = = 4 && xhr.status = = 200) {
Correct data
var txt = xhr.responsetext;
$ (' username_msg '). InnerHTML = txt;
}else{
An error has occurred
$ (' username_msg '). InnerHTML = ' Error verifying user name ';
}
};
$ (' username_msg '). InnerHTML = ' checking ... ';
Xhr.send (NULL);
}
Non-encapsulated Ajax and Chinese garbled problem