Ajax: "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML), a comprehensive technique: using JavaScript object XMLHttpRequest for asynchronous data exchange ; JavaScript operates the DOM for dynamic effects, uses XHTML+CSS to express information, and XML and XSLT manipulation data. This article focuses on asynchronous data exchange with the server side using the XMLHttpRequest object.
How to use
XMLHttpRequest Five-step method of use:
1. Create objects;
2. Register the callback function;
3. Use the Open method to set up and server interaction basic information;
4. Set the data sent, start and server-side interaction;
5. Implement the callback function.
Because each time the XMLHttpRequest object is applied, it is necessary to carry out five steps, so the use of the object can be encapsulated as a JS file, passing some parameters using its method to complete the corresponding functions, the following:
Methods for using encapsulation methods to provide only HTTP requests, URL addresses, data, successes, and failed callbacks
1. Define how to construct a XMLHttpRequest object
var myxmlhttprequest =function () {
var XMLHttpRequest;
if (window. XMLHttpRequest) {
Ie7,ie8,firefox,mozillar,safari,opera
Alert ("Ie7,ie8,firefox,mozillar,safari,opera");
XMLHttpRequest = new XMLHttpRequest ();
Resolves an issue in which the browser may not work when the server side responds because there is no text header
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 issues
1. Browser cache
2. Chinese garbled
3. Cross-domain access
For issue 1, Issue 3 can be resolved by changing the URL address. Issue 1 can add a timestamp at the end of the URL address, and issue 3 is resolved by proxy. Simply add the appropriate judgment before the third step in Send ():
Resolve cached conversions: increase timestamp
if (Url.indexof ("?" ) >= 0) {
url = url + "&t=" + (new Date ()). ValueOf ();
} else {
url = url + "? t=" + (new Date ()). ValueOf ();
}
Troubleshoot cross-domain issues
if (Url.indexof ("http//") >= 0) {
Url.replace ("?", "&");
url = "proxy?url=" + url;
}
Issue 3 corresponds to the proxy server-side implementation:
/**
* 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 {
Get the parameter, and finally get the request URL address similar to: url = http://192.168.../AJAX/AJAXServer?aa=11&bb=22&cc=33
StringBuilder url = new StringBuilder ();
Url.append (request.getparameter ("url"));
Get access to the cross-domain address URL = http://192.168.../AJAX/AJAXServer
Enumeration ENU = Request.getparameternames ();
Boolean flag = false; Defines a flag variable that indicates whether it is the first parameter for stitching
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 XMLHttpRequest of Ajax core Technology