首页
所有分类
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 相关文章推荐
JS 控制小数位数的实现代码
Aug 02 Javascript
在网站上应该用的30个jQuery插件整理
Nov 03 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
Jan 17 Javascript
jquery写个checkbox——类似邮箱全选功能
Mar 19 Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 Javascript
AngularJS 路由详解和简单实例
Jul 28 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
JQuery控制DIV的选取实现方法
Sep 18 Javascript
js简易版购物车功能
Jun 17 Javascript
js实现鼠标跟随运动效果
Aug 02 Javascript
Vue表情输入组件 微信face表情组件
Feb 11 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
Apr 26 Javascript
前端学习——JavaScript原生实现购物车案例
JavaScript中关于预编译、作用域链和闭包的理解
JavaScript 去重和重复次数统计
Mar 31 #Javascript
vue中三级导航的菜单权限控制
Mar 31 #Vue.js
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
vue3中的组件间通信
vue前端工程的搭建
幻读(5) GZIP(2) IIS7(1) 磁盘分区(1) innoDB(3) .NET Framework(2) MVCC(4) 事务并发(1) DBLink(1) 复读(1)
You might like
php自动获取目录下的模板的代码
2010/08/08 PHP
Laravel 5 框架入门（二）构建 Pages 的管理功能
2015/04/09 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
豆瓣网的jquery代码实例
2008/06/15 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
详解vue 单页应用（spa）前端路由实现原理
2018/04/04 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
2019/01/24 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
2019/05/16 Javascript
jQuery位置选择器用法实例分析
2019/06/28 jQuery
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
基于Python __dict__与dir()的区别详解
2017/10/30 Python
python 接口返回的json字符串实例
2018/03/27 Python
Python实现按当前日期（年、月、日）创建多级目录的方法
2018/04/26 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
如何使用python切换hosts文件
2020/04/29 Python
捷克街头、运动和滑板一站式商店：BoardStar.cz
2019/10/06 全球购物
JSP和EJB可以共享HttpSession么？EJB里面可以改变session里面的内容
2013/06/05 面试题
与C++相比，Java中的数组有什么不同
2014/03/25 面试题
技校生自我鉴定范文
2013/09/26 职场文书
劳资专员岗位职责
2013/12/27 职场文书
求职信范文英文版
2014/01/05 职场文书
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
消防志愿者活动方案
2014/08/23 职场文书
就业协议书怎么填
2014/09/15 职场文书
投标承诺函范文
2015/01/21 职场文书
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP
Vue3中的Refs和Ref详情
2021/11/11 Vue.js
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS