java Ajax入门

文章目录

java Ajax入门
前言
一、同步和异步
二、Ajax的使用
- JavaScript方法
- JQuery方法
总结

前言

接下来整理一下Ajax相关的内容，AJAX（asynchronous js and xml），即异步的JavaScript和xml，它的主要作用就是让页面不必等待服务器返回整个页面信息，而可以通过异步的方式给服务器发送数据和获取数据，对页面进行局部刷新，是一种提高用户体验的技术。

一、同步和异步

同步和异步的主要区别如下；

（1）同步：一个响应结束后才能发送下一个请求，页面在请求期间不能做其他事情。

（2）异步：不必等待一个响应结束，可以异步的给服务器发送请求，页面在异步请求期间可以继续操作，可以对页面进行局部刷新。

异步是一种提高用户体验的技术，它可以减轻服务器的压力，减少网络传输，但是另外一方面可能会无端增加无效请求，反倒给服务器造成压力，因此异步技术也是一个双刃剑。

二、Ajax的使用

Ajax的使用，本质是使用XmlHttpRequest对象给服务器发送请求和获取数据，通过JavaScript和JQuery都可以使用它，下面简单的介绍下如何使用Ajax。

JavaScript方法

（1）获取Ajax对象
JavaScript获取Ajax对象，需考虑到不同版本的浏览器获取的方式，现在主流浏览器是内置了XmlHttpRequest对象的，可以直接获取到，下图就是在chrome浏览器console控制台直接获取的方式，可以看到可以正常获取。IE浏览器比较麻烦一点，具体参考如下代码。
在这里插入图片描述获取XmlHttpRequest的js脚本。

/*获取XmlHttpRequest*/
function getAjax(){
    var xmlHttpRequest;
    /*如果是chrome，火狐，safari，IE7以上等主流浏览器*/
    try{
        xmlHttpRequest=new XMLHttpRequest();
    }catch (e) {
        try{
            /*是否是IE6*/
            xmlHttpRequest=new ActiveXObject("Msxml2.XMLHTTP");
        }catch (e) {
            try{
                /*IE5或者更早版本*/
                xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
            }catch(e){
                /*抛出异常提示*/
                alert("不存在XmlHttpRequest的浏览器");
                throw e;
            }
        }
    }
    //将对象返回
    return xmlHttpRequest;
}

测试html页面，用来测试获取ajax对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用JavaScript测试AJAX</title>
    <!--引入ajax脚本-->
    <script type="text/javascript" src="js/ajaxjs.js"></script>
    <script>
        function getAjaxObject(){
            /*直接调用脚本*/
            var ajaxObject=getAjax();
            alert(ajaxObject);
        }
    </script>
</head>
<body>
 <h3>获取XmlHttpRequest</h3>
 <input type="button" onclick="getAjaxObject()" value="点击测试获取ajax对象"></input>
</body>
</html>

IE浏览器结果
在这里插入图片描述
火狐浏览器结果

chrome浏览器器结果

2）使用Ajax对象给服务器发送请求，在上面页面基础上，发送一个请求给服务器，服务器接收到异步请求后，返回给页面一个信息。需要完成以下步骤：

step1 打开与服务端的连接，使用XmlHttpRequest.open(method,url,async)方法

step2 发送请求，使用XmlHttpRequest.setRequestHeader(“Content-Type”,“appliction/x-www-form-urlencoded”)，并XmlHttpRequest.send()发送数据

step3 注册监听，使用onreadystatechange状态的变化，会调用函数里的方法，并在函数里对状态进行判断，当readyState4并且status200时，才对页面做出处理。

其中readyState有5个状态，主要用的就是状态4，status就是状态行的状态码，如果200代码返回OK。

