Ajax的一些用法-CSDN博客

本文链接：https://blog.csdn.net/BossZhou_/article/details/118379036

Ajax

一、请求的五个步骤

创建一个XMLHttpRequest异步对象
设置请求方式和请求地址
接着，用send发送请求
监听状态变化
最后，接收返回的数据

常用状态码
200：成功
404：未找到页面

二、同步与异步

同步提交：当用户发送请求时，当前页面不可以使用，服务器响应页面到客户端，响应完成，用户才可以使用页面。

异步提交：当用户发送请求时，当前页面还可以继续使用，当异步请求的数据响应给页面，页面把数据显示出来。

默认值为true，异步。
异步请求无论请求的时间长或者短，用户都可以操作其他内容，不用等待。

三、标准写法

前端

$(function(){
    $("#btn3").click(function(){
        //准备好要发的数组
        var array=[16,18,56];
        var jsonArray=JSON.stringify(array);
        $.ajax({
                "url":"send/three/array.html",//请求的url地址
                "async":"true",//请求是否异步，默认为异步，这也是ajax重要特性
                "type":"post", //请求方式
                "data":jsonArray,//参数值（{"id":"value"}也可以这样写）
                "dataType":"text",//返回格式为text
            	"contentType":"application/json;charset=UTF-8",
                "success":function (response) {
                    alert(response);//输出后端成功返回的数据
                },
                "error":function (response) {
                    alert(response);//输出后端失败返回的数据
                }
            }
        );
    });
});

后端

@ResponseBody
@RequestMapping("/send/three/array.html")
public String testReceiveArrayThreee(@RequestBody List<Integer> array){
    for (int i : array) {
        System.out.println(i);
    }
    return  "success";
}

补充

url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。
type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。
async: 要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
data: 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格式，例如{foo1:“bar1”,foo2:“bar2”}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:[“bar1”,“bar2”]}转换为&foo=bar1&foo=bar2。
contentType：要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。
success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
(1)由服务器返回，并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //调用本次ajax请求时传递的options参数
}
error:要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。
ajax事件函数如下：
function(XMLHttpRequest, textStatus, errorThrown){
//通常情况下textStatus和errorThrown只有其中一个包含信息
this; //调用本次ajax请求时传递的options参数
}