AJAX的使用

定义：Ajax（Asynchronous JavaScript and XML）是一种进行网站请求的技术，是js的内容，被jQuery发展。Ajax就相当于异步JavaScript和XML。简单的说，在不重载整个网页的情况下，Ajax通过后台加载数据，并在网页上进行显示。

从前台向后台发送请求的方式

1.超链接

2.form表单

3.Ajax 是从js向后台发送请求。从哪里发送请求，数据就可以回显在哪里。

异步(ajax):客户端发出请求之后立即就可以做别的操作，不用等服务器响应后再接着操作。

同步(普通)：客户端发出请求之后就不能在做别的操作了，必须等服务器响应后才可以 接着操作。

ajax请求和普通请求的区别

普通请求:

（1）普通请求的发送方式：

        1.地址栏通过url发送普通请求

        2.通过超链接发送普通请求

        3.通过表单提交普通请求

（2）普通请求的响应内容

        客户端请求服务器之后，服务器返回的是完整的html页面，所以浏览器要重新加载整个html 页面，会导致整个页面刷新(整个页面会闪一下)。  

（3）普通请求是同步处理方式，同一时间点，只能做一个处理

（4）普通请求导致整个页面刷新

ajax请求(异步请求):

（1）ajax请求的发送方式

        通过js对象XmlHttpRequest对象发起ajax异步请求，可以发送post/get请求

（2）ajax请求的响应内容

        浏览器对ajax请求只需要返回数据内容，不需要返回html页面。客户端通过ajax对象接收服务器返回的数据，用js的方式，将数据呈现到页面上。

（3）ajax请求是异步处理方式，同一时间段内，可以作多个处理。

（4）ajax请求是页面局部刷新（不会让整个页面闪）

//ajax请求和处理响应
        function getTime(){
            //alert(123);
            //定义js原生ajax对象
            var xhr = new XMLHttpRequest(); //XMLHttpRequest 能够发送ajax请求的对象
            // alert(xhr.readyState);
            //配置ajax对象请求状态切换事件
            //readystate:ajax请求状态
            //change:状态变化的时候
            xhr.onreadystatechange=function (){
                //显示当前的请求状态
                // alert(xhr.readyState);
                //readyState==4 表示ajax请求已经完成，接收到了浏览器的响应
                if(xhr.readyState==4 && xhr.status==200){
                    //获取服务器返回的内容
                    //xhr.responseText
                    mydiv.innerHTML+=xhr.responseText+"<br/>";
                }
            }
            //配置请求的方式和请求地址
            xhr.open("GET","${pageContext.request.contextPath}/TimeServlet");
            //发送请求
            xhr.send();
        }

        /*
        绑定页面加载完成事件
        window.onload=function (){
            alert(123)
        }*/

readyState取值:

Ajax基操

 方法一：

 $.ajax({
                url:"${pageContext.request.contextPath}/StaffServlet/query",
                type:"get",
                dataType:"json",
                success:function (res){
                    for (var i=0;i<res.length;i++){
                        var sta = res[i];
                        var str = "";
                        str += "<tr>";
                        str += "<td>"+sta.staId+"</td>";
                        str += "<td>"+sta.name+"</td>";
                        str += "<td>"+sta.sex+"</td>";
                        str += "<td>"+sta.birthday+"</td>";
                        str += "<td>"+sta.phone+"</td>";
                        str += "</tr>";
                        $("#staffBody").append(str);
                    }
                },
                error:function (xhr,msg){
                    alert("出错了"+msg);
                    console.log(xhr);
                }
            })

方法二：

$.get('${pageContext.request.contextPath}/login',
{"username":"张三","password":"12345"},
function (){
alert("请求成功");
})

方法三：

$.post('${pageContext.request.contextPath}/login',
{"username":"张三","password":"12345"},
function (){
alert("请求成功");
})

json的使用

json:Json是一种轻量级的数据交换格式，采用一种“键：值”对的文本格式来存储和表示数 据，在系统交换数据过程中常常被使用，是一种理想的数据交换语言。在使用 Java 做 Web 开发时，不可避免的会遇到 Json 的使用。