电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

Ajax實現(xiàn)局部刷新的方法實例

瀏覽:148日期:2022-06-11 15:36:35
目錄
  • 前言
  • 一、 Ajax是什么?
  • 二、實現(xiàn)方式:
    • 1.原生的JS實現(xiàn)方式(了解)
    • 2.JQeury實現(xiàn)方式
  • 小栗子
    • 總結(jié)

      前言

      最近復(fù)習(xí)了一下jQuery的一些內(nèi)容,特此整理一下一些能用的得到的知識點,以前才學(xué)jQuery的時候壓根就沒有注意到那么多的細(xì)節(jié),另外最近一直都在整理前端的一些工作中學(xué)到的小經(jīng)驗,大概還會有十篇左右的內(nèi)容,就會慢慢開始整理后端,框架,以及數(shù)據(jù)庫的一些小知識點

      一、 Ajax是什么?

      概念: ASynchronous JavaScript And XML 異步的JavaScript 和 XML

      1、異步和同步:客戶端和服務(wù)器端相互通信的基礎(chǔ)上

      -> 客戶端必須等待服務(wù)器端的響應(yīng)。在等待的期間客戶端不能做其他操作。

      ->客戶端不需要等待服務(wù)器端的響應(yīng)。在服務(wù)器處理請求的過程中,客戶端可以進(jìn)行其他的操作

      2、Ajax 是一種在無需重新加載整個網(wǎng)頁的情況下,能夠更新部分網(wǎng)頁的技術(shù)。

      ->通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,Ajax 可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下,對網(wǎng)頁的某部分進(jìn)行更新。

      -> 傳統(tǒng)的網(wǎng)頁(不使用 Ajax)如果需要更新內(nèi)容,必須重載整個網(wǎng)頁頁面。

      二、實現(xiàn)方式:

      1.原生的JS實現(xiàn)方式(了解)

      javascript代碼如下(示例):

      	//javascript代碼 var xmlhttp;//1.創(chuàng)建核心對象 if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } //2. 建立連接 /* 參數(shù):  1. 請求方式:GET、POST   * get方式,請求參數(shù)在URL后邊拼接。send方法為空參   * post方式,請求參數(shù)在send方法中定義  2. 請求的URL:  3. 同步或異步請求:true(異步)或 false(同步)  */  //將URL改成你自己的地址 xmlhttp.open("GET", "<%=request.getContextPath()%>/testDemo?name=zhangsan", true); //3、將請求發(fā)送到服務(wù)器。 xmlhttp.send(); //4.接受并處理來自服務(wù)器的響應(yīng)結(jié)果 //獲取方式 :xmlhttp.responseText //當(dāng)xmlhttp對象的就緒狀態(tài)改變時,觸發(fā)事件onreadystatechange。 //接收服務(wù)器端的響應(yīng)(readyState=4表示請求已完成且響應(yīng)已就緒 status=200表示請求響應(yīng)一切正常) xmlhttp.onreadystatechange = function () {  //判斷readyState就緒狀態(tài)是否為4,判斷status響應(yīng)狀態(tài)碼是否為200  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {  //獲取服務(wù)器的響應(yīng)結(jié)果  var responseText = xmlhttp.responseText;  alert(responseText);  } }

      java后端接收代碼如下(示例):

      		//.取得參數(shù), String name=request.getParameter("name"); System.out.println(name);//打印輸出取得的參數(shù) //將數(shù)據(jù)信息回寫給ajax response.getWriter().write("hello");

      2.JQeury實現(xiàn)方式

      代碼如下(示例):

      1. $.ajax()

      -> 語法:$.ajax({鍵值對});

      代碼如下(示例):

      	//使用$.ajax()發(fā)送異步請求		 $.ajax({  url:"<%=request.getContextPath()%>/testDemo" , // 請求路徑  type: "POST", //請求方式  data: {"name": "zhangsan"},//請求參數(shù)  dataType: "JSON", //設(shè)置接受到的響應(yīng)數(shù)據(jù)的格式,還有很多格式,如:text  //async:false,//默認(rèn)是true(異步),false(同步)  success: function (data) {//響應(yīng)成功后的回調(diào)函數(shù)   alert(data);   }  },  error: function () {   alert("出錯啦...");  },  });  	//java代碼和上述java代碼一樣即可

      2. $.get():發(fā)送get請求(ajax的簡化)

      -> 語法:$.get(url, [data], [callback], [type])

      * url:請求路徑

      * data:請求參數(shù)

      * callback:回調(diào)函數(shù)

      * type:響應(yīng)結(jié)果的類型

      代碼如下(示例):

       $.get("<%=request.getContextPath()%>/testDemo",{name:"zhangsan"},function (data) {  alert(data);  },"text");

      3. $.post():發(fā)送post請求(ajax的簡化)

      ->語法:$.post(url, [data], [callback], [type])

      * url:請求路徑

      * data:請求參數(shù)

      * callback:回調(diào)函數(shù)

      * type:響應(yīng)結(jié)果的類型

      代碼如下(示例):

       $.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><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"}, //需要上傳的數(shù)據(jù)  dataType: "text", //設(shè)置接受到的響應(yīng)數(shù)據(jù)的格式  success: function (data) {	//請求成功  console.log(data);  $("#div1").html(data);  },  error: function () {  alert("出錯啦...");  },//表示如果請求響應(yīng)出現(xiàn)錯誤,會執(zhí)行的回調(diào)函數(shù) }); } function btnfun2() { $.ajax({  url: "<%=request.getContextPath()%>/ajaxServlet",	//上傳URL  type: "POST", //請求方式  data: {"flag": "two"}, //需要上傳的數(shù)據(jù)  dataType: "text", //設(shè)置接受到的響應(yīng)數(shù)據(jù)的格式  success: function (data) {	//請求成功  console.log(data);  $("#div1").html(data);  },  error: function () {  alert("出錯啦...");  },//表示如果請求響應(yīng)出現(xiàn)錯誤,會執(zhí)行的回調(diào)函數(shù) }); } function btnfun3() { $.ajax({  url: "<%=request.getContextPath()%>/ajaxServlet",	//上傳URL  type: "POST", //請求方式  data: {"flag": "three"}, //需要上傳的數(shù)據(jù)  dataType: "text", //設(shè)置接受到的響應(yīng)數(shù)據(jù)的格式  success: function (data) {	//請求成功  console.log(data);  $("#div1").html(data);  },  error: function () {  alert("出錯啦...");  },//表示如果請求響應(yīng)出現(xiàn)錯誤,會執(zhí)行的回調(diào)函數(shù) }); }</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傳遞過來的參數(shù)信息 String flag = request.getParameter("flag"); System.out.println(flag); //2、需要返回的數(shù)據(jù)信息 String data = " "; if("one".equals(flag)){//流行歌曲  data = "張三"; }else if("two".equals(flag)){//經(jīng)典歌曲  data = "李四"; }else if("three".equals(flag)){//搖滾歌曲  data = "老王"; } //3、將數(shù)據(jù)信息回寫給ajax response.getWriter().write(data); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request,response); }}

      截圖:

      總結(jié)

      到此這篇關(guān)于Ajax實現(xiàn)局部刷新的文章就介紹到這了,更多相關(guān)Ajax局部刷新內(nèi)容請搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持!

      標(biāo)簽: Ajax
      相關(guān)文章:
      主站蜘蛛池模板: VI设计-LOGO设计公司-品牌设计公司-包装设计公司-导视设计-杭州易象设计 | 阀门智能定位器_电液动执行器_气动执行机构-赫尔法流体技术(北京)有限公司 | 上海璟文空运首页_一级航空货运代理公司_机场快递当日达 | 外观设计_设备外观设计_外观设计公司_产品外观设计_机械设备外观设计_东莞工业设计公司-意品深蓝 | 净化工程_无尘车间_无尘车间装修-广州科凌净化工程有限公司 | MES系统工业智能终端_生产管理看板/安灯/ESOP/静电监控_讯鹏科技 | 走心机厂家,数控走心机-台州博城智能科技有限公司 | 武汉天安盾电子设备有限公司 - 安盾安检,武汉安检门,武汉安检机,武汉金属探测器,武汉测温安检门,武汉X光行李安检机,武汉防爆罐,武汉车底安全检查,武汉液体探测仪,武汉安检防爆设备 | 水性绝缘漆_凡立水_绝缘漆树脂_环保绝缘漆-深圳维特利环保材料有限公司 | 立刷【微电签pos机】-嘉联支付立刷运营中心 | 绿萝净除甲醛|深圳除甲醛公司|测甲醛怎么收费|培训机构|电影院|办公室|车内|室内除甲醛案例|原理|方法|价格立马咨询 | 海日牌清洗剂-打造带电清洗剂、工业清洗剂等清洗剂国内一线品牌 海外整合营销-独立站营销-社交媒体运营_广州甲壳虫跨境网络服务 | 青岛侦探_青岛侦探事务所_青岛劝退小三_青岛调查出轨取证公司_青岛婚外情取证-青岛探真调查事务所 | 重庆监控_电子围栏设备安装公司_门禁停车场管理系统-劲浪科技公司 | 定量包装机,颗粒定量包装机,粉剂定量包装机,背封颗粒包装机,定量灌装机-上海铸衡电子科技有限公司 | 电动葫芦|防爆钢丝绳电动葫芦|手拉葫芦-保定大力起重葫芦有限公司 | 天津暖气片厂家_钢制散热器_天津铜铝复合暖气片_维尼罗散热器 | 石家庄救护车出租_重症转院_跨省跨境医疗转送_活动赛事医疗保障_康复出院_放弃治疗_腾康26年医疗护送转诊团队 | 知名电动蝶阀,电动球阀,气动蝶阀,气动球阀生产厂家|价格透明-【固菲阀门官网】 | 东莞工厂厂房装修_无尘车间施工_钢结构工程安装-广东集景建筑装饰设计工程有限公司 | Q361F全焊接球阀,200X减压稳压阀,ZJHP气动单座调节阀-上海戎钛 | 天津次氯酸钠酸钙溶液-天津氢氧化钠厂家-天津市辅仁化工有限公司 | 成人纸尿裤,成人尿不湿,成人护理垫-山东康舜日用品有限公司 | 网优资讯-为循环资源、大宗商品、工业服务提供资讯与行情分析的数据服务平台 | 石家庄救护车出租_重症转院_跨省跨境医疗转送_活动赛事医疗保障_康复出院_放弃治疗_腾康26年医疗护送转诊团队 | 大立教育官网-一级建造师培训-二级建造师培训-造价工程师-安全工程师-监理工程师考试培训 | 洛阳防爆合格证办理-洛阳防爆认证机构-洛阳申请国家防爆合格证-洛阳本安防爆认证代办-洛阳沪南抚防爆电气技术服务有限公司 | 【甲方装饰】合肥工装公司-合肥装修设计公司,专业从事安徽办公室、店面、售楼部、餐饮店、厂房装修设计服务 | 布袋除尘器-单机除尘器-脉冲除尘器-泊头市兴天环保设备有限公司 布袋除尘器|除尘器设备|除尘布袋|除尘设备_诺和环保设备 | 阳光模拟试验箱_高低温试验箱_高低温冲击试验箱_快速温变试验箱|东莞市赛思检测设备有限公司 | 施工电梯_齿条货梯_烟囱电梯_物料提升机-河南大诚机械制造有限公司 | 成都租车_成都租车公司_成都租车网_众行宝 | 杭州成人高考_浙江省成人高考网上报名 | 安徽合肥格力空调专卖店_格力中央空调_格力空调总经销公司代理-皖格制冷设备 | 护栏打桩机-打桩机厂家-恒新重工 | 传递窗_超净|洁净工作台_高效过滤器-传递窗厂家广州梓净公司 | 示波器高压差分探头-国产电流探头厂家-南京桑润斯电子科技有限公司 | 广州番禺搬家公司_天河黄埔搬家公司_企业工厂搬迁_日式搬家_广州搬家公司_厚道搬迁搬家公司 | 工业铝型材生产厂家_铝合金型材配件批发精加工定制厂商 - 上海岐易铝业 | 软文推广发布平台_新闻稿件自助发布_媒体邀约-澜媒宝 | 激光内雕_led玻璃_发光玻璃_内雕玻璃_导光玻璃-石家庄明晨三维科技有限公司 激光内雕-内雕玻璃-发光玻璃 |