Ajax学习笔记

1.Ajax的概念

　　局部刷新技术，用来在当前页面响应不同的请求内容

2.Ajax的作用

　　需求：

　　　　有时需要将本次的响应结果和前面的响应结果内容在同一个页面中展现给用户

　　解决：

　　　　1.在后台服务器端将多次响应内容重新拼接成一个jsp页面，响应

　　　　　但是这样会造成重复响应，资源浪费

　　　　2.使用Ajax技术

3.Ajax的使用

Ajax的基本流程

　　　　创建Ajax引擎对象

　　　　复写onreadystatement函数

　　　　　　判断Ajax状态码

　　　　　　　　判断响应状态码

　　　　　　　　　　获取响应内容(响应内容的格式)

　　　　　　　　　　　　普通字符串：responseText

　　　　　　　　　　　　json　　

　　　　　　　　　　　　　　将数据按照json的格式拼接成字符串，方便eval()方法将接收的字符串转换为js的对象

　　　　　　　　　　　　　　json格式：responseText

　　　　　　　　　　　　　　　　var 对象名={

　　　　　　　　　　　　　　　　　　　　属性名：属性值,

　　　　　　　　　　　　　　　　　　　　......

　　　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　XML:responseXML，返回document对象

　　　　　　　　　　　　　　通过document对象将数据从xml中获取出来

　　　　　　　　　　处理响应内容(js操作文档结构)

　　　　发送请求

　　　　　　get请求

　　　　　　　　get的请求实体拼接在URL后面，?隔开，键值对

　　　　　　　　ajax.open("get", "url");
　　 ajax.send(null);

　　　　　　post请求

　　　　　　　　有单独的请求实体

　　　　　　　 ajax.open("post", "url");
　　ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
　　ajax.send("name=张三&pwd=123");

Ajax的状态码

　　　　Ajax状态码

　　　　　　readyState:0,1,2,3,4

　　　　　　　　4：表示响应内容被成功接收

　　　　响应状态码

　　　　　　200：一切正常

　　　　　　404：资源未找到

　　　　　　500：内部服务器错误

Ajax的异步和同步

　　　　　　ajax.open(method,url,async)

　　　　　　async：设置同步代码执行/异步代码执行

　　　　　　　　　　true代表异步，默认是异步

　　　　　　　　　　false代表同步

<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'my.jsp' starting page</title>
    
    <script type="text/javascript">
        function ajaxReq(){
            //获取用户请求数据
            var uname=document.getElementById("uname").value;
            var data="name="+uname;
            //创建ajax引擎对象
            var ajax;
            if(window.XMLHttpRequest){//火狐
                ajax=new XMLHttpRequest();
            }else if(window.ActiveXObject){//IE
                ajax=new ActiveXObject("Msxml2.XMLHTTP");
            }
            //复写onreadystatechange函数
            ajax.onreadystatechange=function(){
                //判断ajax状态码
                if(ajax.readyState==4){
                    //判断响应状态码
                    if(ajax.status==200){
                        //获取响应内容
                        var result=ajax.responseText;
                        //处理响应内容
                        alert(result);
                    }
                }
            }    
            //发送请求
                //get方式：请求实体拼接在URL后面
                    //ajax.open("get", "ajax?"+data);
                    //ajax.send(null);
                //post方式
                    ajax.open("post", "ajax");
                    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                    ajax.send("name=张三&pwd=123");
        }
    </script>
    
    <style type="text/css">
        #showdiv{
            border:solid 1px;
            width:200px;
            height:100px
        }
    </style>
  </head>
  
  <body>
    <h3>欢迎登陆403峡谷</h3>
    <hr>
    <input type="text" name="uname" id="uname"/>
    <input type="button" value="测试" onclick="ajaxReq()"/>
    <div id="showdiv"></div>
  </body>
</html>

Ajax的封装

　　　　method：请求方式：值为get或者post

　　　　url：请求地址

　　　　data：没有值需要传入null

　　　　　　　有请求数据则传入字符串数据，格式为"name=value&name=value";

　　　　deal200：接收一个带有形参的js函数对象，接收的实参

　　　　deal404：接收一个js函数对象

　　　　deal500：接收一个js函数对象

<script type="text/javascript">
        function getDate(method,url,data,deal200,deal404,deal500,async){
            var ajax=getAjax();
            //复写onreadystatement函数
            ajax.onreadystatechange=function(){
                //判断Ajax状态码
                if(ajax.readyState==4){
                    if(ajax.status==200){
                        if(deal200){
                            deal200(ajax)
                        }
                    }else if(ajax.status==404){
                        if(deal404){
                            deal404()
                        }
                    }else if(ajax.status==500){
                        if(deal500){
                            deal500(ajax)
                        }
                    }
                }
            }
            //发送请求
            if("get"==method){
                ajax.open("get",url+data==null?"":"?"+data,async);
                ajax.send(null);
            }else if("post"==method){
                ajax.open("post",url,async);
                ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                    　　    ajax.send(data);
            }else{
       
            }        
        }
        
        function getAjax(){
            //创建Ajax引擎对象
            var ajax;
            if(window.XMLHttpRequest){//火狐
                ajax=new XMLHttpRequest();
            }else if(window.ActiveXObject){//IE
                ajax=new ActiveXObject("Msxml2.XMLHTTP");
            }
            return ajax;    
        }
        
</script>