一、什么是Ajax
1.1 概述
AJAX(Asynchronous JavaScript and XML) 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,这意味着可以在不重载整个页面的情况下,对网页的某些部分进行更新。AJAX 通过在后台与服务器进行少量数据交换,使网页实现异步更新。
传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个页面。
1.2 原理
浏览器通过后台发送请求,不提交网页,获得数据后更新页面中的局部区域。
二、使用方式
2.1 创建XMLHttpRequest对象
function get( url, callback ,dataType ){
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
callback( dataType==='json'?JSON.parse( xmlhttp.responseText ): xmlhttp.responseText )
}
}
xmlhttp.open("GET",url);
xmlhttp.send();
}
2.2 回调监听
2.2.1 onreadystatechange
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
2.2.2 就绪状态码和响应状态码
readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 - 0: 请求未初始化 - 1: 服务器连接已建立 - 2: 请求已接收 - 3: 请求处理中 - 4: 请求已完成,且响应已就绪 |
---|---|
status | - 200 响应成功 - 404 页面找不到 - 500 后台异常 |
** 更多响应状态码**
状态码 | 状态码英文名称 | 中文描述 |
---|---|---|
100 | Continue | 继续。客户端应继续其请求 |
101 | Switching Protocols | 切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议,例如,切换到HTTP的新版本协议 |
200 | OK | 请求成功。一般用于GET与POST请求 |
201 | Created | 已创建。成功请求并创建了新的资源 |
202 | Accepted | 已接受。已经接受请求,但未处理完成 |
203 | Non-Authoritative Information | 非授权信息。请求成功。但返回的meta信息不在原始的服务器,而是一个副本 |
204 | No Content | 无内容。服务器成功处理,但未返回内容。在未更新网页的情况下,可确保浏览器继续显示当前文档 |
205 | Reset Content | 重置内容。服务器处理成功,用户终端(例如:浏览器)应重置文档视图。可通过此返回码清除浏览器的表单域 |
206 | Partial Content | 部分内容。服务器成功处理了部分GET请求 |
300 | Multiple Choices | 多种选择。请求的资源可包括多个位置,相应可返回一个资源特征与地址的列表用于用户终端(例如:浏览器)选择 |
301 | Moved Permanently | 永久移动。请求的资源已被永久的移动到新URI,返回信息会包括新的URI,浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替 |
302 | Found | 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI |
303 | See Other | 查看其它地址。与301类似。使用GET和POST请求查看 |
304 | Not Modified | 未修改。所请求的资源未修改,服务器返回此状态码时,不会返回任何资源。客户端通常会缓存访问过的资源,通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源 |
305 | Use Proxy | 使用代理。所请求的资源必须通过代理访问 |
306 | Unused | 已经被废弃的HTTP状态码 |
307 | Temporary Redirect | 临时重定向。与302类似。使用GET请求重定向 |
400 | Bad Request | 客户端请求的语法错误,服务器无法理解 |
401 | Unauthorized | 请求要求用户的身份认证 |
402 | Payment Required | 保留,将来使用 |
403 | Forbidden | 服务器理解请求客户端的请求,但是拒绝执行此请求 |
404 | Not Found | 服务器无法根据客户端的请求找到资源(网页)。通过此代码,网站设计人员可设置"您所请求的资源无法找到"的个性页面 |
405 | Method Not Allowed | 客户端请求中的方法被禁止 |
406 | Not Acceptable | 服务器无法根据客户端请求的内容特性完成请求 |
407 | Proxy Authentication Required | 请求要求代理的身份认证,与401类似,但请求者应当使用代理进行授权 |
408 | Request Time-out | 服务器等待客户端发送的请求时间过长,超时 |
409 | Conflict | 服务器完成客户端的 PUT 请求时可能返回此代码,服务器处理请求时发生了冲突 |
410 | Gone | 客户端请求的资源已经不存在。410不同于404,如果资源以前有现在被永久删除了可使用410代码,网站设计人员可通过301代码指定资源的新位置 |
411 | Length Required | 服务器无法处理客户端发送的不带Content-Length的请求信息 |
412 | Precondition Failed | 客户端请求信息的先决条件错误 |
413 | Request Entity Too Large | 由于请求的实体过大,服务器无法处理,因此拒绝请求。为防止客户端的连续请求,服务器可能会关闭连接。如果只是服务器暂时无法处理,则会包含一个Retry-After的响应信息 |
414 | Request-URI Too Large | 请求的URI过长(URI通常为网址),服务器无法处理 |
415 | Unsupported Media Type | 服务器无法处理请求附带的媒体格式 |
416 | Requested range not satisfiable | 客户端请求的范围无效 |
417 | Expectation Failed | 服务器无法满足Expect的请求头信息 |
500 | Internal Server Error | 服务器内部错误,无法完成请求 |
501 | Not Implemented | 服务器不支持请求的功能,无法完成请求 |
502 | Bad Gateway | 作为网关或者代理工作的服务器尝试执行请求时,从远程服务器接收到了一个无效的响应 |
503 | Service Unavailable | 由于超载或系统维护,服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中 |
504 | Gateway Time-out | 充当网关或代理的服务器,未及时从远端服务器获取请求 |
505 | HTTP Version not supported | 服务器不支持请求的HTTP协议的版本,无法完成处理 |
2.3 发送GET请求
2.3.1 普通get
xmlhttp.open("GET","/try/ajax/demo_get.do");
xmlhttp.send();
2.3.2 发送数据
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford");
xmlhttp.send();
2.4 发送POST请求
2.4.1 发送请求
xmlhttp.open("POST","/try/ajax/demo_post.php");
xmlhttp.send();
2.4.1 发送请求和数据
xmlhttp.open("POST","/try/ajax/demo_post2.php");
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
2.5 响应数据
如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
属性 | 描述 |
---|---|
responseText | 获得字符串形式的响应数据。 |
responseXML | 获得 XML 形式的响应数据。 |
2.6 服务端处理程序
Servlet
@WebServlet("/ajax/test.do")
public class FirstAjaxController extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.getWriter().println("我是张家辉,你送的年龄为"+req.getParameter("age"));
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.getWriter().println("我是重庆吴彦祖,你送的年龄为"+req.getParameter("age")+req.getParameter("name"));
}
}
三、JSON 格式
文本
小西,90,小吴
XML
<book>
<name>小西</name>
<price>999</price>
<author>小吴</author>
</book>
JSON
{"name":"小西","price":999,"author":"小吴"}
3.1 什么是JSON
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
var person = {
name: "小刘",
age:10
}
"helloworld"
"{'a':'hello',}"
ArrayList
var config={
url:"/xxx.do"
method:'post',
successs( data ){
}
}
$.ajax(config)
xhr.open(config.method,config.url)
xhr.onredadStateChange=function(){
if(xhr.readyState=4){
successs(xhr.responseText);
}
}
java对象 => {"name":"小刘" , "age" : 10 } => js 对象
3.2 JSON与XML 区别
与 XML 相同之处
- JSON 是纯文本
- JSON 具有"自我描述性"(人类可读)
- JSON 具有层级结构(值中存在值)
- JSON 可通过 JavaScript 进行解析
- JSON 数据可使用 AJAX 进行传输
与 XML 不同之处
- 没有结束标签
- 更短
- 读写的速度更快
- 能够使用内建的 JSON.parse 方法进行解析
- 使用数组
- 不使用保留字
3.3 JSON转换
3.3.1 JavaScript 处理JSON
- JSON.parse(jsonstr); //可以将json字符串转换成json对象(JS对象)
- JSON.stringify(jsobj); //可以将json对象转换成json字符串
<script>
//json 对象
var jsonStr = "{\"id\":\"8\",\"name\":\"小范\",\"size\":\"G\"}";
//json 数组
var jsonArray = "[{\"id\":\"8\",\"name\":\"小范\",\"size\":\"G\"},{\"id\":\"8\",\"name\":\"小李\",\"size\":\"G\"} ]";
// JSON.parse( json格式的字符串 ) json字符串 = > JS对象(数组) ********
//转对象
var obj = JSON.parse(jsonStr);
console.log(obj.id,obj.name,obj.size);
//转数组
var arr = JSON.parse(jsonArray);
arr.forEach( function (v,i) {
console.log(v.name)
})
// JSON.stringify( js对象 ) JS对象 = > JSON字符串 ********
var perosn = { name:"张三",age:10};
var json = JSON.stringify(perosn);
console.log(json)
</script>
3.3.2 Java处理JSON
- fastjson 阿里出品 快
- gson 谷歌出品
- jackson 老牌稳定
- json-lib 搞安卓开发的用的多点
3.4 FastJson 使用
3.4.1 对象转JSON字符串
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setCharacterEncoding("utf-8");
Dog dog = new Dog();
dog.setId(999);
dog.setName("来福");
dog.setAge(8);
dog.setColor("白色");
//把java 对象转json字符串
String json = JSON.toJSONString(dog);
resp.setContentType("application/json");
resp.getWriter().println(json);
}
3.4.2 JSON字符转 JAVA对象
public static void main(String[] args) {
String xxx = "{\"age\":8,\"color\":\"白色\",\"id\":999,\"name\":\"来福\"}";
Dog dog1 = JSON.parseObject(xxx, Dog.class);
System.out.println(dog1);
}
四、XML 格式
4.1 什么是XML
XML 指可扩展标记语言(Extensible Markup Language),XML 被设计用来传输和存储数据。XML相比HTML它是自由的标签完全是自定义的,就像这样。
<books>
<book id="1">
<name>小西</name>
<price>998.0</price>
</book>
<book id="2">
<name>小郭</name>
<price>520.0</price>
</book>
</books>
4.2 JS 解析XML
//测试字符串
var xmlStr = text = "<Result>";
text = text + "<ErrorMessage>OK</ErrorMessage>";
text = text + "<PrintVersion>2</PrintVersion>";
text = text + "</Result>";
//解析方法
var xmlParse = function(text) {
try //Internet Explorer
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = "false";
xmlDoc.loadXML(text);
} catch (e) {
try //Firefox, Mozilla, Opera, etc.
{
parser = new DOMParser();
xmlDoc = parser.parseFromString(text, "text/xml"); document
} catch (e) { alert(e.message) }
}
console.log(xmlDoc);
var errorMessage = xmlDoc.getElementsByTagName('ErrorMessage')[0].textContent;
var printVersion = xmlDoc.getElementsByTagName('PrintVersion')[0].textContent;
var objData = {};
objData.errorInfo = errorMessage;
objData.versionInfo = printVersion;
console.log(objData);
return objDate;
};
//测试
var result = xmlParse(xmlStr); //返回结果 {errorInfo: "OK", versionInfo: "2"}
4.3 JAVA解析XML
4.3.1 Dom4J介绍
dom4j是一个Java的XML API,是jdom的升级品,用来读写XML文件的。dom4j是一个十分优秀的JavaXML API,具有性能优异、功能强大和极其易使用的特点,它的性能超过sun公司官方的dom技术, 在Java圈是非常有名的。https://mvnrepository.com/artifact/dom4j/dom4j/1.6.1
4.3.2 Dom4J 解析XML
public static void main(String[] args) throws DocumentException {
SAXReader reader = new SAXReader();
Document document = reader.read(new File("XX/book.xml"));
Element rootElement = document.getRootElement();
List elements = rootElement.elements();
elements.forEach(e->{
Element ex = (Element) e;
String value = ex.attribute("id").getValue();
System.out.println(ex.getName()+":"+value);
List xx = ex.elements();
xx.forEach(y->{
Element ey = (Element) y;
System.out.println(ey.getStringValue());
});
});
}
五 JQuery Ajax
jquery Ajax是JQuery 对原生Ajax技术的封装,通过简单的函数调用即可实现异步请求,屏蔽了编写ajax程序的流程,以及各种浏览器的兼容性问题。
使用它的前提是先引入JQuery文件。记住! 记住! 记住 !
**回调 **
5.1 常用方法
jQuery.get(url, [data], [callback], [type])
url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式,xml, html, script, json, text, _default。
jQuery.post(url, [data], [callback], [type])
url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式,xml, html, script, json, text, _default。
jQuery.ajax( [settings] )
settings可选配置 非常多,详见 文档 https://jquery.cuishifeng.cn/jQuery.Ajax.html 这里只列举最多使用的
url: 请求地址 ,如果ajax函数第一个参数没配置url settiongs 中也是可以配置的。
**method **: 请求方式 get post 这些
data: 发送给后台的数据
dataType: 后台响应的数据格式
contentType: 发送信息至服务器时内容编码类型 (默认: “application/x-www-form-urlencoded”)
**error **在请求出错时调用。传入XMLHttpRequest对象,描述错误类型的字符串以及一个异常对象(如果有的话)
**success **当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。
**complete **当请求完成之后调用这个函数,无论成功或失败。传入XMLHttpRequest对象,以及一个包含成功或错误代码的字符串。
dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据(可能是处理过的)传递给success回调函数。
五 JQuery Ajax
jquery Ajax是JQuery 对原生Ajax技术的封装,通过简单的函数调用即可实现异步请求,屏蔽了编写ajax程序的流程,以及各种浏览器的兼容性问题。
使用它的前提是先引入JQuery文件。记住! 记住! 记住 !
**回调 **
5.1 常用方法
jQuery.get(url, [data], [callback], [type])
url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式,xml, html, script, json, text, _default。
jQuery.post(url, [data], [callback], [type])
url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式,xml, html, script, json, text, _default。
jQuery.ajax( [settings] )
settings可选配置 非常多,详见 文档 https://jquery.cuishifeng.cn/jQuery.Ajax.html 这里只列举最多使用的
url: 请求地址 ,如果ajax函数第一个参数没配置url settiongs 中也是可以配置的。
**method **: 请求方式 get post 这些
data: 发送给后台的数据
dataType: 后台响应的数据格式
contentType: 发送信息至服务器时内容编码类型 (默认: “application/x-www-form-urlencoded”)
**error **在请求出错时调用。传入XMLHttpRequest对象,描述错误类型的字符串以及一个异常对象(如果有的话)
**success **当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。
**complete **当请求完成之后调用这个函数,无论成功或失败。传入XMLHttpRequest对象,以及一个包含成功或错误代码的字符串。
dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据(可能是处理过的)传递给success回调函数。
工具
5.2 ajax 文件上传
ajax 同样可以实现文件上传,这种方式相比同步文件上传个加灵活,同步文件上传往往是,文件域和文本域在一个大表单中,文件上传和业务逻辑耦合在一起,异步文件上传的思路是,把文件单独上传,然后异步返回文件的地址,最后文件地址和文本域一并提交给后台保存,这样文件上传就可以完全独立出来,成为一个公共的模块。
jquery 的ajax 文件上传需要配置以下几个参数
cache: false, 是为了兼容ie8,防止ie8之前版本缓存get请求的处理方式
processData: false, 不让jQuery处理和编码发送的数据
contentType: false, 不让Jquery修改上传文件编码
同时使用formData 来包装发送的文件数据。
var files = $('#xxx').prop('files');
var data = new FormData();
data.append('name', files[0]);
示例:
JQuery文件上传
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/js/jquery-3.6.0.min.js"></script>
</head>
<body>
<input id="fileBox" type="file" > <button onclick="fileUpload()">上传</button>
<script>
function fileUpload() {
var file = document.querySelector("#fileBox").files[0];
var formData = new FormData();
formData.append("abc",file);
$.ajax({
url:"/ajax/upload.do",
method:"post",
dataType:"text",
data:formData,
contentType:false,
processData:false,
cache:false,
success(data,xhr){
alert(data);
},
xhr:function(){
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", function (ev) {
console.log(Math.round((ev.loaded/ev.total)*100)+"%",ev.lengthComputable);
}, false);
return xhr;
}
})
}
</script>
</body>
</html>
后端接受数据
package com.qfedu.todo.web.controller.ajax;
import com.qfedu.commons.util.http.HttpUtil;
import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;
import java.io.File;
import java.io.IOException;
import java.util.UUID;
@MultipartConfig
@WebServlet("/ajax/upload.do")
public class FileUploadController extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String realPath = this.getServletContext().getRealPath("/upload/");
File dir = new File(realPath);
if(!dir.exists()){
dir.mkdirs();
}
Part part = req.getPart("abc");
String oldName = part.getSubmittedFileName();
int dot = oldName.lastIndexOf(".");sssss.png
String suffix = oldName.substring(dot, oldName.length());
String fileName = UUID.randomUUID().toString().replace("-", "").concat(suffix);
part.write(realPath.concat(fileName));
HttpUtil.setTextContent(resp);
resp.getWriter().println("/upload/"+fileName);
}
}