Servlet和JSP☞Ajax 2022-03-20

Ajax 学习记录

一、ajax内容简介:

    (1)ajax的概念:局部刷新技术。不是一门新技术,是多种技术的组合。是浏览器端的技术。

    (2)ajax的作用:实现在当前结果页中显示其他请求的响应内容。

二、ajax简单操作:

    (1)js下操作原生ajax:

        ①创建ajax引擎对象

        var ajax;

        if(window.XMLHttpRequest){//火狐

            ajax=new XMLHttpRequest();

        }else if(window.ActiveXObject){//ie

            ajax=new ActiveXObject("Msxml2.XMLHTTP");

        }

        ②复写onreadystatement函数

        ajax.onreadystatechange=function(){

            //判断Ajax状态吗

            if(ajax.readyState==4){

                //判断响应状态吗

                if(ajax.status==200){

                    //获取响应内容

                    var result=ajax.responseText;

                    //处理响应内容

                    //获取元素对象

                    var showdiv=document.getElementById("showdiv");

                    showdiv.innerHTML=result;

                }else if(ajax.status==404){

                    //获取元素对象

                    var showdiv=document.getElementById("showdiv");

                    showdiv.innerHTML="请求资源不存在";

                    }else if(ajax.status==500){

                        //获取元素对象

                        var showdiv=document.getElementById("showdiv");

                        showdiv.innerHTML="服务器繁忙";

                    }

              }else{

                    //获取元素对象

                     var showdiv=document.getElementById("showdiv");

                    showdiv.innerHTML="";

                     }

                }

        //发送请求

        ajax.open("get","ajax?name=qq&pwd=123",true);

        ajax.send(null);

        alert("哈哈");

}

(2)ajax的状态码

    ①ajax状态码:readyState:0,1,2,3,4。 4: 表示响应内容被成功接收

    ②响应状态码:status 200:表示一切OK   404:资源未找到    500:内部服务器错误

    ③ajax的异步和同步:ajax.open(method,urL,async)

        async:设置同步代码执行还是异步代码执行

        true代表异步,默认是异步

        false代表同步

(3)get和post请求

      ①get请求将参数拼接在url中

      ②post请求参数需要在ajax.send(请求参数);  需要添加  ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

三、ajax使用json接收数据及后台处理数据

(1)后端使用json 向js传输数据

   resp.getWriter().write(new Gson().toJson(h));  导入gson jar包   

   百度连接:链接:https://pan.baidu.com/s/1c9ZnWYUO_DzlzotQYojxSA  提取码:1111

(2)jsp页面获取json数据

    var result=ajax.responseText;    alert(result);    eval("var u="+result);

    即可使用:u.xx获取 内容值

四、封装

    使用js封装ajax代码

    百度连接:链接:https://pan.baidu.com/s/1vLPhM4d-LQM0_-WKA31uPA  提取码:1111

五、使用JQuery封装的AJAX方法

(1)引入jquery文件

$(document).ready(function(){

    $("button").click(function(){

        $.ajax({url:"demo_test.txt",success:function(result){

        $("#div1").html(result);

        }});

    });

});

六、

你可能感兴趣的:(Servlet和JSP☞Ajax 2022-03-20)