Summary of Ajax core XMLHttpRequest

Time:2021-3-6

Ajax: namely “asynchronous JavaScript and XML” (asynchronous JavaScript and XML), a comprehensive technology: using JavaScript object XMLHttpRequest for asynchronous data exchange; JavaScript operating DOM to achieve dynamic effects; using XHTML + CSS to express information; XML and XSLT operating data. This article focuses on using XMLHttpRequest object to exchange asynchronous data with server.

usage method
Five steps to use XMLHttpRequest:

Copy codeThe code is as follows:
1. Create objects;
2. Register callback function;
3. Use the open method to set the basic information of interaction with the server;
4. Set the data to be sent and start to interact with the server;
5. Implement callback function.

Because every time you apply the XMLHttpRequest object, you have to perform five steps. Therefore, you can encapsulate the use of the object into a JS file, pass some parameters, and use the method to complete the corresponding functions. The implementation is as follows:

Copy codeThe code is as follows:
/ / using encapsulation method, people only provide HTTP request, URL address, data, successful and failed callback methods
/ / 1. Define the construction method of 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();
/ / 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

Expansion problem

1. Browser cache
2. Chinese garbled
3. Cross domain access

Problems 1 and 3 can be solved by changing the URL address. Problem 1 can add a timestamp at the end of the URL address, and problem 3 can be solved by proxy. Just add the corresponding judgment before the third step in 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 domain problems
    if(url.indexOf(”http://”) >= 0) {
    url.replace(”?”,”&”);
    url = “Proxy?url=” + url;
    }

Problem 3 is the implementation of the corresponding proxy server

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 {
/ / get the parameters, and finally get the request URL address, which is similar to: URL=http://192.168…/AJAX/AJAXServer?aa=11&bb=22&cc=33
    StringBuilder url = new StringBuilder();
    url.append(request.getParameter(”url”));
/ / get the cross domain address URL=http://192.168…/AJAX/AJAXServer
    Enumeration enu = request.getParameterNames();
Boolean flag = false; / / define a flag variable to indicate whether it is the first parameter of splicing
    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 the whole content of this article, I hope you can like it.