java Ajax入门_失落的爱的博客-程序员信息网_ajax 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来使用。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_54088719/article/details/121666044

智能推荐

北航计算机博士后,北京航空航天大学博士后待遇_方萌-CFT的博客-程序员信息网

第二十四条 博士后在站期间的工资及其他相关待遇,按照国家有关规定执行。博士后在站期满,工资停发,住房公积金及住房补贴随之停发。第二十五条 企业博士后的工资、住房等福利待遇由与我校签订协议的联合培养单位负责。在职博士后的工资、住房等待遇由原所在单位或合作导师负责。第二十六条 博士后在站期间,学校为非在职博士后建立住房公积金,并为暂时没有租赁到公寓的非在职博士后发放住房补贴1000元/月。博士后公寓的...

ASP.NET TextBox输入时触发OnTextChanged事件_ChinaLzw的博客-程序员信息网_asp:textbox ontextchanged

关于“ASP.NET TextBox输入触发事件"的实现,解决方法五花八门,但最简单的就是以下这种方法onkeyup='__doPostBack("ctl00$cph$TxtConpanyName","")'ASPX CODE    //为了防止刷新,给控件套上UpdatePanel,可要可不要        <asp:TextBox ID="TxtConpanyNam

linux安装ffmpeg_余生大大的博客-程序员信息网_libx264 is gpl and --enable-gpl is not specified.

本文描述在linux下,怎么分别通过直接下载二进制文件,以及自行源码编译这两种方式安装ffmpeg。安装时遇到的某些问题和错误会扩展开来说明,授之以渔。方式一,直接下载二进制文件ffmpeg现在提供了静态编译版本的二进制可执行文件,可以直接下载下来使用。包含的文件有ffmpeg和ffprobe,不包含libav*等ffmpeg的库。这种安装方式比较实用于直接使用ffmpeg命令行工具的场景。访问https://johnvansickle.com/ffmpeg/这个网页,...

提升网站权重优化方法,网站权重优化步骤_欣依网络的博客-程序员信息网_页面健康度加权

SEO权重是各大搜索引擎给予网站赋予的评估或评价等级,代表着网站在某领域中的权威性、健康度及成长潜力,网站的权重越高一方面代表其越具权威性,另一方面也代表着搜索引擎对其友好度越强,会在排名、流量和信任度评价给予较好的扶持。权重是一个相对性的概念,即根据某既定指标的整体评价中相对的重要程度。如果用容易理解的方法来说,比如指数是量级统计数据,那么权重便是性质评估数据,互联网平台普遍存在指数和权重相关体系化的数据管理。一、 SEO权重与网站的关系1. 百度权重是第三方推出,收录与其没直接联系.

[转]keras报错:AttributeError: '_thread._local' object has no attribute 'value'_小白太白的博客-程序员信息网

参考链接:链接1链接2本人使用 Tensorflow + kreas 训练得到的 NLP 迁移学习模型,然后采用 Flask web 框架搭建预测模型的独立服务。单独使用该模型时一切正常,后面引入框架后报如题(AttributeError: '_thread._local' object has no attribute 'value')所示错误,网上查阅各种解决办法都没有解决,最后找到了如...

Adobe软件安装错误127替代方案_清欢Viki的博客-程序员信息网_ae安装失败错误代码127

错误近来想装Pr2018和AE2018,从网上下载了安装包,运行set-up到百分之30多时总会提示安装错误127没办法,后来想用ACC下载,结果一直在加载,转圈圈,主体一片空白可能损坏了,Adobe CC Cleanr Tool卸载重装也不管用,可能需要翻墙简直无法可说解决方案搜索了好久也没有一个具体可行的2018版解决方案所以只能换2015版,15版的set...

随便推点

paypal接入指南_技术刘~的博客-程序员信息网_paypal接入

做过跨境电商或者在海外购物网站逛过的朋友都应该知道PayPal,类似于国内流行的支付宝和微信支付,都属于第三方支付平台。在做外贸支付的时候不得不提到的就是PayPal了,毕竟它在国外的市场占有率摆在哪里,当然据做外贸的朋友介绍在东南亚某些国家和地区支付宝的市场份额反超了PayPal。背景介绍由于在国内,做的项目需要使用PayPal的并不多,就算有时候需要做外贸项目,很多选择第四方集成。据做外贸的朋友介绍,之所以选择第四方支付是因为虽然在海外PayPal的市场占有率是最高的,然而这种在线支付的普及率远

计算机用户没有管理员权限,电脑右击文件没有以管理员身份运行选项如何解决..._drzqb的博客-程序员信息网

在 电脑系统 中,有些程序的使用权限较高,很多时候都需要选择以管理员身份运行程序,一般情况下,我们可以在右键菜单中选择“以管理员身份运行程序”。但是,有的用户发现右击文件后,没有“以管理员身份运行”的选项怎么办呢?技巧分享:在 Windows 7 中,若要以管理员身份运行程序,通常会使用以下方法:使用快捷键“Ctrl”+“Shift”+ 鼠标左键打开程序,程序也会以管理员身份运行。如果要调出“以管...

java:关于json解析工具选型(JSON-java,json-lib,gson,fastjson)_10km的博客-程序员信息网

没有最好的工具,只有最适合的. 最近的项目需要对java 对象和json之间的序列化和反序列化,更准确的说是java bean对象和json之间的转换,使用哪个工具进行转换,让我犹豫了不少时间。 json工具有很多 http://json.org 中列出不少,我接触过的有JSON-java,json-lib,google-gson,还有阿里巴巴的fastjson。JSON-java我最早用过的是

三星会不会用鸿蒙系统,华为的鸿蒙系统已在路上 对手三星却要“趁虚而入”!..._weixin_39805734的博客-程序员信息网

竞争激烈的智能手机领域,能活下来的基本都有两把刷子,比如华为、苹果、小米、OV等这几个品牌,基本已经成了国内消费者入手的必选品牌,尤其是中美贸易摩擦的不断升级,使得华为将市场向国内转移,这也让华为一度成为全球季度销量冠军,这对全球年度销量冠军三星无形中带来了巨大的威胁,因为“销冠”是最好的“广告”!众所周知,虽然三星在国内手机市场份额占比仅个位数,但却在东南亚等地区非常受欢迎,市占比远远超过苹果、...

三菱FX系列PLC串口通讯协议整理_剪刀手的爱德华的博客-程序员信息网

三菱FX系列PLC串口通讯协议整理记录原因项目要求工具与资料通讯格式如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入记录原因因项目需求,要写上位机与PLC进行...

Zabbix监控_dfu65065的博客-程序员信息网

简介为什么选择zabbix:轻量(一台一般配置的机器支持监控上百台以上机器)、简单(WEB-GUI配置)、高效(支持多种方式采集数据)、企业级、开源、分布式Zabbix官方文档: https://www.zabbix.com/documentation/2.4/参考 http://www.ttlsa.com/zabbix/follow-ttlsa-to-study-zab...

推荐文章

热门文章

相关标签