Ajax的作用
Ajax 是一种在无需重新加载整个网页的情况下，能够更新网页部分内容的技术，实现页面和 web 服务器之间数据的异步传输。
相当于只刷新页面的一部分而并不刷新整个页面(局部刷新而并非全局刷新)。
冷知识：Ajax全称 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML）
这里将一个简单的Ajax案例：
获取input输入框中的值并将其以Ajax异步请求的方式请求请求后台，再由后台响应我们所需的数据放到div中(div中无内容)
从而实现请求与响应，显示数据，并且请求为异步请求(Ajax)不刷新整个页面(局部刷新)
方式呢就是这么个方式，具体使用根据开发中的应用场景(比如：评论，分页，搜索)
JS(javascript)方式编写Ajax：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Ajax</title>
</head>
<body>
<center>
<%--JS方式的Ajax--%>
<div id="div"></div>
<br/>
输入：<input type="text" id="info">
<input type="button" value="提交" onclick="ajax()">
</center>
</body>
<script type="text/javascript">
var xmlHttpRequest;
function ajax() {
var info = document.getElementById("info").value;
/*注：在JS中，如果创建对象使用var变量接收，代表只在该函数(function)中生效(局部变量)，不使用var接收则代表全局(全局变量)
在其他地方使用对象时前提是该函数(function)要提前执行(相当于赋值)*/
/*1.建立XMLHttpRequest对象：通过ajax异步方式 请求服务端 */
xmlHttpRequest = new XMLHttpRequest;
/*2.与服务器端交互的基本信息：open(方法名(提交方式get|post),服务器地址,true((true（异步）或 false（同步）)) :与服务端建立连接*/
// xmlHttpRequest.open("get","ajax/ajaxDemo1?info="+info,true);
xmlHttpRequest.open("post", "ajax/ajaxDemo", true);
/*3.设置头信息：setRequestHeader(header,value):
get:不需要设置此方法
post:需要设置：
a.如果请求元素中包含了 文件上传：setRequestHeader("Content-Type","multipart/form-data");
b.不包含了 文件上传：setRequestHeader("Content-Type","application/x-www-form-urlencoded")*/
xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
/*4.传入参数：xmlHttpRequest.send()
get: send(null)
post: send(参数值)*/
// xmlHttpRequest.send(null);
xmlHttpRequest.send("info=" + info);
/*注：什么是回调函数：例如有 a()，b()，c()三个方法，b()是a()的回调函数，如果b()执行完则应该执行a()，而不是c()*/
/*5.注册回调函数(获取服务器响应数据)*/
xmlHttpRequest.onreadystatechange = callBack;
}
function callBack() {
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
/*responseText：响应格式为String
responseXML：相应格式为XML*/
/*获取后端响应的信息(放到div中)*/
var data = xmlHttpRequest.responseText;
document.getElementById("div").innerHTML = data;
}
}
/*笔记：xmlHttpRequest.readyState ：请求状态 只有4为完全成功
0：请求未初始化(还没有调用 open())
1：请求已经建立，但是还没有发送（还没有调用 send()）
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4：响应已完成；您可以获取并使用服务器的响应了。
xmlHttpRequest.status：响应状态(相当于于http响应状态码，太多则不过多说明) 只有200为完全成功*/
</script>
</html>
JQ(jquery)方式使用Ajax：
看了上面JS的方式编写Ajax，写起来的确是有些繁琐
接下来使用jquery方式编写4种类似的Ajax，相比JS方式简便很多
$.ajax()方法中属性详解请参考： https://www.cnblogs.com/tylerdonet/p/3520862.html
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Jquery -Ajax</title>
</head>
<body>
<center>
<%--JQ方式的ajax--%>
<div id="div">ajax：</div>
<br/>
输入：<input type="text" id="info">
<input type="button" value="提交" onclick="ajax()">
</center>
</body>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
function ajax() {
//var info = document.getElementById("info").value;
var info = $("#info").val();
$.ajax({
/* url：请求地址(可以带参数：url: "ajax/ajaxDemo?info="+info,)*/
url: "ajax/ajaxDemo",
/*async：默认设置为true，代表为异步请求 false则为同步请求*/
async: true,
/*type：请求方式*/
type: "get",
/*data：请求参数(和js的send方法区别：get和post都可以直接填入 请求参数 名称+值*/
data: "info=" + info,
/*dataType：服务器响应类型(例如text(纯文本)、json(json数据)、xml(xml文档))*/
dataType: "text",
/*success：请求成功后调用的回调函数(由服务器返回，并根据dataType参数进行处理后的数据)*/
success: function (data) {
$("#div").html(data);
},
/*error：请求失败时被调用的函数*/
error: function () {
$("#div").html("服务器响应失败!");
}
});
/*--------------------------------------------------------------------------------------------------------*/
/*$.get()不写参数名，但必须按照参数的顺序进行配置*/
$.get(
/*请求地址*/
"ajax/ajaxDemo",
/*请求参数 名称+值*/
"info=" + info,
/*回调函数*/
function (data){
$("#div").html(data);
},
/*服务器响应类型*/
"text"
);
/*--------------------------------------------------------------------------------------------------------*/
/*$.post()不写参数名，但必须按照参数的顺序进行配置*/
$.post(
/*请求地址*/
"ajax/ajaxDemo",
/*请求参数 名称+值*/
"info=" + info,
/*回调函数*/
function (data){
$("#div").html(data);
if(data == null || data == ""){
alert("服务器响应为null");
}
},
/*服务器响应类型*/
"text"
);
/*--------------------------------------------------------------------------------------------------------*/
/*load:将服务端的返回值 直接加载到$(xxx)所选择的元素中 例如案例的div*/
$("#div").load(
/*请求地址*/
"ajax/ajaxDemo",
/*请求参数 名称+值*/
"info="+info
);
}
</script>
</html>
本篇文章还缺少一个重要的知识点、也是和Ajax挂钩的，那就是JSON数据格式，本人也正在学习将JSON类型数据请求到后台再响应JSON数据格式给前台。到时候我会在发一篇文章介绍JSON或者到时候会修改本篇文章将JSON知识点补上。
转载：https://blog.csdn.net/weixin_45377770/article/details/105460504
查看评论