up:: jQuery事件处理方法
本篇博客主要介绍JQuery中对Ajax进行了大幅度的简化和封装的内容；
果然“懒惰”是程序员的提升效率的有效推动力！！！
一：简介
已经知道，JavaScript是一种浏览器脚本语言，Ajax是一种内嵌到浏览器中的一种技术；
JQuery是一个以JavaScript为基础的plugin，即JQuery可以简化JavaScript的开发；JQuery也可以简化Ajax的开发；
Ajax的流程包括创建XmlHttprequest对象、发送Ajax请求、处理服务器响应三个步骤；比较麻烦；JQuery也提供了对Ajax的支持；在JQuery中对Ajax进行了大幅度的简化和封装；
**即在引入jQuery文件后，在html文件的
标签中，就可以使用$.ajax(方法中书写一个json表达式，使用Ajax！！！之所以这么简单背后是jQuery的简化的“plugin”；
二：基本介绍&简单示例：
为了使用jQuery需要先把jQuery文件复制进来：
基本内容和Ajax同步和异步的区别中类似，其中
NewsListServlet类：略微修改如下：
（1）后台处理后的数据向前台传的时候，需要转成JSON；这需要引入fastjson的jar包；
（2）这个Servlet并没有主动重定向至news.html；而是在这儿默默的等待，等待news.html的Ajax的XmlHttpServlet主动去请求访问这个servlet；
（3）这个Servlet通过，response.getWriter().println(newsJsonStr);将数据加入到了响应中去了；
（4）为了演示$.ajax()中data传递参数，servlet中设置了if()else if()判断语句；
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
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 com.alibaba.fastjson.JSON;
/**
* Servlet implementation class NewsListServlet
*/
@WebServlet("/news_list")
public class NewsListServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public NewsListServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String type = request.getParameter("t");// 新增
List<News> list = new ArrayList<News>();
if(type != null && type.equals("pypl")) {
list.add(new News("pypl标题1","2021-1-1","pypl","pypl内容1"));
list.add(new News("pypl标题2","2021-1-2","pypl","pypl内容2"));
list.add(new News("pypl标题3","2021-1-3","pypl","pypl内容3"));
}else if(type == null || type.equals("tiobe")) {
list.add(new News("标题1","2021-1-1","TIOBE","内容1"));
list.add(new News("标题2","2021-1-2","TIOBE","内容2"));
list.add(new News("标题3","2021-1-3","TIOBE","内容3"));
}
// 在Servlet处理后，对外进行字符串序列化的时候，一律将其转化为JSON；通过JSON，可以对数据进行有效的描述；
// 然后在前端的html中，再通过JavaScript自带的JSON处理方式，将从这儿发送过去的数据进行解析
// 将List转成JSON需要，引入fastjson包
String newsJsonStr = JSON.toJSONString(list);
System.out.println(newsJsonStr);
response.setContentType("text/html;charset=UTF-8"); // json中包含了中文
response.getWriter().println(newsJsonStr);
}
}
新增 jquery_news.html ：
可以看到，（1）$.ajax()中的参数是一个json； （2）可以jQuery的.ajax()方法大幅简化了ajax的使用； （3） _ _ **由于jQuery正在逐渐被淘汰，其他如Vue、React等前端框架是否提供了ajax的封装和简化？**__ （4）下面的 ** __(function()){}：就绪函数是啥好像目前没必要深究，知道其在这儿的作用__ ** （在页面加载完毕后，执行这个function里面的代码）就行；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.5.1.js" ></script>
<script>
$(function(){ // 创建一个页面就绪函数，其用途是在页面加载完毕后，执行这个function里面的代码；
$.ajax({
"url":"/ajax/news_list",
"type":"get",
"data":"t=tiobe",
"dataType":"json", // 在JavaScript中json的key可以不加引号，但是为了严谨和防止混乱，还是加上引号吧；
"success":function(json){
console.log(json);
for(var i=0;i<json.length;i++){
// append()的作用可以将append()中的html代码段追加到div的最后
$("#container").append("<h1>"+json[i].title+"</h1>");
}
}
})
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>效果：
三：$.ajax({}）中的JSON表达式添加error项：
jquery_news.html文件中的$.ajax({}）的JSON表达表达式添加error项；为了演示执行error内容的效果，故意将JSON表达式中的type改成了post，而Servlet中是get方式，所以会报错，会执行error的部分。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.5.1.js" ></script>
<script>
$(function(){ // 创建一个页面就绪函数，其用途是在页面加载完毕后，执行这个function里面的代码；
$.ajax({
"url":"/ajax/news_list",
"type":"post",
"data":"t=tiobe",
"dataType":"json", // 在JavaScript中json的key可以不加引号，但是为了严谨和防止混乱，还是加上引号吧；
"success":function(json){
console.log(json);
for(var i=0;i<json.length;i++){
// append()的作用可以将append()中的html代码段追加到div的最后
$("#container").append("<h1>"+json[i].title+"</h1>");
}
},
"error":function(xmlhttp,errorText){ // xmlhttp和errorText哪儿来的？？？
console.log(xmlhttp);
console.log(errorText);
if(xmlhttp.status == "405"){
alert("无效的请求方式");
}else if(xmlhttp.status == "404"){
alert("未找到url资源");
}else if(xmlhttp.status == "500"){
alert("服务器内部错误");
}else{
alert("其他异常");
}
}
})
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>此时执行的效果：
执行error部分，因为是请求方式错误，故错误码为405，所以会执行error中的alert(“无效的请求方式”);部分；
在上面示例中，针对不同的错误，只是简单打印了一些信息，，在实际中，会更加的复杂，会根据实际业务的不同，针对不同的错误情况作不同的处理。
data参数最好采用json的形式 ：
