ajax 学习

一，ajax是什么？

ajax，“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

一个page内，有个下拉框，表示部门列表，前端向后端发送一个请求，获取具体的列表。

这时候，没有做页面跳转，只是局部更新数据，就很适合发送ajax请求。如果发送jsp请求，那么就更新整个页面，跳转到其他地方去了。

 

在使用form表单的时候,一旦点击提交触发submit事件，一般会使得页面跳转，页面间的跳转等行为的控制权往往在后端，后端会控制页面的跳转及数据传递，但是在某些时候不希望页面跳转，或者说想要将控制权放在前端，通过js来操作页面的跳转或者数据变化。

一般这种异步的操作，我们都会想到ajax方式，因此在实现了功能后就整理了这篇文章，通过ajax方法实现form表单的提交并进行后续的异步操作。

 

二，怎么使用？

前端按照如下格式提交，可以提交单个参数，也可以提交form数据。（js原生的可能比较麻烦，使用jQuery封装的库比较方便。）

后端就是普通的Servlet，路径配置好，在前端请求的时候需要写url。

var configObj = {
method //数据的提交方式：get和post
url //数据的提交路径
async //是否支持异步刷新，默认是true
data //需要提交的数据
dataType //服务器返回数据的类型，例如xml,String,Json等
success //请求成功后的回调函数
error //请求失败后的回调函数
}


  function login() {
            $.ajax({
            //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/users/login" ,//url
                data: $('#form1').serialize(),
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result.resultCode == 200) {
                        alert("SUCCESS");
                    }
                    ;
                },
                error : function() {
                    alert("异常！");
                }
            });
        }

 

三，返回的数据怎么处理？

数据返回，用json格式。

简单的说Ajax请求通过XMLHttpRequest对象发送请求，该对象有四个状态（readyState）：

0-未初始化、1-正在初始化、2-发送数据、3-正在发送数据、4-完成。

当XMLHttpRequest.readyState为4时，表示ajax请求已经完成可以得到响应结果。

ajax的success和error方法根据响应状态码来触发。当XMLHttpRequest.status为200的时候，表示响应成功，此时触发success().其他状态码则触发error()。

除了根据响应状态码外，ajax还会在下列情况下走error方法：

1. 返回数据类型不是JSON

2. 网络中断

3. 后台响应中断

 

四，完整demo

前端

$(document).ready(function(){
	$("button").click(function(){
		$.post("/practice_system/Test1",{
			name:"程哥",
			url:"http://www.cheng1996.cn"
		},
		function(data,status){
			alert("数据: \n" + data + "\n状态: " + status);
			var jsonArray = JSON.parse(data);
			console.log(jsonArray);
			for(var i=0;i<jsonArray.length;i++)
			{
				console.log(jsonArray[0].name);
				console.log(jsonArray[0].url);
			}
		});
	});
});

 

后端Servlet，和普通的request请求一样，使用普通的servlet来处理

@WebServlet("/Test1")
public class Test1 extends HttpServlet {
	private static final long serialVersionUID = 1L;
 
	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doPost(request, response);
	}
 
	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		String name = request.getParameter("name");
		String url = request.getParameter("url");
		System.out.println(name);
		System.out.println(url);
 
		response.setContentType("text/html");
		response.setCharacterEncoding("utf-8");// 注意設置為utf-8否則前端接收到的中文為亂碼
		PrintWriter out = response.getWriter();
 
		Gson gson = new Gson();
		ArrayList<Test1Object> arraylistTest = new ArrayList<Test1Object>();
 
		Test1Object t1 = new Test1Object();
		Test1Object t2 = new Test1Object();
 
		t1.setName(name);
		t1.setUrl(url);
		t2.setName(name);
		t2.setUrl(url);
 
		arraylistTest.add(t1);
		arraylistTest.add(t2);
 
		String info = gson.toJson(arraylistTest);
		// 打印出檢查
		System.out.println(info);
		// 返回給前端
		out.write(info);
	}
 

把所有信息内容都包装到一个json字符串里，然后通过out一次性输出到前端。
 

 

 

参考资料

AJAX 教程

https://www.runoob.com/ajax/ajax-tutorial.html

使用Servlet处理AJAX请求

https://www.cnblogs.com/chy18883701161/archive/2019/12/28/11431231.html

JQuery中Ajax的操作完整例子

https://blog.csdn.net/qq_33714487/article/details/79112555

利用ajax和servlet实现前后端数据交互（json）

https://blog.csdn.net/mm1030533738/article/details/81172956

基于servlet和ajax的前后台交互完整例子（通过json交互）

https://blog.csdn.net/HelloCode1900/article/details/81531415

使用ajax方法实现form表单的提交

https://www.cnblogs.com/han-1034683568/p/7199168.html

使用ajax提交form表单，包括ajax文件上传

https://www.cnblogs.com/zhuxiaojie/p/4783939.html

ajax接收遍历处理json格式数据

https://www.cnblogs.com/dibaosong/p/4572274.html

ajax在什么情况下会走success和error

https://blog.csdn.net/u011277123/article/details/60756511/