0状态: 表示刚创建XMLHttpRequest对象, 还未调用open()方法
1状态: 表示刚调用open()方法, 但是还没有调用send()方法发送请求
2状态: 调用完了send()方法了, 请求已经开始
3状态: 服务器已经开始响应, 但是不代表响应结束
4状态: 服务器响应结束!(通常我们只关心这个状态)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用JavaScript测试AJAX</title>
    <style type="text/css">
        div{
            border: 1px solid dimgrey;
            width: 350px;
            height: 50px;
            margin-top: 10px;
            text-align: center
        }
    </style>
    <!--引入ajax脚本-->
    <script type="text/javascript" src="js/ajaxjs.js"></script>
    <script>
        /*获取一个ajax对象*/
        function getAjaxObject(){
            /*直接调用脚本*/
            var ajaxObject=getAjax();
            alert(ajaxObject);
        }
        /*发送请求给服务器*/
        function sendRequest(){
            /*1 打开与服务器的连接*/
            var jsRequest=getAjax();
            /**
             * open(method,url,async) method即提交方式，一般为GET和POST,url为提交的地址，async代表是否异步(true)还是同步(false)
             */
            jsRequest.open("GET","/day11-servletConfigContext/GetAjaxResponse?username=clyang&password=123",true);
            /*2 发送请求*/
            //通知服务器发送的数据是请求参数
            jsRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            jsRequest.send();
            /*3 注册监听*/
            jsRequest.onreadystatechange=function () {
                //确认readyState和status
                if(jsRequest.readyState==4){
                    if(jsRequest.status==200){
                        //得到响应参数,将参数显示在div中
                        var result=jsRequest.responseText;
                        var mydiv= document.getElementById("mydiv");
                        mydiv.innerText=result;
                    }
                }
            }
        }
    </script>
</head>
<body>
 <h3>获取XmlHttpRequest</h3>
 <input type="button" onclick="getAjaxObject()" value="点击测试获取ajax对象"></input>
 <input type="button" onclick="sendRequest()" value="发送请求给服务器获取返回数据">
 <div id="mydiv"></div>
</body>
</html>

发送GET请求后服务器端，多次异步请求，服务端都处理了。

在这里插入图片描述
可以看出通过JavaScript和ajax可以正常发送异步请求。

JQuery方法

使用JavaScript方法来发送异步请求比较繁琐，如果是JQuery的话代码会相对简单，下面使用JQuery实现上面同样的需求，依然在上面的html代码中进行扩展。

（1）$.ajax，执行异步AJAX请求，语法格式如下：

$.ajax(url,[data],[async],[callback])，具体参数如下：

url：发送请求地址

data：发送的数据，较为常用的就是Json

async：true异步，false同步

type：提交方式，一般选择POST或GET

success：请求成功后要执行的函数，函数参数就是服务器返回的数据，可以对数据进行处理添加到元素上去。

error：请求失败后要执行的函数

使用JavaScript方法来发送异步请求比较繁琐，如果是JQuery的话代码会相对简单，下面使用JQuery实现上面同样的需求，依然在上面的html代码中进行扩展。

（1）$.ajax，执行异步AJAX请求，语法格式如下：

$.ajax(url,[data],[async],[callback])，具体参数如下：

url：发送请求地址

data：发送的数据，较为常用的就是Json

async：true异步，false同步

type：提交方式，一般选择POST或GET

success：请求成功后要执行的函数，函数参数就是服务器返回的数据，可以对数据进行处理添加到元素上去。

error：请求失败后要执行的函数

2）.get或.post，使用AJAX的HTTP GET/POST请求从服务器加载数据，语法格式如下：

.get(url,[data],[callback])，具体参数解释参考上面.ajax。

2）.get或.post，使用AJAX的HTTP GET/POST请求从服务器加载数据，语法格式如下：

.get(url,[data],[callback])，具体参数解释参考上面.ajax。

（3）$(selector).load，从服务器加载数据，并把返回的数据放置到指定的元素中，语法格式如下：

$(selector).load(url,data,callback)，这个可以用在注册提示用户已登录，将结果直接回显到当前元素上面。

/*$(selector).load*/
        function jqueryAjax3(){
            var url="/day11-servletConfigContext/GetAjaxResponse";
            var data={"username":"clyang","password":"123"};
            $("#mydiv2").load(url,data,function(result){
                /*默认会自动将服务器返回的结果加载到元素上*/
                alert(result);
            });
        }

整体测试代码
在这里插入图片描述

总结

以上是对Ajax的部分总结，它有两种方式可以使用，实际开发中一般使用JQuery来使用。

原文链接：https://blog.csdn.net/qq_54088719/article/details/121666044