2000字速通Ajax

Ajax

原生js实现Ajax参照参照示例：http://www.w3school.com.cn/php/php_ajax_xml.asp

ajax全称 Asynchronous JavaScript And Xml 是一种应用于Web开发的前后端数据交互方式
百度百科解释： 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作
上述百度的解释就指出了Ajax最强大之处—> 异步交互

同步与异步请求

在不使用Ajax的情况下，用户操作页面时每一次请求都需要刷新整个页面去请求服务器数据，此时页面会进入类似“ 假死 ”的状态，用户在界面加载过程中无法进行任何的其他操作，从而极大的降低了用户体验。

而使用Ajax操作，用户的请求可以进行局部刷新 不需要重载整个页面就能将数据呈现在网页上这也是Ajax的最大亮点

Ajax全称中有一个单词Asynchronous，会发现在Java多线程中的同步锁synchronized与之类似。

在多线程中我们可以使用synchronized来保证线程安全，即同一时刻只能由一条线程访问被synchronized锁住的资源，而其他线程将会进入阻塞状态，从而实现了线程同步
那么放到Ajax中来谈，Ajax异步请求可以保证用户在向服务器发送请求之后继续进行其他操作，等到之前的请求响应回来之后再进行操作。

但是一定要将多线程的同步和Ajax的同步异步区分开来，两者并不是同一概念

当然Ajax也同样支持同步请求：
async( 是否异步 )：false 即为同步
async: true 即为异步
通常情况下，默认为异步(async为true)

使用Ajax

使用JS实现Ajax

原生js已经提供了Ajax的函数 而XMLHttpRequest就是Ajax的核心对象

// 创建xmlHttpReuquest对象
if (window.XMLHttpRequest) {
     xmlhttp = new XMLHttpRequest();
 } else {
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 }
1
2
3
4
5
6

XMLHttpRequest方法

new XMLHttpRequest()  // 创建对象
abort()   // 取消当前请求
getAllReponseHeaders()   // 获取所有头部信息
getReponseHeader()    // 获取指定头部信息
open(method,url,async,user,pwd)   /*
	method: 请求方式：  get或post
	url : 请求的地址
	async:  是否异步
*/
send()  // 发送请求
setRequestHeader()  // 向要发送的报头添加信息  键值对
1
2
3
4
5
6
7
8
9
10
11

XMLHttpRequest状态码

readyState  
    0：请求未初始化
    1：服务器连接已建立
    2：请求已收到
    3：正在处理请求
    4：请求已完成且响应已就绪
1
2
3
4
5
6

XMLHttpRequest返回请求的状态号

status
    200: "OK"
    403: "Forbidden"
    404: "Not Found"
1
2
3
4

以上关于XMLHttpRequest了解即可，几乎不再使用

使用JQ实现Ajax

下面是JQ提供的常用实现ajax的异步请求函数

/*
1. $.ajax() --> 可以设置更多参数实现细节操作  默认为get请求
2. $.getJson()  --> 返回数据类型为Json格式
3. $.get()   --> 常用于获取数据
4. $.post()  --> 常用于提交数据
*/
1
2
3
4
5
6

$.ajax()

$.ajax({
    type : "" // get post 
    url : "" // 请求地址
    async : ""  // 是否异步  true异步  false同步
    date : ""  // 发送到服务器的数据
    dateType : "" // 服务器返回的数据类型
    contentType : "" // 设置请求头
    success : ""   //请求成功时调用此函数
    error : ""    // 请求失败时调用此函数
}) ;
1
2
3
4
5
6
7
8
9
10

$.getJson()

$.getJson('url',function(result){
    // 代码块
})
1
2
3

$.get

$.get('url',{发送数据},function(result){
    // 代码块  result即为获取到服务器的响应
    /*
    1. URL:请求地址
    2. data：发送给服务器的数据
    3. callback：回调函数，请求成功后执行
    4. dataType：服务器返回的数据类型
    */
})
1
2
3
4
5
6
7
8
9

$.post

$.post('url',{发送数据},function(result){
    // 代码块
})
1
2
3

补充：

function getJson(){
        alert("进入getJson")
        $.ajax({
            url:"/testJson",
            type:"post",
            async:true,
            dataType:"json",
            contentType:"json/application",
            success:function (result){
                if (result.flag === true){
                    $("#spans").text(result.message);
                }else {
                    $("#spans").text("获取json数据失败");
                }
            },
            error:function (){
                alert("进入error")
            }
        })
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

要想ajax请求正常发送并获取后端json格式数据，首先controller层要使用@Responsebody和@Controller修饰，或者直接使用@RestController修饰
另外记得要导入jq依赖并且用< script >标签引入

<script th:src="@{webjars/jquery/3.6.0/jquery.js}"></script>
1

并且script不能是自闭合标签，否则ajax请求无法发送
如果导入的jq文件是：xxx/jquery.slim.min.js压缩版的那么在jq的库中是找不到$.ajax函数的浏览器会报错 $.ajax is not function.
只需要将其替换为xxx/jquery.js即可，还有就是要注意不要重复导入jq的库，否则会可能产生冲突

$.ajax获取数据并拼接到前端视图上

function allDept(){
		alert("执行allDept方法")
		$.ajax({
			url:"/alldept",
			type:"post",
			async:true,
			dataType:"json",
			contentType:"json/application",
			success:function (result){
				for (var i = 0; i < result.depts.length; i++) {
					var str = ""+result.depts[i].id+"";
					$("#alldept").append(str)
				}
			},
			error:function (){
				alert("进入error")
			}
		})
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19