JavaWeb复习巩固
2021/12/20 1:20:34
本文主要是介绍JavaWeb复习巩固,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
第八天: ajax json ajax:Ajax即Asynchronous Javascript And XML(异步JavaScript和XML)使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,这使得程序能够更快地回应用户的操作。 Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 同步请求: 表单 超链接 特点:只要发送请求,整个页面内容都会重新加载,请求发送出去之后必须等待服务器响应回来之后才能继续操作。 异步请求: 特点:在请求响应的过程中浏览器能继续操作,不需要等待服务器响应 请求响应回来之后不需要重新加载整个网页,实现网页的局部更新Ajax实现
原始js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function createxmlhttp(){ if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } return xmlhttp; } window.onload=function () { //点击事件 document.getElementById("btn").onclick=function () { //请求参数如何被传递? 服务器响应内容如果被接收? //发送ajax(异步请求)请求步骤: //1.创建XMLHttpRequest对象 var xmlhttp=createxmlhttp(); //2.建立连接 里面参数:1.请求方式 2.请求的路径 3.判断是否是异步 true表是异步是真 false表示不是 xmlhttp.open("GET","/tomcat/servletAJAXDemo1",true); //3.发送请求 xmlhttp.send(); } } </script> </head> <body> <!--点击这个按钮无需加载整个网页就可以对局部或者部分进行刷新,将内容展现在下面的div中--> <button id="btn">发送异步请求</button><br/> <div></div> </body> </html>
package com.swlz.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("/servletAJAXDemo1") public class ServletAJAXDemo1 extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String username = request.getParameter("username"); System.out.println("hi"+username); System.out.println("servletAJAXDemo1......被访问了哦。。。。。。。。。。。"); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request,response); } }
jquery实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.11.0.min.js"></script> <script> /** * 1.请求方式 * 2.请求路径 * 3.请求参数 * 4.响应数据 */ $(function () { $("#btn").click(function () { // $.get("/ajaxServlet","username=bianyiit") $.get("/ajaxServlet",{username:"tom",password:"123"},function (data) { $("#div1").html(data) }) }); $("#btn1").click(function () { $.post("/ajaxServlet",{username:"tom",password:"123"},function (data) { $("#div1").html(data) }) }); }) </script> </head> <body> <button id="btn"> 发送get异步请求</button><br> <button id="btn1"> 发送post异步请求</button><br> <input type="text"> <br> <div id="div1"> </div> </body> </html>三种方式: $.ajax(); $.get(); $.post();
Jquery对象发送异步请求常用的三种方式 $.ajax $.post $.get
1.$.ajax是jquery发送异步请求的基本方式
$.ajax能够设置http请求的各种请求信息
2.$.get和$.post是基于$.ajax封装的更加简单的异步请求方式
$.get和$.post只能发送普通的表单类型请求
Json Json:JavaScript1. Json基本介绍
javaScript对象表示法
JavaScript :
ECMAScript(核心语法) + DOM(文档对象模型) + BOM(浏览器对象模型)
这篇关于JavaWeb复习巩固的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-06小米11i印度快充版ROM合集:极致体验,超越期待
- 2024-10-06【ROM下载】小米11i 5G 印度版系统, 疾速跃迁,定义新速度
- 2024-10-06【ROM下载】小米 11 青春活力版,青春无极限,活力全开
- 2024-10-05小米13T Pro系统合集:性能与摄影的极致融合,值得你升级的系统ROM
- 2024-10-01基于Python+Vue开发的医院门诊预约挂号系统
- 2024-10-01基于Python+Vue开发的旅游景区管理系统
- 2024-10-01RestfulAPI入门指南:打造简单易懂的API接口
- 2024-10-01初学者指南:了解和使用Server Action
- 2024-10-01Server Component入门指南:搭建与配置详解
- 2024-10-01React 中使用 useRequest 实现数据请求