概念: ASynchronous JavaScript And XML 异步的JavaScript 和 XML
1、异步和同步:客户端和服务器端相互通信的基础上
-> 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
->客户端不需要等待服务器端的响应。在服务器处理请求的过程中,客户端可以进行其他的操作
2、Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
->通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
-> 传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。
javascript代码如下(示例):
//javascript代码 var xmlhttp;//1.创建核心对象 if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } //2. 建立连接 /* 参数: 1. 请求方式:GET、POST * get方式,请求参数在URL后边拼接。send方法为空参 * post方式,请求参数在send方法中定义 2. 请求的URL: 3. 同步或异步请求:true(异步)或 false(同步) */ //将URL改成你自己的地址 xmlhttp.open("GET", "<%=request.getContextPath()%>/testDemo?name=zhangsan", true); //3、将请求发送到服务器。 xmlhttp.send(); //4.接受并处理来自服务器的响应结果 //获取方式 :xmlhttp.responseText //当xmlhttp对象的就绪状态改变时,触发事件onreadystatechange。 //接收服务器端的响应(readyState=4表示请求已完成且响应已就绪 status=200表示请求响应一切正常) xmlhttp.onreadystatechange = function () { //判断readyState就绪状态是否为4,判断status响应状态码是否为200 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //获取服务器的响应结果 var responseText = xmlhttp.responseText; alert(responseText); } }
java后端接收代码如下(示例):
//.取得参数, String name=request.getParameter("name"); System.out.println(name);//打印输出取得的参数 //将数据信息回写给ajax response.getWriter().write("hello");
代码如下(示例):
1. $.ajax()
-> 语法:$.ajax({键值对});
代码如下(示例):
//使用$.ajax()发送异步请求 $.ajax({ url:"<%=request.getContextPath()%>/testDemo" , // 请求路径 type: "POST", //请求方式 data: {"name": "zhangsan"},//请求参数 dataType: "JSON", //设置接受到的响应数据的格式,还有很多格式,如:text //async:false,//默认是true(异步),false(同步) success: function (data) {//响应成功后的回调函数 alert(data); } }, error: function () { alert("出错啦..."); }, }); //java代码和上述java代码一样即可
2. $.get():发送get请求(ajax的简化)
-> 语法:$.get(url, [data], [callback], [type])
* url:请求路径
* data:请求参数
* callback:回调函数
* type:响应结果的类型
代码如下(示例):
$.get("<%=request.getContextPath()%>/testDemo",{name:"zhangsan"},function (data) { alert(data); },"text");
3. $.post():发送post请求(ajax的简化)
->语法:$.post(url, [data], [callback], [type])
* url:请求路径
* data:请求参数
* callback:回调函数
* type:响应结果的类型
代码如下(示例):
$.post("<%=request.getContextPath()%>/testDemo",{name:"zhangsan"},function(data) { alert(data); },"text");
jsp页面:
<%-- Created by IntelliJ IDEA. User: ASUS Date: 2021/3/2 Time: 22:20 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <title>ajax局部刷新</title> <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.11.0.js"></script> <style type="text/css"> input { width: 260px; height: 25px; } input:focus {//按钮点击后改变颜色 background: #10a0e9; } </style> </head> <body style="text-align:center;"> <input type="button" value="btn1" onclick="btnfun1()"> <input type="button" value="btn2" onclick="btnfun2()"> <input type="button" value="btn3" onclick="btnfun3()"> <br> <span>你好啊!!我叫:</span> <div id="div1"> </div> </body> <script type="text/javascript"> function btnfun1() { $.ajax({ url: "<%=request.getContextPath()%>/ajaxServlet", //上传URL type: "POST", //请求方式 data: {"flag": "one"}, //需要上传的数据 dataType: "text", //设置接受到的响应数据的格式 success: function (data) { //请求成功 console.log(data); $("#div1").html(data); }, error: function () { alert("出错啦..."); },//表示如果请求响应出现错误,会执行的回调函数 }); } function btnfun2() { $.ajax({ url: "<%=request.getContextPath()%>/ajaxServlet", //上传URL type: "POST", //请求方式 data: {"flag": "two"}, //需要上传的数据 dataType: "text", //设置接受到的响应数据的格式 success: function (data) { //请求成功 console.log(data); $("#div1").html(data); }, error: function () { alert("出错啦..."); },//表示如果请求响应出现错误,会执行的回调函数 }); } function btnfun3() { $.ajax({ url: "<%=request.getContextPath()%>/ajaxServlet", //上传URL type: "POST", //请求方式 data: {"flag": "three"}, //需要上传的数据 dataType: "text", //设置接受到的响应数据的格式 success: function (data) { //请求成功 console.log(data); $("#div1").html(data); }, error: function () { alert("出错啦..."); },//表示如果请求响应出现错误,会执行的回调函数 }); } </script> </html>
java代码
package test3_2.ajax; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @WebServlet("/ajaxServlet") public class AjaxServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.setContentType("text/html; charset=UTF-8"); response.setCharacterEncoding("UTF-8"); //1、获取ajax传递过来的参数信息 String flag = request.getParameter("flag"); System.out.println(flag); //2、需要返回的数据信息 String data = " "; if("one".equals(flag)){//流行歌曲 data = "张三"; }else if("two".equals(flag)){//经典歌曲 data = "李四"; }else if("three".equals(flag)){//摇滚歌曲 data = "老王"; } //3、将数据信息回写给ajax response.getWriter().write(data); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request,response); } }
截图:
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
深圳SEO优化公司营口网站seo优化哪家好郑州关键词按天收费哪家好珠海模板网站建设价格杭州设计网站推荐淮安外贸网站建设多少钱无锡百姓网标王价格松原营销网站宝鸡网站设计公司迪庆网站优化按天计费多少钱日照网站推广工具哪家好长春阿里店铺托管报价青岛模板网站建设多少钱乐山品牌网站设计济南网站优化按天扣费推荐平湖网站优化按天计费迁安百搜标王公司新乡网站定制报价陇南百姓网标王推广推荐黑河百度网站优化多少钱固原SEO按天收费推荐黄冈企业网站制作潮州建站报价大芬网站seo优化报价哈密网络营销公司南平seo网站推广推荐龙华网站推广工具公司岳阳网页制作哪家好白银百度网站优化排名多少钱青岛关键词按天计费价格运城设计公司网站公司歼20紧急升空逼退外机英媒称团队夜以继日筹划王妃复出草木蔓发 春山在望成都发生巨响 当地回应60岁老人炒菠菜未焯水致肾病恶化男子涉嫌走私被判11年却一天牢没坐劳斯莱斯右转逼停直行车网传落水者说“没让你救”系谣言广东通报13岁男孩性侵女童不予立案贵州小伙回应在美国卖三蹦子火了淀粉肠小王子日销售额涨超10倍有个姐真把千机伞做出来了近3万元金手镯仅含足金十克呼北高速交通事故已致14人死亡杨洋拄拐现身医院国产伟哥去年销售近13亿男子给前妻转账 现任妻子起诉要回新基金只募集到26元还是员工自购男孩疑遭霸凌 家长讨说法被踢出群充个话费竟沦为间接洗钱工具新的一天从800个哈欠开始单亲妈妈陷入热恋 14岁儿子报警#春分立蛋大挑战#中国投资客涌入日本东京买房两大学生合买彩票中奖一人不认账新加坡主帅:唯一目标击败中国队月嫂回应掌掴婴儿是在赶虫子19岁小伙救下5人后溺亡 多方发声清明节放假3天调休1天张家界的山上“长”满了韩国人?开封王婆为何火了主播靠辱骂母亲走红被批捕封号代拍被何赛飞拿着魔杖追着打阿根廷将发行1万与2万面值的纸币库克现身上海为江西彩礼“减负”的“试婚人”因自嘲式简历走红的教授更新简介殡仪馆花卉高于市场价3倍还重复用网友称在豆瓣酱里吃出老鼠头315晚会后胖东来又人满为患了网友建议重庆地铁不准乘客携带菜筐特朗普谈“凯特王妃P图照”罗斯否认插足凯特王妃婚姻青海通报栏杆断裂小学生跌落住进ICU恒大被罚41.75亿到底怎么缴湖南一县政协主席疑涉刑案被控制茶百道就改标签日期致歉王树国3次鞠躬告别西交大师生张立群任西安交通大学校长杨倩无缘巴黎奥运