Ajax学习笔记

男娘i 2022-08-07 13:45 248阅读 0赞

1.使用Ajax实现异步交互的步骤 
    1.创建XMLHttpRequest对象 
        var xmlHttpRequest=createXmlHttpRequest(); 
            function createXmlHttpRequest()\{ 
                try\{ 
                    return new ActiveXObject("Microsoft.XMLHTTP"); 
                \}catch(e)\{ 
                    try\{ 
                        return new ActiveXObject("MSxml2.XMLHTTP"); 
                    \}catch(e)\{ 
                        try\{ 
                            return new XMLHttpRequest(); 
                        \}catch(e)\{ 
                 
                        \} 
                    \} 
                \} 
            \} 
    2.通过XMLHttpRequest对象设置请求信息 
        xmlHttpRequest.open("GET/POST",url,true); 
    3.创建回调函数,根据响应状态动态更新页面S 
        xmlHttpRequest.onreadystatechange=processRequest; 
        function processRequest()\{ 
            if(xmlHttpRequest.readyState==4)\{ 
                if(xmlHttpRequest.status==200)\{ 
                    if(xmlHttpRequest.responseText!=null)\{ 
                        //进行相应的结果显示 
                    \} 
                \} 
             
            \} 
        \} 
    4.向服务器发送请求 
        xmlHttpRequest.send(null); 
2.Jquery中Ajax的使用 
    1.$.ajax()方法                //Jquery最底层的Ajax方法的实现 
        1.基本语法 
            $.ajax(\{ 
                url:"url",                    //发送请求的地址 
                type:"GET"|"POST",                //发送请求的方式 
                data:"name="+obj.value,    |\{"name":obj.value\}        //发送到服务器的数据 
                dataType:"Text",                //服务器返回的数据的类型 XML,HTML,Script,JSON.JSONP,Text 
                async:false,   
                cache:false, 
                success:function(result)\{            //请求成功后调用的函数 
                    //可以执行的内容 
                \}, 
                error:function()\{                //请求失败后执行的函数 
                    //可以执行的内容 
                \} 
            \}); 
    2.$.get()方法                //以get方式请求服务器加载数据的Ajax的方法 
        1.基本语法 
            $.get(url,data,function(result)\{ 
                //可以执行的内容 
            \}); 
    3.$.post()方法                //以post方式请求服务器加载数据的Ajax的方法 
            $.post(url,data,function(result)\{ 
                //可以执行的内容 
            \}); 
    4.$("selector").load()方法        //该方法直接将返回的结果内容复制到某个元素对象             
            $("\#name").load(url,data,function(result)\{ 
                //可执行的内容     
            \}); 
    5.$.getJSON()方法;            //该方法返回的result为JSON对象 
            $.getJSON(url,data,function(result)\{ 
                //该方法返回JSON对象result...在此处可以对其进行相关的操作 
            \}); 
    6.$("selector").ajaxStart();        //在请求开始的时候调用的方法 
            $(".name").ajaxStart(function()\{ 
                alert("请求即将开始"); 
            \}); 
    7.$("selector").ajaxComplete();        //请求完成后调用的方法 
            $("selector").ajaxComplete(function()\{ 
                alert("请求完成了"); 
            \}); 
 
 
3.JSON的应用        JavaScript Object Notation        //一种轻量级的数据交换格式 
    1.//定义JSON对象 
            var json=\{"name":"张三","age":20,"address":"深圳市南山区"\}; 
            $("\#object").append("<ul><li>"+json.name+"</li><li>"+json.age+"</li><li>"+json.address+"</li></ul>"); 
    2.//定义JSON数组 
            var arr=\["China","Japan","American","Italy","France","Germany"\]; 
            $("\#array").append("<ol class='arr'></ol>"); 
            //使用循环的方式来取得数组中的元素值 
            for(var i=0;i<arr.length;i++)\{ 
                $(".arr").append("<li>"+arr\[i\]+"</li>"); 
            \} 
            //使用jquery的迭代属性来遍历数组的元素值 
            $(arr).each(function(i,a)\{ 
                $(".arr").append("<li>"+a+"</li>"); 
            \}); 
    3.//定义JSON对象数组 
            var objarr=\[\{"name":"张三","age":20,"address":"深圳市南山区"\},\{"name":"李四","age":21,"address":"深圳市宝安区"\}\]; 
            $("\#objectarray").append("<dl class='objarr'></dl>"); 
            $(objarr).each(function(i,a)\{ 
                $(".objarr").append("<dt>"+a.name+"</dt>"); 
                $(".objarr").append("<dd>"+a.age+"</dd>"); 
                $(".objarr").append("<dd>"+a.address+"</dd>"); 
            \}); 
    4.//测试把字符串转换为JSON对象 
            var str='\{"name":"哈喽","age":25,"address":"深圳市福田区"\}'; 
            var user=$.parseJSON(str); 
            $(user).each(function()\{ 
                $("\#parseJSON").append(""+user.name+""); 
                $("\#parseJSON").append(""+user.age+""); 
                $("\#parseJSON").append(""+user.address+""); 
            \}); 
4.Ajax请求Action进行无刷新的校验 
    1.创建Action类 
        public class UserAction extends ActionSupport\{ 
            private User user; 
            private InputStream inputStream; 
            //省略相应的get/set方法 
            private UserBiz ub=new UserBizImp(); 
            public String checkName()\{ 
                String str=""; 
                boolean flag=ub.exist(user.getName()); 
                if(flag)\{ 
                    str="当前用户名已经存在"; 
                \}else\{ 
                    str="当前用户名可以使用"; 
                \} 
                return success; 
            \} 
        \} 
    2.struts.xml文件配置 
        <action name="\*User" class="cn.struts.action.UserAction" method="\{1\}"> 
            <result name="success" type="stream"> 
                <param name="dataType">text/html</param> 
                <param name="inputStream">inputStream</param> 
            </result> 
        </action>