AJAX - XMLHttpRequest 객체 생성

XMLHttpRequest 객체

XMLHttpRequest 객체는 Ajax 기술의 핵심입니다.

모든 최신 브라우저는 XMLHttpRequest 객체를 지원합니다(IE5 및 IE6은 ActiveXObject를 사용합니다).

페이지를 새로 고치지 않고 서버와 상호작용하는 것이 Ajax의 가장 큰 특징입니다. 이 중요한 기능은 주로 XMLHttpRequest 개체 때문입니다. XMLHttpRequest 객체를 사용하면 Windows 애플리케이션과 같은 웹 애플리케이션이 페이지를 새로 고치거나 이동할 필요 없이 적시에 사용자와 서버 간의 상호 작용에 응답하고 일련의 데이터 처리를 수행할 수 있습니다. 이러한 기능은 사용자의 대기 시간을 단축할 수 있습니다. . 또한 서버 측의 부하를 줄여줍니다.

XMLHttpRequest 개체 만들기

최신 브라우저(IE7+, Firefox, Chrome, Safari 및 Opera)에는 모두 XMLHttpRequest 개체가 내장되어 있습니다.

XMLHttpRequest 개체 생성을 위한 구문:

variable=new XMLHttpRequest();

Internet Explorer의 이전 버전(IE5 및 IE6)은 ActiveX 개체를 사용합니다.

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

IE5 및 IE6을 포함한 모든 최신 브라우저에서 작동하려면 브라우저가 XMLHttpRequest 개체를 지원하는지 확인하세요. 지원되는 경우 XMLHttpRequest 객체를 만듭니다. 지원되지 않는 경우 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>

지속적인 학습

새로운 파일

<!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>

제출하다 코드 재설정

자동운전