想搞清楚$.ajax(),先搞清楚下面几个概念:
(摘要博客:https://blog.csdn.net/qq_41326048/article/details/86212373,仅供个人学习)
同步和异步
ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取。
同步:提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事
异步: 请求通过事件触发->服务器处理(这是浏览器仍然可以作其他事情)->处理完毕
同步交互,就是最常见的click-refresh模式,点一个连接或提交一个表单,然后整个页面被刷新
异步交互,当前很热的AJAX就是典型例子,提交请求返回对象是不可见的层,然后用javascripts根据返回数据,改变当前页面显示,譬如google map
XMLHttpRequest 对象
XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术。简单的说,也就是javascript可以及时向服务器提出请求和处理响应,而不阻塞用户。达到无刷新的效果。
(摘要:https://www.w3school.com.cn/xml/xml_http.asp,仅供个人学习)
XMLHttpRequest 对象用于在后台与服务器交换数据。
XMLHttpRequest 对象是开发者的梦想,因为您能够:
·在不重新加载页面的情况下更新网页
·在页面已加载后从服务器请求数据
·在页面已加载后从服务器接收数据
·在后台向服务器发送数据
发送同步请求
由open()方法的第三个参数决定,当第三个参数async为true时,发送异步请求,为false时则为同步请求
**
首先,我们先来看看XMLHttpRequest这个对象的属性。 它的属性有:
**
onreadystatechange 每次状态改变所触发事件的事件处理程序。
responseText 从服务器进程返回数据的字符串形式。
responseXML 从服务器进程返回的DOM兼容的文档数据对象。
status 从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪)
status Text 伴随状态码的字符串信息
readyState 对象状态值有四个
0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)
1 (初始化) 对象已建立,尚未调用send方法
2 (发送数据) send方法已调用,但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误,
4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据
(原文链接:https://blog.csdn.net/vainnetwork/article/details/1550196)
XMLHttpRequest是完全用来向服务器发出一个请求的,它的作用也局限于此,但它的作用是整个ajax实现的关键,因为ajax无非是两个过程,发出请求和响应请求。
$.ajax()的使用
$.ajax({name:value, name:value, … })该参数规定 AJAX 请求的一个或多个名称/值对。
下面列出可能的名称和值:
url:规定发送请求的URL,默认是当前页面
dataType:预期的服务器响应的类型(T是大写)
type:规定请求的类型(GET或POST)
data:规定要发送到服务器的数据
success:当请求成功时运行的函数
$.ajax({
url:'../admin/menu/add',
dataType:'json',
data:data,
success:function(data){
if(data.type == 'success'){
$.messager.alert('信息提示','添加成功!','info');
$('#add-dialog').dialog('close');
}else{
$.messager.alert('信息提示',data.msg,'warning');
}
}
});