当我们通过提交表单向服务器提交内容,或者进行一些其他操作,均涉及到了与浏览器之间的交互,传统的方式与AJAX方式的处理方法是不同的
AJAX(Asynchronous JavaScript and XML) 异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术
看完了这些说明,我们解释一下定义中的两个重点概念:(排版出错,以下英文可忽略,无任何影响)AJAX is Based on Open Standards
AJAX is based on the following open standards −
异步和同步往往是同时被提到的两个概念,这两者都是基于客户端和服务器端相互通信的基础上
简单概述流程:
同步:发送请求 → 等待服务器处理 → 返回
异步:事件触发 → 服务器处理 (不等待)→ 处理结束
AJAX 就是一种可以在无需重新加载整个网页的情况下 就可以实现与客户端与服务器的异步通讯
往简单了说就是:不用刷新整个网页,就能修改网页局部内容
正如我们开头所说到的,在开发中,如果每一次局部的小修改都进行页面刷新,这显然对性能会有所降低,而且用户正在执行的操作也会中断
Aajx 的英文全称为 Asynchronous JavaScript and XML ,虽然包含了XML,但是数据格式还可以有 JSON等
关于其数据传输格式有这样一种说明:
XML is commonly used as the format for receiving server data, although any format, including plain text, can be used. XML一般作为从服务端接受数据的格式,当然也可以用包括 plain text 等 其他格式
AJAX中常使用的两种数据传输格式为:XML/JSON ,不过现在更多的是使用 JSON 格式,它作为一种轻量级的数据交换格式,更小,更快,也更加容易解析
如果对于XML/JSON 还不够熟悉的话,可以先去了解一些基本的概念以及用法
作为一个小菜鸟而言,仅限于一下不算太深入的应用,我常常会有这样一种感觉,XMLHttpRequest = AJAX 吗?
(内容选自:what is Ajax 中文为是自己翻译的,功底过浅,或许不是很理想)
可按个人需要选择是否跳过这个问题,直接跳转到后面的语法等部分
AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS, and JavaScript. AJAX 所代表的的是 JavaScript和XML。AJAX是一种新技术,它通过利用 XML,HTML,CSS 和 JavaScript 来创建更好,更快,更具有交互性的Web应用程序。 AJAX is based on the following open standards − AJAX 是基于以下公共的标准
看完了上面的说明, 我们可以看出来,AJAX不是指一种单一的技术,而是,利用了多种技术而产生的一种技术方案,上面提到的,主要依赖的技术也就是 HTML CSS JavaScript,而真正负责我们实现浏览器与服务器 进行请求与相应的就是 XMLHttpRequest
下面,我们来重点了解一下它
Ajax中最大的特点 就是请求会被异步对象XMLHttpRequest进行封装,然后再发送到服务器,接着服务器以流的形式将数据返回给浏览器
也正是因为服务器返回的数据是通过流的形式发送的,XMLHttpRequest对象会不停的监听服务器,且得到服务器数据,所以浏览器不需要刷新就可以获取服务器端的数据
注:下面会讲解具体的用法,在此处仅作为方法和属性的基本归纳和梳理,不做过于具体的说明,可先简单浏览,待到看完文章再回来阅读
附:思维导图
针对不同版本的浏览器,创建 XMLHttpRequest 对象有着不同的方法,分为两类:
针对不同的情况我们可以需要一个可以兼容各种浏览器的通用函数
<script language="javascript" type="text/javascript">
function ajaxFunction() {
var ajaxRequest;
try {
// 兼容 IE7+, Firefox, Chrome, Opera, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e) {
// 兼容 Internet Explorer Browsers
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
return false;
}
}
}
}
</script>
简单的也可以这么写
<script language="javascript" type="text/javascript">
function ajaxFunction() {
var xhr;
if (window.XMLHttpRequest) {
xhr=new XMLHttpRequest();
}
else {
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
}
</script>
xhr.open(method, URL, async);
GET 请求:
GET 请求常用于获取服务器的数据,例如我们使用 链接(href)或 URL 等发起请求,而我们常常需要将页面中的参数,传递到后端进行定位或处理,GET请求的方式就会将数据拼接到 RUL后面,方便服务器进行解析
格式:?
、开头,&
分隔字符串,参数之间不需要空格,参数值不需要单双引号包括,例如:
loginServlet?username=admin&password=admin
POST 请求:
POST 请求用于向服务器发送被处理的数据,提交表单既可以使用GET,也可以使用POST方式,推荐使用POST方式,查询数据的时候推荐使用GET方式
GET:没有请求体,但空行是存在的,附带的参数有限制,数据容量不能超过1k
POST:存在请求体,可以在请求的实体内容中向服务器发送数据,传送的数据量是无限制的
xhr.open("GET","loginServlet?username=admin&password=admin",true);
xhr.open("POST",loginServlet,true);
使用 POST 方式提交的时候,其需要发送的数据怎么办呢?答案是:在 send 的方法中作为参数进行传递,发往服务器
xhr.send();
xhr.send(null);
使用 GET 方式还是比较简单的,只需要在send方法汇总传入一个null值即可了
如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("username=admin&password=admin");
xhr.onreadystatechange=function() {
//判断readyState就绪状态是否为4,判断status响应状态码是否为200
if (xhr.readyState==4 && xhr.status==200) {
//获取服务器的响应结果
var responseText = xhr.responseText;
alert(responseText);
}
}
状态 | 描述 |
---|---|
readyState=0 | 请求未初始化:在创建XMLHttpRequest对象之后,但在调用open()方法之前 |
readyState=1 | 请求已建立:在调用open()方法之后但在调用send()之前 |
readyState=2 | 请求已发送:调用send()之后 |
readyState=3 | 求正在处理中:浏览器与服务器建立通信之后,但服务器未完成响应之前 |
readyState=4 | 求已完成:请求完成后,并且已从服务器完全接收到响应数据 |
状态码 | 解释 |
---|---|
200 | 请求成功 |
302 | 请求重定向 |
304 | 请求资源没有改变 |
404 | 请求资源补不存在,属性客户端错误 |
500 | 服务器内部错误 |
<input type="text" id="username">
<input type="button" onclick="ajaxFunction()" value="向后台判断用户名是否存在"></br>
<div id="msgError">校验显示区域</div>
<script language="javascript" type="text/javascript">
function ajaxFunction() {
var ajaxRequest;
try {
// 兼容 IE7+, Firefox, Chrome, Opera, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e) {
// 兼容 Internet Explorer Browsers
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
return false;
}
}
}
//准备请求
ajaxRequest.open("POST", "loginServlet", true);
//由于是POST提交方式,所以添加 HTTP 头
ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//获取到表单中输入的值
var name_input = document.getElementById("username").value;
//发送请求
ajaxRequest.send("username=" + name_input);
ajaxRequest.onreadystatechange = function () {
//判断readyState就绪状态是否为4,判断status响应状态码是否为200
if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
//获取服务器的响应结果
var responseText = ajaxRequest.responseText;
var div = document.getElementById("msgError");
div.innerText = responseText;
}
}
}
</script>
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=utf-8");
String username = request.getParameter("username");
//此语句仅为方便判断是否后端正常收到了前端的数据,可选择删除
System.out.println("接收到的数据:" + username);
try {
if (username.equals("admin")) {
Thread.sleep(5000);
response.getWriter().print("该用户名已经存在");
} else {
Thread.sleep(5000);
response.getWriter().print("该用户名可以注册");
}
} catch (InterruptedException e) {
e.printStackTrace();
}
}
我们这样就在无需重新加载整个网页的情况下 就可以实现与客户端与服务器的异步通讯,我们为了演示,同时在后台主动设置 延时5秒响应的情况下,但我们用户仍然可以在此期间进行操作,具体情况,可以自行简单模拟试验
使用原生的 JavaScript 实现 AJAX 确实比较麻烦,而 使用 Jquery 也可以帮助我们实现这样一种需求,而且也会让我们的代码更加简洁,直观
举个例子:
<script language="javascript" type="text/javascript">
function ajaxFunction() {
var name_input = document.getElementById("username").value;
$.ajax({
url: "loginServlet",
type: "POST",
data: {"username": name_input},
success: function (data) {
var div = document.getElementById("msgError");
div.innerText = data;
},
error: function () {
alert("发生错误");
}
});
}
</script>
当然它的参数和设置选项不止这些,在这里只选择了一些相对简单或者说必须的,详情可以参考 JQuery API 文档
在 Servlet 和 html 均不变的基础上,我们修改 js代码,使用jquery的方式来实现同样的功能
<script language="javascript" type="text/javascript">
function ajaxFunction() {
var name_input = document.getElementById("username").value;
$.ajax({
url: "loginServlet",
type: "POST",
data: {"username": name_input},
success: function (data) {
var div = document.getElementById("msgError");
div.innerText = data;
},
error: function () {
alert("发生错误");
}
});
}
</script>
经过测试结果是一样的
JQuery确实极大的简化了我们的代码,但是如果你只是想快速的实现这一种需求,JQuery 其实还提供了两个更为简单的方式,以取代复杂
说明:这是一个简单的 GET 请求功能,来取代复杂的 .ajax¨K68K说明:这是一个简单的GET请求功能,来取代复杂的.ajax
完整结构:$.get(url,[data],callback,type)
这种方式旨在快速的实现请求,当请求成功的时候可以调用回调函数,如果需要在出错的时候执行函数,还是需要使用
说明:这是一个简单的 POST 请求功能,来取代复杂的 .ajax()¨K69K说明:这是一个简单的POST请求功能,来取代复杂的.ajax
完整结构:$.post(url, [data], [callback], [type])
还是沿用上面的 html和Servlet,修改function代码
<script language="javascript" type="text/javascript">
function ajaxFunction() {
var name_input = document.getElementById("username").value;
$.get("loginServlet",{username:name_input},function (data) {
var div = document.getElementById("msgError");
div.innerText = data;
},"text");
}
</script>
总结:$.get()
方法 和 $.post()
方法方法均可以快速简洁的完成一些基本操作,如果操作比较复杂,还是需要使用 $.ajax()
方式
AJAX 的的基本知识,以及使用 JavaScript 和 JQuery 这两种实现方式,我们就已经介绍完了,到现在为止,如何发起并且接收响应已经不在话下了,并且我们对 AJAX 有了一定的认识,但是 AJAX 的一些应用场景,以及AJAX 如何搭配 常见的 如 JSON 等数据格式,实现前后端的交互,并没有提到,我们就放到后面说,将全部的内容挤到一起,无论是从篇幅或者说内容的针对性都是不够强的,不过AJAX 也确实是我们成长路上不可不学的一门技术了,有什么不清楚的, 可以尝试着看一些国内外的资源站点,w3chool、tutorialspoint 等等,多翻翻 API 文档,尤其是一些英文的文档和资料,我感觉对我个人帮助还是很大的。
同样在此感谢大家的支持!谢谢!
大家的每一个阅读和赞我都当做了喜欢!❤️