使用xmlHttpRequest实现Ajax技术

比眉伴天荒 2022-05-16 04:25 192阅读 0赞

前端的javascript脚本中使用使用xmlHttpRequest实现Ajax技术与后台进行交互，

后台使用php进行运算处理。

<html>
    <head>
    <script type="text/javascript">
    var xmlhttp;
    function loadXMLDoc(url)
    {
    xmlhttp=null;
    if (window.XMLHttpRequest) {// code for IE7, Firefox, Opera, etc.
        alert(2);
      xmlhttp=new XMLHttpRequest();
    }
    else if( window.ActiveXObject ){
    alert(1111);   
    }
    
    if (xmlhttp!=null)
      {
            xmlhttp.onreadystatechange = state_Change;
            xmlhttp.open("GET",url,true);
            xmlhttp.send(null);
      }
    else
      {
      alert("Your browser does not support XMLHTTP.");
      }
    }
    
    function state_Change()
    {
        if (xmlhttp.readyState == 4) {// 4 = "loaded"
            alert(4);
            document.getElementById('A1').innerHTML = xmlhttp.status;
    	document.getElementById('A2').innerHTML = xmlhttp.statusText;
    	document.getElementById('A3').innerHTML = xmlhttp.responseText;
      if (xmlhttp.status==200)
        {// 200 = "OK"
        document.getElementById('A1').innerHTML=xmlhttp.status;
        document.getElementById('A2').innerHTML=xmlhttp.statusText;
        document.getElementById('A3').innerHTML=xmlhttp.responseText;
        }
      else
        {
        alert("Problem retrieving XML data:" + xmlhttp.statusText);
        }
      }
    }
    </script>
    </head>
    
    <body>
    <h2>Using the HttpRequest Object</h2>
    
    <p><b>Status:</b>
    <span id="A1"></span>
    </p>
    
    <p><b>Status text:</b>
    <span id="A2"></span>
    </p>
    
    <p><b>Response:</b>
    <br /><span id="A3"></span>
    </p>
    
    <button οnclick="loadXMLDoc('http://59.66.116.169/whether.php?city=beijing')">Get XML</button>
    
    </body>
    </html>