Ajax总结

1.什么是同步，什么是异步？

　　同步：客户端发送请求到服务器，在服务器返回响应之前，客户端都是处于等待卡死状态。

　　异步：客户端发送请求到服务器，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死。

2.Ajax的原理

　　页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，在这段时间里，客户端可以做任意其他操作，直到服务器端将数据返回给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码，完成某种页面功能。

一：js原生Ajax技术

　　　　　　1.创建Ajax引擎对象

　　　　　　2.为Ajax引擎对象绑定监听(监听服务器已将数据响应给引擎)

　　　　　　3.绑定提交地址

　　　　　　4.发送请求

　　　　　　5.接收响应数据

　　js原生Ajax技术-----get请求并带参数

//原生ajax——get请求
        function fun1(){
            //1.创建ajax引擎对象
            var xmlHttp=new XMLHttpRequest();
            //2.绑定监听---监听服务器是否已经返回相应数据
            xmlHttp.onreadystatechange=function(){
                if(xmlHttp.readyState==4&&xmlHttp.status==200){
                    //5.接收服务器返回数据
                    var res=xmlHttp.responseText;
                    alert(res)
                }
            }
            //3.绑定请求地址     true：表示异步
            xmlHttp.open("GET", "${pageContext.request.contextPath}/ajaxDemo1?age=20",true);
            //4.发送请求
            xmlHttp.send();
        }

　　js原生Ajax技术-----post请求并带参数

//原生ajax——post请求
        function fun2(){
            //1.创建ajax引擎对象
            var xmlHttp=new XMLHttpRequest();
            //2.绑定监听---监听服务器是否已经返回相应数据
            xmlHttp.onreadystatechange=function(){
                if(xmlHttp.readyState==4&&xmlHttp.status==200){
                    //5.接收服务器返回数据
                    var res=xmlHttp.responseText;
                    alert(res)
                }
            }
            //3.绑定请求地址     true：表示异步
            xmlHttp.open("POST", "${pageContext.request.contextPath}/ajaxDemo1",true);
            
            xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
            
            //4.发送请求
            xmlHttp.send("age=20");
        }

　　原生ajax的get与post请求格式的不同：

　　　　1.post请求需要在发送前设置 头 ：xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")

　　　　2.参数不再拼接在请求地址后，而是写在 ：   xmlHttp.send( );

***************************************************************************************************************************************************************************

二：JQuery的Ajax技术，常用的有3种

　　1.get方式

　　　　$.get(url,[data],[callback],[type])

　　　　　　url:代表请求的服务器端地址

　　　　　　data:代表请求服务器端的数据，可以是key=value形式，也可以是json格式

　　　　　　callback:表示服务器端成功响应所触发的函数（只有正常成功返回才执行）

　　　　　　type:表示服务器端返回的数据类型(jquery会根据指定类型自动转换)，常用的返回类型：text,json,html等

　　　　function fun1() {
            $.get(
                "${pageContext.request.contextPath}/jQueryAjax",//请求地址
                 {"name":"zhangsan","age":20},                    //请求参数(此处指定为json)
                 function(responseData) {                        //请求成功后的回调函数     responseData：服务器返回的数据
                    alert(responseData.msg);
                 },
                 "json"                                            //指定服务器返回数据类型，jquery会根据指定类型自动转换
            );
        }

public class JQueryAjax extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        //转译   返回json类型数据
        response.getWriter().write("{"msg":"success"}");
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}

　2.post方式(与get格式基本一致)

　　　$.post(url,[data],[callback],[type])

　　　　　　url:代表请求的服务器端地址

　　　　　　data:代表请求服务器端的数据，可以是key=value形式，也可以是json格式

　　　　　　callback:表示服务器端成功响应所触发的函数（只有正常成功返回才执行）

　　　　　　type:表示服务器端返回的数据类型(jquery会根据指定类型自动转换)，常用的返回类型：text,json,html等

　　　　function fun1() {
            $.post(
                "${pageContext.request.contextPath}/jQueryAjax",//请求地址
                 {"name":"zhangsan","age":20},                    //请求参数(此处指定为json)
                 function(responseData) {                        //请求成功后的回调函数     responseData：服务器返回的数据
                    alert(responseData.msg);
                 },
                 "json"                                            //指定服务器返回数据类型，jquery会根据指定类型自动转换
            );
        }

public class JQueryAjax extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        //转译   返回json类型数据
        response.getWriter().write("{"msg":"success"}");
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}

JQuery的ajax的get与post基本没什么区别(地址栏同样不会显示请求参数)，主要是提交时：get需要处理中文乱码，post不需要。

　　3.ajax方法(最强大版)

　　　　$.ajax({option:value,option:value.....});

　　　　常用的option有如下：

　　　　　　asyn：是否异步，默认是true，表示异步

　　　　　　data:发送到服务器的参数，建议使用json格式

　　　　　　dataType：服务器端返回的数据类型，常用text和json

　　　　　　success：成功响应执行的函数，对应的数据类型是 function类型

　　　　　　type:请求方式，post/get

　　　　　　url:请求服务端地址

　　

　　　　function fun3(){
            $.ajax({
                url:"${pageContext.request.contextPath}/jQueryAjax",
                async:true,
                data:{"name":"fansir","age":22},
                type:"post",
                success:function(responseData){
                    alert(responseData.msg);
                },
                dataType:"json",
            });
        }

public class JQueryAjax extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        //转译   返回json类型数据
        response.getWriter().write("{"msg":"success"}");
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}