AJAX - Create XMLHttpRequest object

XMLHttpRequest object

The XMLHttpRequest object is the core of Ajax technology.

All modern browsers support the XMLHttpRequest object (IE5 and IE6 use ActiveXObject).

Interacting with the server without refreshing the page is the biggest feature of Ajax. This important feature is mainly due to the XMLHttpRequest object. Using the XMLHttpRequest object enables web applications, like windows applications, to respond promptly to interactions between users and servers without having to refresh or jump the page, and to perform a series of data processing. These functions can shorten the user's waiting time. , and also reduces the load on the server side.

Create XMLHttpRequest object

Modern browsers (IE7+, Firefox, Chrome, Safari and Opera) all have built-in XMLHttpRequest objects.

Syntax for creating XMLHttpRequest objects:

variable=new XMLHttpRequest();

Older versions of Internet Explorer (IE5 and IE6) use ActiveX objects ：

variable=new ActiveXObject("Microsoft.XMLHTTP");

To cope with all modern browsers, including IE5 and IE6, please check whether the browser supports XMLHttpRequest object. If supported, creates an XMLHttpRequest object. If not supported, create an ActiveXObject: :

<!DOCTYPE html>
<html>
<head>
<script>
    function loadXMLDoc()
    {
        var xmlhttp;
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
          }
        xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
        xmlhttp.send();
    }
</script>
</head>
<body>
    <div id="myDiv"><h2>使用AJAX</h2></div>
    <button type="button" onclick="loadXMLDoc()">点击修改</button>
</body>
</html>

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function ajaxFunction() { var xmlHttp; try { // Firefox,Opera 8.0+,Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("您的浏览器不支持AJAX！"); return false; } } } } </script> </head> <body> <form name="myForm"> 　　用户： <input type="text" name="username" /> <br> 　　时间： <input type="text" name="time" /> </form> </body> </html>

submit Reset Code

Automatic operation

AJAX - Create XMLHttpRequest object

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]