zoukankan      html  css  js  c++  java
  • 完整的 AJAX 写法(支持多浏览器)

    代码如下:

    <script type="text/javascript">
    
        var xmlhttp;
        function Submit() {
    
            //1.创建 XMLHttpRequest 对象
            if (window.XMLHttpRequest) {
    
                //IE7,IE8,FireFox,其它
                xmlhttp = new XMLHttpRequest();
                if (xmlhttp.overrideMimeType) {
    
                    //针对某些特定版本的mozillar浏览器的BUG进行修正  
                    xmlhttp.overrideMimeType("text/xml");
                }
               
            } else if (window.ActiveXObject) {
    
                //IE6,IE5.5,IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                
            }
        
        // 简单写法,应该也可以
        //xmlhttp = new XMLHttpRequest()|| new ActiveXObject("Microsoft.XMLHTTP");
    
            if (xmlhttp == undefined || xmlhttp == null) {
                alert('当前浏览器不支持创建XMLHttpRequest对象,请更换浏览器!');
                return;
            }
    
            //将每次的状态保存到 数组里
            array.push(xmlhttp.readyState);
    
            //2.注册回调方法 callback
            xmlhttp.onreadystatechange = callback;
    
            //获取客户端内容
            var userName = document.getElementById("UserName").value;
    
            /* 
            //Get 请求方式
            //3.设置和服务端交互的相应参数
            xmlhttp.open("Get", "AjaxRequst.ashx?name="+userName, true);
    
            //4.设置向服务器发送数据,启动和服务端的交互
            xmlhttp.send();
            */
    
            //Post 请求方式
            //3.设置和服务端交互的相应参数
            xmlhttp.open("Post", "AjaxRequst.ashx", true);
    
            //Post方式需要增加的代码
            xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    
            //4.设置向服务器发送数据,启动和服务端的交互
            xmlhttp.send("name="+userName);
            
        }
    
        function callback() {
            //5.判断和服务器端的交互是否完成,还要判断服务端的是否正确返回了数据
            if (xmlhttp.readyState == 4) {
                //表示和服务端的交互已经完成
                if (xmlhttp.status == 200) {
                    //表示服务器的响应代码是200,正确的返回数据
                    //纯文件数据的接受方法
                    var message = xmlhttp.responseText;
    
                    //将返回的内容添加到DIV层里
                    var div = document.getElementById('message');
                    div.innerHTML = message;
    
                    //XML数据对应的DOM对象的接受方法
                    //使用前提是,服务器端需要设置content-type为text/xml
                    //var domXml = xmlhttp.responseXML;
                    
                }
            }
        }
        
    </script>
  • 相关阅读:
    JDK集合框架--LinkedList
    JDK集合框架--ArrayList
    JDK集合框架--综述
    JDK常用类解读--StringBuffer、StringBuilder
    JDK常用类解读--String
    【spring 注解驱动开发】扩展原理
    【spring 注解驱动开发】spring事务处理原理
    【spring 注解驱动开发】Spring AOP原理
    【spring 注解驱动开发】spring自动装配
    【spring 注解驱动开发】spring对象的生命周期
  • 原文地址:https://www.cnblogs.com/xgao/p/4156027.html
Copyright © 2011-2022 走看看