最簡單的ajax實現

時間 2019-11-21
標籤最簡單 ajax 實現欄目 Ajax 简体版
原文原文鏈接
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>

      <title>測試ajax</title>
        <script type="text/javascript" charset="utf-8">
            var request = false;
            function createRequest(){
                try{
                    request = new XMLHttpRequest();
                }catch (e1)
                {
                    try{
                        request = new ActiveXObject("Msxml2.XMLHTTP");
                    }catch (e2)
                    {
                        try{
                            request = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        catch (e3)
                        {
                            request = false;
                        }
                    }
                }
            }

            function updatePage()
            {
                if(request.readyState == 4)
                {
                    if(request.status == 200)
                    {
                        //alert("succeed");
                        var test = document.getElementById("test");
                        test.value = request.responseText;

                    }
                    else if(request.status == 404)
                    {
                        alert("url is not exist");
                    }
                    else
                    {
                        alert("requset.status="+request.status);
                    }
                }
            }

            function getCustomerInfo()
            {
                //createRequest();

                var phone = document.getElementById("phone").value;

                var url = "11.txt";
                createRequest();
                if (request) {
                    request.open("GET", url, true);
                    request.onreadystatechange = updatePage;
                    request.send(null);
                } else {
                    alert("XMLGttpRequest init failed");
                }
            }
        </script>
   </head>
   <body>
      <h1>It works!</h1>
        <form action="">
        <div>
            <input type="text" class="phone" id="phone" name="phone" onchange="getCustomerInfo()"/>
            <input type="text"  id="test" />
        </div>
        </form>
   </body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。