首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Ajax实现局部刷新的方法实例

Posted in Javascript onMarch 31, 2021

前言

最近复习了一下jQuery的一些内容，特此整理一下一些能用的得到的知识点，以前才学jQuery的时候压根就没有注意到那么多的细节，另外最近一直都在整理前端的一些工作中学到的小经验，大概还会有十篇左右的内容，就会慢慢开始整理后端，框架，以及数据库的一些小知识点

一、 Ajax是什么？

概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML

1、异步和同步：客户端和服务器端相互通信的基础上

     -> 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。

     ->客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作

2、Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

     ->通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

     -> 传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

二、实现方式：

1.原生的JS实现方式（了解）

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");

2.JQeury实现方式

代码如下（示例）：

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);
 }
}

截图：

Ajax实现局部刷新的方法实例

Ajax实现局部刷新的方法实例

Ajax实现局部刷新的方法实例

总结

到此这篇关于Ajax实现局部刷新的文章就介绍到这了,更多相关Ajax局部刷新内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

Ajax实现局部刷新的方法实例

- Author -

bug_producter

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
Jan 15 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
May 14 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 Javascript
Javascript判断文件是否存在(客户端/服务器端)
Sep 16 Javascript
javascript限制文本框输入值类型的方法
May 07 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
May 14 Javascript
详解JavaScript函数
Dec 01 Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 Javascript
Node.Js中实现端口重用原理详解
May 03 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
May 01 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 19 Javascript
前端学习——JavaScript原生实现购物车案例
JavaScript中关于预编译、作用域链和闭包的理解
JavaScript 去重和重复次数统计
Mar 31 #Javascript
vue中三级导航的菜单权限控制
Mar 31 #Vue.js
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
vue3中的组件间通信
vue前端工程的搭建
HBuilder(1) SeaTable(1) tree shaking(1) celery(1) MutationObserver(1) GPU(1) Three.js(1) 条形码(1) kubernetes(1) OOP(1)
You might like
php zip文件解压类代码
2009/12/02 PHP
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
PHP删除字符串中非字母数字字符方法总结
2019/01/20 PHP
Javascript优化技巧（文件瘦身篇）
2008/01/28 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
2015/08/13 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
JavaScript基础篇（6）之函数表达式闭包
2015/12/11 Javascript
jquery实现全屏滚动
2015/12/28 Javascript
jQuery插件支持同一页面被多次调用
2016/02/14 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
Vue.js项目实战之多语种网站的功能实现（租车）
2019/08/07 Javascript
token 机制和实现方式
2020/12/15 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
Python实现的二维码生成小软件
2014/07/11 Python
Python使用random和tertools模块解一些经典概率问题
2015/01/28 Python
Python编写一个闹钟功能
2017/07/11 Python
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
Python闭包和装饰器用法实例详解
2019/05/22 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
欧洲当代手工玻璃和瓷器的领先品牌：LSA International
2018/06/03 全球购物
Chicco婴儿用品美国官网：汽车座椅、婴儿推车、高脚椅等
2018/11/05 全球购物
迟到检讨书400字
2014/01/13 职场文书
还款承诺书范文
2014/05/20 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
2019财务毕业实习报告
2019/06/27 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
导游词之香港-太平山顶
2019/10/18 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
Python实现信息管理系统
2022/06/05 Python
Go语言编译原理之源码调试
2022/08/05 Golang