最近温习了一下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="https://www.jb51.net/<%=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"> <input type="button" value="btn2"> <input type="button" value="btn3"> <br> <span>你好啊！！我叫：</span> <div> </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代码