Ajax core XMLHttpRequest summary, ajaxxmlhttprequest
Ajax: "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML), a comprehensive technology: Asynchronous data exchange using the JavaScript Object XMLHttpRequest; JavaScript DOM operations to achieve dynamic results; use XHTML + CSS to express information; use XML and XSLT to operate data. This article focuses on asynchronous data exchange between the XMLHttpRequest object and the server.
Usage
How to Use XMLHttpRequest in five steps:
Copy codeThe Code is as follows:
1. Create an object;
2. register the callback function;
3. Use the open method to set the basic information for interaction with the server;
4. Set the sent data to start interacting with the server;
5. Implement the callback function.
Each time an XMLHttpRequest object is applied, five steps are required. Therefore, you can encapsulate the use of the object into a js file, and pass some parameters to complete the corresponding functions using the method, the implementation is as follows:
Copy codeThe Code is as follows:
// Use the encapsulation method to provide only http request, url address, Data, success and failure callback Methods
// 1. Define the XMLHttpRequest object construction method
Var MyXMLHttpRequest = function (){
Var xmlhttprequest;
If (window. XMLHttpRequest ){
// IE7, IE8, FireFox, javasillar, Safari, Opera
// Alert ("IE7, IE8, FireFox, javasillar, Safari, Opera ");
Xmlhttprequest = new XMLHttpRequest ();
// Solve the problem that the browser may not work when there is no Text header in the server response
If (xmlhttprequest. overrideMimeType ){
Xmlhttprequest. overrideMimeType ("text/xml ");
}
} Else if (window. ActiveXObject ){
// IE6, IE5.5, IE5
Alert ("IE6, IE5.5, IE5 ");
Var activexName = ["MSXML2.XMLHTTP", "Microsoft. XMLHTTP"];
For (var n = 0; n
Scaling Problems
1. browser cache
2. Chinese garbled characters
3. Cross-origin access
You can change the url address to solve problems 1 and 3. Problem 1: You can add a timestamp at the end of the url address. Problem 3 is resolved through proxy. You only need to add the corresponding judgment before the execution in step 3 of send:
Copy codeThe Code is as follows:
// Solve cache conversion: Add Timestamp
If (url. indexOf ("? ")> = 0 ){
Url = url + "& t =" + (new Date ()). ValueOf ();
} Else {
Url = url + "? T = "+ (new Date ()). ValueOf ();
}
// Solve cross-origin problems
If (url. indexOf ("http: //")> = 0 ){
Url. replace ("? ","&");
Url = "Proxy? Url = "+ url;
}
Question 3 corresponds to proxy server implementation:
Copy codeThe Code is as follows:
/**
* Handles the http get method.
*
* @ Param request servlet request
* @ Param response servlet response
* @ Throws ServletException if a servlet-specific error occurs
* @ Throws IOException if an I/O error occurs
*/
@ Override
Protected void doGet (HttpServletRequest request, HttpServletResponse response)
Throws ServletException, IOException {
// Obtain the parameters. The url obtained is similar to: url = http: // 192.168... /AJAX/AJAXServer? Aa = 11 & bb = 22 & cc = 33
StringBuilder url = new StringBuilder ();
Url. append (request. getParameter ("url "));
// Obtain the access url = http: // 192.168... /AJAX/AJAXServer
Enumeration enu = request. getParameterNames ();
Boolean flag = false; // defines the flag variable, indicating whether it is the first parameter of the concatenation.
While (enu. hasMoreElements ()){
String paramName = (String) enu. nextElement ();
If (! ParamName. equals ("url ")){
String paramValue = request. getParameter (paramName );
ParamValue = URLEncoder. encode (paramValue, "UTF-8 ");
If (! Flag ){
Url. append ("? "). Append (paramName ). Append ("= "). Append (paramValue );
Flag = true;
} Else {
Url. append ("&"). Append (paramName ). Append ("= "). Append (paramValue );
}
}
}
Response. setContentType ("text/html; charset = UTF-8 ");
PrintWriter out = response. getWriter ();
If (url! = Null & url. length ()> 0 ){
URL connectionUrl = new URL (url. toString ());
BufferedReader reader = new BufferedReader (new InputStreamReader (connectionUrl. openStream (), "UTF-8 "));
The above is all the content of this article. I hope you will like it.