百度百科的解释:
Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。
ajax是一门前端技术。此处主要是需要理解ajax的功能。
当我们构建一个网页,我们不需要每次都刷新整个页面。就比如,百度搜索框,我输入ajax时,会有一些关联提示。
这就是ajax技术的运用,输入时,没有刷新整个页面,而只是局部调用后台业务接口,处理之后显示。
ajax的对象
ajax的使用也很简单,就是ajax原生的对象 XMLHttpRequest 的使用。
var xmlhttp = new XMLHttpRequest();
向服务端发送请求
使用该对象的open() send()
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
获得响应
responseText | 获得字符串形式的响应数据。 |
responseXML | 获得 XML 形式的响应数据。 |
onreadystatechange 事件
可以通过改属性绑定一个函数,当readyState发生改变则调用该函数。
onreadystatechange | 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 |
readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
status | 200: "OK" 404: 未找到页面 |
上面这些都是对ajax的底层的理解,现在各大前端框架,已经把ajax的使用封装起来,使用起来非常方便。
例如jQuery中的一些异步请求方法:
$.post() :post方式请求
$.get() :get方式请求
$.ajax() :
$.getJSON():
详细的https://www.jquery123.com/category/ajax/shorthand-methods/
一个简单使用:
前台ajax的使用代码,导入jQuery之后,调用jQuery.ajax(),组装正确的入参,就成功使用了ajax的异步调用。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<%-- 导入jquery代码,这个是已经下载到本地的--%>
<script src="${pageContext.request.contextPath}/statics/jquery-3.4.1.js"></script>
<%-- ajax的简单运用--%>
<script type="text/javascript">
// onbur事件触发之后的执行逻辑
function doOnBlur() {
/*url:异步请求的url,向后端请求的地址
data:传递给后端的参数,例如,此处把输入框的值传递过去
success:请求成功之后的处理逻辑,一个函数*/
jQuery.ajax({
url:"${pageContext.request.contextPath}/doOnBlur",
data:{name:jQuery("#ajaxName").val()},
success:function (data) {
alert(data)
console.log(data)
}
});
}
</script>
</head>
<body>
<%-- 输入框,绑定了一个事件,onblur--%>
<input id="ajaxName" type="text" name="ajaxName" onblur="doOnBlur()" >
<button onclick="doSearch()">搜索</button>
</body>
</html>