Ajax常通过XMLHttpRequest创建实例
创建与服务器的请求
2.1 指定GET请求方式
2.2 指定POST请求方式
指定XMLHttpRequest返回结果的处理函数
3.1 通过onreadystatechange属性指定状态改变时所触发的处理函数
3.2 通过onload属性指定事件处理函数
指定XMLHttpRequest发生错误的处理函数
跨域请求的设置
发送请求
Ajax请求核心源码
7.1 原生Javascript请求
7.2 Jquery中ajax请求方式
完整源码
8.1 前端源码
8.2 后端源码
实现效果
var req = new XMLHttpRequest();
考虑不同版本的浏览器兼容性,可将其封装在一个函数中
function createAjaxObject() {
var req = null;
//非IE浏览器
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
//IE浏览器
} else if (window.ActiveXObject) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!req) {
alert("无法创建XMLHttpRequest对象");
}
return req;
}
请求方式分两种:一种是POST,另一种是GET
2.1指定GET请求方式
var filePath = var filePath = "C:\\Users\\Lenovo\\Pictures\\be90611b453f3e476533412964e49dee.jpg";
//指定时间戳
filePath +="&nocache="+new Date().getTime();
var url = "http://localhost:8080/JqueryTest/ReadImgServlet?msg=ajax发送的参数&filePath="+filePath;
url = encodeURI(url);
//第三个参数 true表示异步,false同步
req.open("GET", url, true);
2.2 指定POST请求方式
var url = "http://localhost:8080/JqueryTest/ReadImgServlet";
req.open("POST", url, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
//req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
3.1 通过onreadystatechange属性指定状态改变时所触发的处理函数
若处理函数外部独立的一个函数,比如:function callBack(){},只需
req.onreadystatechange = callBack;
若需要给外部处理函数传递参数,比如:function callBack(param){},只需
req.onreadystatechange = function(){ callBack(req.responseText); };
有关属性状态码
属性readyState用于获取请求的状态码:
0:请求未初始化
1:正在加载
2:已加载
3:交互中
4:请求完成
属性status用于返回服务器的http状态码:
200:表示成功
202:表示请求被接受,但尚未成功
400:错误的请求
404:文件未找到
500:内部服务器错误
属性response:返回服务器的响应,后端返回的string,这里获得的也是字符串
属性responseText:返回为字符串
属性responseXML:返回为xml对象,该对象可解析为dom对象
req.onreadystatechange = function() {
if (req.readyState == 4 && req.status == 200) {
var img = document.getElementById("readimg");
img.src = req.responseText;
}
};
onload属性具有与onreadystatechange相近的功能:
1.onload属性与onreadystatechange属性保留一个就可以,两个同时都存在则两个都会被调用
2.onload指定的事件处理函数,当状态码返回4时就会被调用
3.onreadystatechange具体全面,onload则简洁方便
req.onload = function() {
alert("info:" + req.response);
};
通过onerror属性指定,该处理函数是可选,一般最好指定否则发生错误很难排查
req.onerror = function() { alert("请求错误!"); };
若两个页面拥有的协议(protocol)、端口(port)或主机(host),任何一个的不同,就被当作是跨域
实现跨域请求要注意以下两点:
req.withCredentials = true;
//默认为false,设置跨域请求是否提供凭据信息(cookie、HTTP认证及客户端SSL证明等)
//可理解为当前请求为跨域类型时是否在请求中协带cookie
withCredentials不设置为true的影响:
配置文件:web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id="WebApp_ID" version="4.0">
<display-name>UploadDownloadFile</display-name>
<welcome-file-list>
<welcome-file></welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<filter>
<filter-name>CorsFilter</filter-name>
<filter-class>com.filter.MyCorsFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>CorsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>
过滤器:com.filter.MyCorsFilter
package com.filter;
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet Filter implementation class MyCorsFilter
*/
public class MyCorsFilter implements Filter {
/**
* Default constructor.
*/
public MyCorsFilter() {
// TODO Auto-generated constructor stub
}
/**
* @see Filter#destroy()
*/
public void destroy() {
// TODO Auto-generated method stub
}
/**
* @see Filter#doFilter(ServletRequest, ServletResponse, FilterChain)
*/
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain chain) throws IOException, ServletException {
// TODO Auto-generated method stub
// place your code here
/* 允许跨域的主机地址 */
HttpServletResponse response = (HttpServletResponse)servletResponse;
HttpServletRequest request = (HttpServletRequest) servletRequest;
// response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
response.setHeader("Access-Control-Allow-Headers","*");
response.setHeader("Access-Control-Allow-Method","*");
// 允许所有的域名跨域访问
// response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
response.setHeader("Access-Control-Allow-Credentials", "true");
// pass the request along the filter chain
chain.doFilter(servletRequest, servletResponse);
}
/**
* @see Filter#init(FilterConfig)
*/
public void init(FilterConfig fConfig) throws ServletException {
// TODO Auto-generated method stub
}
}
当发送post请求:
//open方法是POST方式
req.send("msg=ajax发送的参数&filePath=" + filePath);
要记得在发送之前先设置设置setRequestHeader,如果不设置会出现后端获取不到参数的情况
String msg = request.getParameter(“msg”); //此时msg为null
需要注意的是,不设置setRequestHeader此时改为在url后添加请求参数在后端却能够获取
2. 参数一般在send方法中添加,该方式传递参数无需使用encodeURI方法转义
发送Get请求:
//open方法是GET方式
req.send(null);
7.1 原生Javascript请求
// Get请求方式
function readimg() {
var filePath = "C:\\Users\\Lenovo\\Pictures\\be90611b453f3e476533412964e49dee.jpg";
filePath +="&nocache="+new Date().getTime();
var url = "http://localhost:8080/JqueryTest/ReadImgServlet?msg=ajax发送的参数&filePath="+filePath;
// 参数需要转义
url = encodeURI(url);
// 创建XMLHttpRequest
var req = new XMLHttpRequest();
// 创建与服务器的连接
req.open("GET", url, true);
// 返回结果的处理函数
req.onreadystatechange = function() {
if (req.readyState == 4 && req.status == 200) {
var img = document.getElementById("readimg");
img.src = req.responseText;
}
};
// 发生错误的处理函数
req.onerror = function(){alert("请求错误");};
// 设置跨域请求提供凭据信息
req.withCredentials = true;
req.send();
}
// post请求方式
function readImgPost(){
// 图片文件的路径
var filePath = "C:\\Users\\Lenovo\\Pictures\\be90611b453f3e476533412964e49dee.jpg";
var url = "http://localhost:8080/JqueryTest/ReadImgServlet";
// 创建XMLHttpRequest
var req = new XMLHttpRequest();
// 发送POST请求
req.open("POST", url, true);
// 设置请求头
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
// 返回结果的处理函数
req.onload = function() {
var img = document.getElementById("readimg");
img.src = req.response;
};
// 发生错误的处理函数
req.onerror = function(){alert("请求错误");};
req.withCredentials = true;
var param = "msg=ajax发送的参数&filePath="+filePath;
req.send(param);
}
7.2 Jquery中ajax请求方式
function jqueryAjax(){
var filePath = "C:\\Users\\Lenovo\\Pictures\\be90611b453f3e476533412964e49dee.jpg";
var param = "msg=ajax发送的参数&filePath="+filePath;
var urls = "http://localhost:8080/JqueryTest/ReadImgServlet";
// 若是get请求,含有中文字符,必须对参数转义,否则报错
param = encodeURI(param);
$.ajax({
url: urls,
// type:"post",
type: "get",
data:param,
// dataType: "json",
dataType:"text",
xhrFields: {
withCredentials: true
},
error:function(e){alert("请求错误");},
crossDomain: true,
success: function(data) {
var img = document.getElementById("readimg");
//直接返回字符串
img.src = data;
}
});
}
8.1 前端源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<script>
// Get请求方式
function readimg() {
var filePath = "C:\\Users\\Lenovo\\Pictures\\be90611b453f3e476533412964e49dee.jpg";
filePath +="&nocache="+new Date().getTime();
var url = "http://localhost:8080/JqueryTest/ReadImgServlet?msg=ajax发送的参数&filePath="+filePath;
// 参数需要转义
url = encodeURI(url);
// 创建XMLHttpRequest
var req = new XMLHttpRequest();
// 创建与服务器的连接
req.open("GET", url, true);
// 返回结果的处理函数
req.onreadystatechange = function() {
if (req.readyState == 4 && req.status == 200) {
var img = document.getElementById("readimg");
img.src = req.responseText;
}
};
// 发生错误的处理函数
req.onerror = function(){alert("请求错误");};
// 设置跨域请求提供凭据信息
req.withCredentials = true;
req.send();
}
// post请求方式
function readImgPost(){
// 图片文件的路径
var filePath = "C:\\Users\\Lenovo\\Pictures\\be90611b453f3e476533412964e49dee.jpg";
var url = "http://localhost:8080/JqueryTest/ReadImgServlet";
// 创建XMLHttpRequest
var req = new XMLHttpRequest();
// 发送POST请求
req.open("POST", url, true);
// 设置请求头
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
// 返回结果的处理函数
req.onload = function() {
var img = document.getElementById("readimg");
img.src = req.response;
};
// 发生错误的处理函数
req.onerror = function(){alert("请求错误");};
req.withCredentials = true;
var param = "msg=ajax发送的参数&filePath="+filePath;
req.send(param);
}
//Jquery请求方式
function jqueryAjax(){
var filePath = "C:\\Users\\Lenovo\\Pictures\\be90611b453f3e476533412964e49dee.jpg";
var param = "msg=ajax发送的参数&filePath="+filePath;
var urls = "http://localhost:8080/JqueryTest/ReadImgServlet";
// get请求必须对参数转义
param = encodeURI(param);
$.ajax({
url: urls,
type: "get",
data:param,
// dataType: "json",
dataType:"text",
xhrFields: {
withCredentials: true
},
error:function(e){alert("请求错误");},
crossDomain: true,
success: function(data) {
var img = document.getElementById("readimg");
img.src = data;
}
});
}
window.onload = function(){
// 页面加载后调用函数显示图片
// GET方式请求
// readimg();
// POST方式请求
readImgPost();
}
</script>
</head>
<body>
<img src="" id="readimg" alt="待加载">
</body>
</html>
package servlet;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import sun.misc.BASE64Encoder;
/**
* Servlet implementation class ReadImgServlet
*/
@WebServlet("/ReadImgServlet")
public class ReadImgServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public ReadImgServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
// 待读取的图片的完整路径
// String filePath = "C:\\Users\\Lenovo\\Pictures\\06dd54ddf31d6e3eda1427bee4575ae8.jpg";
String filePath = request.getParameter("filePath");
System.out.println("request参数中的图片路径:"+filePath);
String info = ImageToBase64(filePath);
// System.out.println("图片信息:"+info);
String msg = null;
// request先设置编码,否则之后乱码
request.setCharacterEncoding("utf-8");
HttpSession session = request.getSession();
// 获取session中msg
msg = (String) session.getAttribute("msg");
System.out.println("session保存的msg:"+msg);
// 获取request中msg
msg = request.getParameter("msg");
// 将msg保存到session
request.getSession().setAttribute("msg", msg);
System.out.println("request传递的msg:"+msg);
// response.getWriter()需要放在最后面,否则会出现如下错误
// java.lang.IllegalStateException: Cannot create a session after the response has been committed
response.getWriter().print(info);
}
public static String ImageToBase64(String imageFile) {
int pos = imageFile.lastIndexOf(".")+1;
String fileType = imageFile.substring(pos);
InputStream in = null;
byte[] data = null;
// 读取图片字节数组
try {
in = new FileInputStream(imageFile);
// in.available()计算字节大小
data = new byte[in.available()];
// InputStream把数据读取到字节数组中
in.read(data);
in.close();
} catch (IOException e) {
e.printStackTrace();
}
// 对字节数组Base64编码
BASE64Encoder encoder = new BASE64Encoder();
if (data != null) {
// 返回Base64编码过的字节数组字符串
String res = "data:image/"+fileType+";Base64,"+encoder.encode(data);
return "data:image/jpeg;base64," + encoder.encode(data);
}
return null;
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
9. 实现效果
本文地址:https://blog.csdn.net/qq_43521551/article/details/107161479
如对本文有疑问, 点击进行留言回复!!
vue脚手架安装以及vue脚手架创建项目(详细步骤),看这篇文章就行了,小白也能创建自己的项目
JavaScript递归函数详解:如何使用递归及简单的递归案例
JavaScript 中的break、continue、return的用法和区别
网友评论