java Ajax入门

java Ajax入门



前言

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


一、同步和异步

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

(1)同步:一个响应结束后才能发送下一个请求,页面在请求期间不能做其他事情。

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

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

二、Ajax的使用

Ajax的使用,本质是使用XmlHttpRequest对象给服务器发送请求和获取数据,通过JavaScriptJQuery都可以使用它,下面简单的介绍下如何使用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来使用。


版权声明:本文为qq_54088719原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。