1.Ajax
Ajax(Asynchronous JavaScript and XML):异步刷新技术
常用方法
方 法 | 说 明 |
---|---|
open( String method, String url, boolean async, String user, String password ) | 创建一个新的HTTP请求 |
send( String data ) | 发送请求到服务器端 |
abort( ) | 取消当前请求 |
setRequestHeader( String header, String value ) | 设置请求的某个HTTP头信息 |
getResponseHeader( String header ) | 获取响应的指定HTTP头信息 |
getAllResponseHeader( ) | 获取响应的所有HTTP头信息 |
事件
onreadystatechange:指定回调函数
常用属性
readyState:XMLHttpRequest的状态信息
就绪状态码 | 说 明 |
---|---|
0 | XMLHttpRequest对象未完成初始化 |
1 | XMLHttpRequest对象开始发送请求 |
2 | XMLHttpRequest对象的请求发送完成 |
3 | XMLHttpRequest对象开始读取响应 |
4 | XMLHttpRequest对象读取响应结束 |
status:HTTP的状态码
状态码 | 说 明 |
---|---|
200 | 服务器正确返回响应 |
404 | 请求的资源不存在 |
500 | 服务器内部错误 |
403 | 没有访问权限 |
statusText:返回当前请求的响应状态
responseText:以文本形式获得响应的内容
responseXML:将XML格式的响应内容解析成DOM对象
// 1、我们首先要创建 XMLHttpRequest对象
var xmlhttprequest = new XMLHttpRequest();
// 2、调用 open 方法设置请求参数
xmlhttprequest.open("GET","http://localhost:8080/ajaxServlet?action=javaScriptAjax",true)
// 3、调用 send 方法发送请求
xmlhttprequest.send();
// 4、在 send 方法前绑定 onreadystatechange 事件,处理请求完成后的操作。
xmlhttprequest.onreadystatechange = function(){
if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
var jsonObj = JSON.parse(xmlhttprequest.responseText);
// 把响应的数据显示在页面上
document.getElementById("div01").innerHTML = "姓名:" +jsonObj.name;
}
2.为什么使用Ajax
无刷新:不刷新整个页面,只刷新局部
无刷新的好处
只更新部分页面,有效利用带宽
提供连续的用户体验
提供类似C/S的交互效果,
操作更方便
传统Web与Ajax的差异
差异 | 方式 | 说 明 |
---|---|---|
发送请求方式不同 | 传统Web | 浏览器发送同步请求 |
Ajax技术 | 异步引擎对象发送请求 | |
服务器响应不同 | 传统Web | 响应内容是一个完整页面 |
Ajax技术 | 响应内容只是需要的数据 | |
客户端处理方式不同 | 传统Web | 需等待服务器响应完成并重新加载整个页面后用户才能进行操作 |
Ajax技术 | 可以动态更新页面中的部分内容 不影响用户在页面进行其他操作 |
GET请求和POST请求的区别
步 骤 | 请求方式 | 实 现 代 码 |
---|---|---|
初始化组件 | GET | xmlHttpRequest.open( "GET", url, true ); |
POST | xmlHttpRequest.open( "POST", url, true ); xmlHttpRequest.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" ); | |
发送请求 | GET | xmlHttpRequest.send( null ); |
POST | xmlHttpRequest.send( "key=xxx&type=12&year=2016" ); |
3.使用jQuery实现Ajax
$.ajax()
$.ajax( [settings] );
<form id="formLogin">
<input type="button" value="登录">
</form>
<script src="static/js/jquery-3.7.1.min.js"></script>
<script>
$(function () {
$("#formLogin input[type='button']").click(function () {
var formValue = $("#formLogin").serialize();
$.post("/loginServlet",formValue,function (res) {
alert(res.message);
if (res.code==0){
location.href="/api/indexServlet";
}
},"json")
});
});
</script>
<script src="/static/js/jquery-3.7.1.min.js"></script>
<script>
//删除
$(function() {
$(".delete").click(function (){
var id = $(this).data('id');
// 显示弹窗提示
if (confirm('确定要删除这条记录吗?')) {
// 发送 AJAX 请求
$.ajax({
url: '/api/deleteProviderServlet',
type: 'get', // 使用get方法
data: { id: id }, // 发送的数据
dataType: 'json', // 预期服务器返回的数据类型
success: function(response) {
// 请求成功时的处理
alert(response.message)
if (response.code === 0) {
//刷新表格
location.reload();
}
}
});
}
})
});
</script>
常用属性参数
参 数 | 类 型 | 说 明 |
---|---|---|
url | String | 发送请求的地址,默认为当前页地址 |
type | String | 请求方式,默认为GET |
data | PlainObject或 String或Array | 发送到服务器的数据 |
dataType | String | 预期服务器返回的数据类型,包括:XML、HTML、Script、JSON、JSONP、text |
timeout | Number | 设置请求超时时间 |
global | Boolean | 表示是否触发全局Ajax事件,默认为true |
常用函数参数
参 数 | 类 型 | 说 明 |
---|---|---|
beforeSend | Function ( jqXHR jqxhr, PlainObject settings ) | 发送请求前调用的函数 |
success | Function( 任意类型 result, StringtextStatus, jqXHR jqxhr ) | 请求成功后调用的函数 参数result:可选,由服务器返回的数据 |
error | Function ( jqXHR jqxhr, String textStatus, String errorThrown ) | 请求失败时调用的函数 |
complete | Function ( jqXHR jqxhr, String textStatus ) | 请求完成后(无论成功还是失败)调用的函数 |
4.认识JSON
JSON(JavaScript Object Notation)
一种轻量级的数据交换格式
采用独立于语言的文本格式
通常用于在客户端和服务器之间传递数据
JSON的优点
轻量级交互语言
结构简单
易于解析
定义JSON对象
var JSON对象 = { "name" : value, "name" : value, …… };
var person = { "name" : "张三", "age" : 30, "spouse" : null };
定义JSON数组
var JSON数组 = [ value, value, …… ];
var countryArray = [ "中国", "美国", "俄罗斯" ];
var personArray = [ { "name":"张三", "age":30 },{ "name":"李四", "age":40 } ];