JavaEE之Ajax

最新推荐文章于 2022-08-08 22:47:26 发布

菜菜的程序猿

最新推荐文章于 2022-08-08 22:47:26 发布

阅读量379

点赞数

分类专栏： JavaWeb

本文链接：https://blog.youkuaiyun.com/qq_32719221/article/details/106316941

版权

JavaWeb 专栏收录该内容

16 篇文章

订阅专栏

Ajax

异步js和xml的组合
异步刷新:如果网页中某一个地方需要修改，异步刷新可以使：只刷新需要修改的地方，而页面中其他地方保持不变。

实现

两种方式Js,jquery

1 js 方式

js:严格依赖XMLHttpRequest对象

XMLHttpRequest对象的方法：
- open(方法名(提交方式get post),服务器地址,ture) :与服务端建立连接
  最后一个参数一般为ture,代表是不是异步刷新
- send() :
  - 如果是get请求：send(null)
  - 如果是post请求 send(参数值)
- sendRequestHeader(header,value):
  - 如果是get请求：不需要设置此方法
  - 如果是post请求需要设置
    - a. 如果请求元素中包含了文件上传:
      setRequestHeader(“Content-Type”,“multipart/form-data”);
    - b 不包含文件上传
      setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);
XMLHttpRequest对象的属性：
- readyState:请求状态
  只有状态为4 代表请求完毕
- status：响应状态
- onreadystatechange：回调函数
  b()是a()的回调函数，当b()执行完,去执行a();
- responseText：响应格式为String
- responseXML：响应格式为XML

js实例

在这里插入图片描述

1 post方式

在这里插入图片描述
前端代码

<head>
    <title>ajax</title>
    <script type="text/javascript">
        function register(){
            var mobile =document.getElementById("mobile").value;
            //通过ajax异步方式请求服务端
            xmlHttpRequest = new XMLHttpRequest(); //全局变量
            //设置xmlHttpRequest对象的回调函数
            xmlHttpRequest.onreadystatechange =callback


            xmlHttpRequest.open("post","MobileServlet",true) //建立连接 post方式
            xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //post方式设置头消息
            xmlHttpRequest.send("mobile="+mobile); //k=v
        }
     
        //定义回调函数(接受服务端的返回值)
        function callback() {
            if(xmlHttpRequest.readyState ==4&&xmlHttpRequest.status ==200){
                //接受服务端返回的数据
                var data=xmlHttpRequest.responseText;//服务端返回值为string格式
                if(data =="true"){
                    alert("此号码已存在，请更换");
                }else {
                    alert("注册成功");
                }

            }
        }



    </script>
</head>
<body>
    <!--原来是form action 是全局刷新-->
     手机：<input id="mobile"/><br/>
    <input type="button" value="注册" onclick="register()"/><br/>
</body>

2 get方式

前端代码

function registerGet(){
            var mobile =document.getElementById("mobile").value;
            //通过ajax异步方式请求服务端
            xmlHttpRequest = new XMLHttpRequest(); //全局变量
            //设置xmlHttpRequest对象的回调函数
            xmlHttpRequest.onreadystatechange =callback


            xmlHttpRequest.open("get","MobileServlet?mobile="+mobile,true) //建立连接 get方式
            xmlHttpRequest.send(null); 
        }

后端代码

@WebServlet(name = "MobileServlet",urlPatterns = "/MobileServlet")
public class MobileServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8"); //处理post请求编码
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=UTF-8");
        //get方式编码在tomcat server.xml中处理+URIEncoding="utf-8"
        String mobile= request.getParameter("mobile");
        //假设数据库只有一个号码 123
        PrintWriter out = response.getWriter();
        if("123".equals(mobile)){
            out.write("true"); //servlet以输出流的方式 将信息返回给客户端
        }else{
            out.write("false"); //servlet以输出流的方式 将信息返回给客户端
        }
        out.close();
    }
}

2 jquery 方式

格式1
$. ajax({
url:服务器地址,
请求方式(type):get|post,
data:请求数据,
success:function(result,testStatus)
{
},
error:functoin(xhr,errorMessage,e){

}

});
格式2
$. get(
服务器地址,
请求数据,
function(result)
{
},
预期返回值类型（"xml"或 “json” 或 "text）
);
格式3
$. post(
服务器地址,
请求数据,
function(result)
{
},
预期返回值类型（"xml"或 “json” 或 “text”)
);

示例格式1

 <script src="js/jquery.js"></script>

    <script type="text/javascript">
        function register(){
            var mobile =document.getElementById("mobile").value;
            $.ajax({
                url:"MobileServlet",
                type:"post",
                data:"mobile="+mobile,
                success:function(result,testStatus)
                {
                    if(result =="true"){
                        alert("已存在，注册失败");
                    }else {
                        alert("注册成功");
                    }
                },
                error:function(xhr,errorMessage,e){
                    alert("系统异常");
                }
            });

        }





    </script>
</head>
<body>
    <!--原来是form action 是全局刷新-->
     手机：<input id="mobile"/><br/>
    <input type="button" value="注册" onclick="register()"/><br/>

示例格式2/格式3

  <script type="text/javascript">
        function register(){
            var mobile =document.getElementById("mobile").value;
            $.post(
                "MobileServlet",
                 "mobile="+mobile,
                function(result) { if(result =="true"){
                     alert("已存在，注册失败");
                }else {
                       alert("注册成功");
                  }
                },
                "text"
        );
        }
            </script>

格式4 JQuery方式的Ajax-load
load:将服务端的返回值直接加载到$(xxx)所选择的元素中，可将fuction省略
$(xxx). load(
服务器地址,
请求数据,
function(result) // 此项可有可无
{
}
);

前端示例

<head>
    <title>ajax</title>
    <script src="js/jquery.js"></script>

    <script type="text/javascript">
        function register() {
            var mobile = document.getElementById("mobile").value;
            $("#tip").load(
                "MobileServlet",
                "mobile=" + mobile
            )
        }




    </script>
</head>
<body>
    <!--原来是form action 是全局刷新-->
     手机：<input id="mobile"/><br/>
    <input type="button" value="注册" onclick="register()"/><br/>
    <span id="tip"></span>
</body>

后端
在这里插入图片描述
效果

格式5 JQuery方式的getJSON()
$.getJSON(
服务器地址,
JSON格式的请求数据,
function(result)
{
}
);

json对象
var student={“name”:“zs”,“age”:23};
json数组
var students=[
{“name”:“zs”,“age”:23} ,
{“name”:“ls”,“age”:23} ,
{“name”:“ww”,“age”:23}
];

前端示例

 <script type="text/javascript">
        function register() {
            var mobile = document.getElementById("mobile").value;

            $.getJSON(
                "MobileServlet",
                {"mobile":mobile,
                    "a":"b",
                    "c":"d"
                },
                function(result) {
                    if(result.msg =="true"){
                    alert("已存在，注册失败");
                }else {
                    alert("注册成功");
                }
                }
            );
        }

后端
返回值是字符串json
在这里插入图片描述
格式5 JQuery方式的getJSON()后端优化返回json对象
Ajax处理JSON对象

在这里插入图片描述
json中只有一个对象{“user1”:user对象}
前端

<script type="text/javascript">
        function register() {
            var mobile = document.getElementById("mobile").value;

            $.getJSON(
                "MobileServlet",
                {"name":"zs",
                    "age":24
                },
                function(result) {
                    //js通过eval()函数，将返回值转为一个js能够识别的json对象
                    var jsonstudent = eval(result.user1);
                    alert(jsonstudent.username+jsonstudent.password);

                }
            );
        }

后端
只有一个json对象

{"user1":{"password":"123","username":"xgh","userno":0}}

在这里插入图片描述
当json中有多个对象
{“user1”:user1,“user2”:user2,“user3”:user3}
前端

 $.getJSON(
                "MobileServlet",
                {"name":"zs",
                    "age":24
                },
                function(result) {
                    //json中有多个对象 此时result {"user1":user1,"user2":user2,"user3":user3}
                    //js通过eval()函数，将返回值转为一个js能够识别的json对象
                    var json = eval(result);
                    $.each(json,function (i,element) {
                        alert(this.username+"   "+this.password)

                    })


                }

后端
在这里插入图片描述