原生态Ajax实例

<script type="text/javascript">
        var xmlhttprequest;
        function GetXmlHttpRequest() {
            if (window.ActiveXObject) { 
                try
                {   
                    //适用于IE5 IE6
                    xmlhttprequest=new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch(e) 
                {
                    //适用于IE7 以上版本
                    xmlhttprequest=new ActiveXObject("Msxml2.XMLHTTP");
                }
            }
            if(window.XMLHttpRequest)
            {      
                   //适用于所有的浏览器
                   xmlhttprequest=new XMLHttpRequest();
            }
            else
            {
                alert("对不起,您的浏览器不适用于AJAX");
            }
        }

        //执行操作
        function Operate() {   
        {
        
            //先获取xmlhttprequest
            GetXmlHttpRequest();

            //POST传值

            //open方法(指定数据发送方式,处理页面,是否异步)创建一个新的http请求,并指定此请求的方法、URL以及验证等信息
            xmlhttprequest.open("POST", "DoOperate.ashx",true);

            //setRequestHeader(header, value)方法单独设定某个请求的HTTP头信息
            xmlhttprequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

            //状态发生事件(onreadyStateChange事件是在readyState属性发生改变时触发)
            xmlhttprequest.onreadystatechange=WatchChange;

            //发送数据
            xmlhttprequest.send("id=1001&name=holyknihgt");

            //GET传值【如果是POST传值需要设定RequestHeader,而Get传值不需要】
            //xmlhttprequest.open("Get", "DoOperate.ashx",true);

            //xmlhttprequest.send(null);
        }
        
        //状态监听
        function WatchChange()
        {
            //readyState
            //0:send方法还没有被调用
            //1:已经调用了send方法,请求还在处理
            //2:send方法已完成 整个应答已接收   
            //3:正在解析应答
            //4:应答解析完成

            //status
            //200:表示交互成功
            //404:NOT Found
            //500:服务器内部错误
            if(xmlhttprequest.readyState==4 && xmlhttprequest.status==200)
            {
                //或许响应值
                var result = xmlhttprequest.responseText;
                //将响应值以‘,’分割
                result = result.split(',');
                //给id为resultMsg的控件赋值
                document.getElementById("resultMsg").innerHTML = "ID:"+result[0]+"  Name:"+result[1];
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="resultMsg"></div>
        <input type="button" value="调用AJAX" onclick="Operate();" />
    </div>
    </form>
</body>
</html>

 

posted @ 2016-03-18 15:48  王雪瑞  阅读(771)  评论(0编辑  收藏  举报