首页
所有分类
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 相关文章推荐
Jquery 基础学习笔记
May 29 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
Vue.js表单控件实践
Oct 27 Javascript
js鼠标经过tab选项卡时实现切换延迟
Mar 24 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
微信小程序动态添加分享数据
Jun 14 Javascript
js禁止表单重复提交
Aug 29 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 Javascript
配置一个vue3.0项目的完整步骤
Apr 26 Javascript
django js 实现表格动态标序号的实例代码
Jul 12 Javascript
vue style width a href动态拼接问题的解决
Aug 07 Javascript
基于JavaScript实现简单的轮播图
Mar 03 Javascript
前端学习——JavaScript原生实现购物车案例
JavaScript中关于预编译、作用域链和闭包的理解
JavaScript 去重和重复次数统计
Mar 31 #Javascript
vue中三级导航的菜单权限控制
Mar 31 #Vue.js
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
vue3中的组件间通信
vue前端工程的搭建
feDisplacementMap(1) Navigator(1) Apache(17) Flutter(2) 数据重复(1) uniapp(4) Hudi(1) tabBar(1) self(1) element-china-area-data(1)
You might like
建立文件交换功能的脚本（一）
2006/10/09 PHP
php数组的概述及分类与声明代码演示
2013/02/26 PHP
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
以实例全面讲解PHP中多进程编程的相关函数的使用
2015/08/18 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
Javascript Select操作大集合
2009/05/26 Javascript
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
JavaScript 原型继承之构造函数继承
2011/08/26 Javascript
jQuery中parent()方法用法实例
2015/01/07 Javascript
javascript拖拽应用实例（二）
2016/03/25 Javascript
javaScript知识点总结(必看篇)
2016/06/10 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
python中反射用法实例
2015/03/27 Python
python复制文件的方法实例详解
2015/05/22 Python
Python实现截屏的函数
2015/07/25 Python
简单了解python模块概念
2018/01/11 Python
python ---lambda匿名函数介绍
2019/03/13 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
Tommy Hilfiger美国官网：美国高端休闲领导品牌
2019/01/14 全球购物
中学生个人自我评价
2014/02/06 职场文书
市场营销专业大学生职业生涯规划文
2014/03/06 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
税务职业生涯规划书范文
2014/09/16 职场文书
班主任2015新年寄语
2014/12/08 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python