javaEE-Ajax

最新推荐文章于 2021-12-15 22:47:01 发布

高朵

最新推荐文章于 2021-12-15 22:47:01 发布

阅读量85

点赞数

分类专栏： javaWeb 文章标签： ajax java-ee javascript

本文链接：https://blog.csdn.net/qq_48019875/article/details/120926296

版权

javaWeb 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、Ajax简介

Ajax 全称为："Asynchronous JavaScript and XML "(异步JavaScript 和XML)，使用Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了用户体验。
Ajax 其实质是利用浏览器提供的一个特殊的对象（XMLHttpRequest）异步地向服务器发送请求。
服务器返回部分数据，浏览器让你去利用这些数据对页面做部分的更新，整个过程，页面无刷新，不打断用户的操作。

2、创建XMLHttpRequest对象

发送请求到服务器并获得返回结果， new XMLHttpRequest（）；
JavaScript对象XMLHttpRequest是整个Ajax技术的核心，它提供了异步发送请求的能力
常用方法：

方法名	说明
open（method，URL, async）	建立与服务器的连接 method 参数指定请求的HTTP方法，典型的值是GET 或POST URL 参数指定请求的地址 async参数指定是否使用异步请求，其值为true或false
send（content）	发送请求 content 参数指定请求的参数
setRequestHeader（header，value）	设置请求的头信息

常用属性：
onreadystatechange：事件，指定回调函数
readystate：XMLHttpRequest的状态信息

就绪状态码	说明
0	没有完成初始化
1	开始发送请求
2	请求发送完成
3	对象开始读取响应，还没有结束
4	读取响应结束

常用属性
status：HTTP的状态码

状态码	说明
200	服务器响应正常
400	无法找到请求的资源
403	没有访问权限
404	访问的资源不存在
500	服务器内部错误

3、Get方式/Post方式

Get方式提交：
xmlhttp.open(“GET”,“testServlet?name=”+userName,true);
xmlhttp.send(null);
Post方式提交：
xmlhttp.open(“POST”,“testServlet”,true);
POST方式需要自己设置http的请求头
xmlhttp.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);
POST方式发送数据
xmlhttp.send(“name=”+username);

4、JSON

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式
数据在键值对中
数据由逗号分隔
大括号保存对象
方括号保存数组
语法：
JSON键值对是用来保存JS对象的一种方式，和JS对象的写法也大同小异，键/值对组合中的键名写在前面并用双引号" " 包裹，使用冒号：分割，然后紧接着值：
{“firstName”:“John”}
{“name”:“value”,“sex”:“男”}

5、Java对象转JSON

在异步交换数据时，java对象不能直接被传递给js，所以需要先把java对象转换为JSON格式字符串，把字符串响应给客户端，再由客户端将JSON字符串转换为js对象即可（$.parseJSON(jsonstr)）。

6、Jquery实现AJAX-$.get()

$.get() 是一个简单的GET请求功能。请求成功时可调用回调函数。
$.get(url,[data],[callback],[type])
url:发送请求地址
data：待发送 Key/value 参数
callback:发送成功时回调函数
type：返回内容格式，xml，html，script，json，text_default

7、Jquery实现AJAX-$.post()

$.post() 是一个简单的POST请求功能。请求成功时可调用回调函数。
$.post(url,[data],[callback],[type])
url:发送请求地址
data：待发送 Key/value 参数
callback:发送成功时回调函数
type：返回内容格式，xml，html，script，json，text_default
POST请求时HTTP 消息实体提交的，提交大小不受限制
$("#testform").serialize() 请求发送表单数据

未封装版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function  subform(){
            var  account =document.getElementById("accountId").value;
            var  password =document.getElementById("passwordId").value;
            //表单验证
            //使用XMLhttprequest
            var httpobj=new XMLHttpRequest();
            httpobj.open("post","login","true");
            httpobj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            httpobj.send("account="+account+"&password="+password);
            //接收服务器端的数据,当发送请求之后，会触发onreadystatechange事件
            httpobj.onreadystatechange=function (){
                //当对象就绪状态为4，响应内容为200
                if (httpobj.readyState==4&&httpobj.status==200){
                    //alert(httpobj.responseText);
                    location.replace(sucsess.html);
                   // document.getElementById("spanid").innerHTML=httpobj.responseText;
                }
            }

        }
    </script>

</head>
<body>
        <!-- ajax 提交数据，返回交给XMLhttpRequest请求，从前端向后端进行发起请求交互，异步
        当客户端与服务器交互时，服务器向客户端响应内容，不影响内容正常操作，局部刷新。-->
        <form method="post" action="login">
            账号：<input type="text" name="account" id="accountId">
            密码:<input type="password" name="password" id="passwordId">
            <input type="button" value="登录" onclick="subform()">
            <span id="spanid"></span>
        </form>
        <a href="registerX.html" >注册</a>
</body>
</html>

封装版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function  subform(){
            $.post("back/login",$("#formId").serialize(),function(res){
                var obj =$.parseJSON(res);
                if (obj!=null){
                    alert("登录成功");
                    window.sessionStorage.setItem("user",res);
                    location.replace("sucsess.html");
                }else {
                    alert("登录失败");
                }
            });
        }

    </script>

</head>
<body>
        <form  id="formId">
            账号：<input type="text" name="account" >
            密码:<input type="password" name="password" >
            <input type="button" value="登录" onclick="subform()">
            <!-- <span id="spanid"></span>-->
        </form>
        <a href="register.html" >注册</a>
</body>
</html>