Ajax core XMLHttpRequest summary-JS Tutorial-php.cn

Ajax core XMLHttpRequest summary

亚连

Release： 2018-05-25 12:00:07

Original

1300 people have browsed it

This article mainly summarizes the relevant knowledge of XMLHttpRequest, the core content of Ajax, for everyone. It is very detailed and recommended to everyone. If you need it, please refer to it.

Ajax: "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 manipulate data. This article focuses on using the XMLHttpRequest object for asynchronous data exchange with the server.

How to use
XMLHttpRequest five-step usage:

1. Create the object;
2. Register the callback function;
3. Use open Method sets the basic information for interacting with the server;
4. Sets the data to be sent and starts interacting with the server;
5. Implements the callback function.

Since five steps are required every time the XMLHttpRequest object is used, the use of the object can be encapsulated in a js file, and the corresponding functions can be completed by passing some parameters and using its methods. The implementation is as follows:

//Using the encapsulation method, people only provide http requests, URL addresses, data, success and failure callback methods
//1. Define the construction method of the 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（）； 
    //解决浏览器在服务器端响应由于没有Text头的时候可能无法工作的问题 
    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

Copy after login

Extension issues

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

For question 1, Problem 3 can be solved by changing the URL address. Problem 1 can be solved by adding a timestamp at the end of the URL address, and problem 3 can be solved through proxy. Just add the corresponding judgment before executing the third step in send():

// Solve the cache conversion: add the timestamp

if（url.indexOf（"?"） >= 0 ）{ 
    url = url + "&t=" + （new Date（））。valueOf（）； 
    } else { 
    url = url + "?t=" + （new Date（））。valueOf（）； 
    } 
    //解决跨域的问题 
    if（url.indexOf（"http://"） >= 0） { 
    url.replace（"?","&"）； 
    url = "Proxy?url=" + url; 
    }

Copy after login

Question 3 corresponds to the proxy service End 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 { 
    //获取参数，最后得到请求url地址类似于：url = http://192.168…/AJAX/AJAXServer?aa=11&bb=22&cc=33 
    StringBuilder url = new StringBuilder（）； 
    url.append（request.getParameter（"url"））； 
    //获取访问的跨域地址url = http://192.168…/AJAX/AJAXServer 
    Enumeration enu = request.getParameterNames（）； 
    boolean flag = false;       //定义标志变量，表示是否为拼接的第一个参数 
    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"））；

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Solution to the problem of ajax cross-domain request data cookie loss

JavaScript is based on Ajax to implement non-refreshing of the web page Dynamically display file content

Use ajax to change page content and address bar URL without refreshing

The above is the detailed content of Ajax core XMLHttpRequest summary. For more information, please follow other related articles on the PHP Chinese website!