使用 XMLHttpRequest 对象的 open() 方法来初始化一个请求,open() 方法的语法格式如下:
XMLHttpRequest.open(method, url, async, user, password);
参数说明如下:
method:请求的类型(使用的 HTTP 方法),例如 GET、POST、PUT、HEAD、DELETE 等;
url:请求的地址;
async:可选参数,布尔类型,表示是否请求是否异步执行,默认值为 true;
user:可选参数,表示用户名,主要用来认证,默认值为 null;
password:可选参数,表示密码,同样用来认证,默认值为 null。
XMLHttpRequest 写法
1、new XMLHttpRequest();
2、上传进度
3、open()
4、设置header
5、post 方式组装数据
6、send()
get 方法
function jsGetRequest() {
var url = "http://casphp.com/api/AjaxRequest/jsAjaxGet";
var canshu="id=11&name=jsGetRequest1&char=中文数据";
canshu+='&'+document.cookie;
//实例化一个 XMLHttpRequest 对象
let xhr = new XMLHttpRequest();
xhr.open('GET', url+'?'+canshu); //设置请求方式及接口地址
xhr.setRequestHeader("Authorization","token_value"); //设置请求头认证,header 设置必须放在 open() 后面
//xml.setRequestHeader("Cookie","cookiename=value");
xhr.withCredentials = true; //一个布尔值,用来指定跨域 Access-Control 请求是否应带有授权信息,如 cookie 或授权 header 头。
// xhr.responseType='json';// 请求所期待返回的数据类型
xhr.send(); // 一般放在最后
xhr.onreadystatechange = (e) => { //服务端响应后
0 未打开,xhr.open()方法还未被调用.
1 未发送, xhr.send()方法还未被调用.
2 已获取响应头,xhr.send()方法已经被调用, 响应头和响应状态已经返回.
3 正在下载响应体, xhr.响应体下载中; responseText中已经获取了部分数据.
4 请求完成, 整个请求过程已经完毕.
if (xhr.readyState == 4) { //判断客户端是否可以使用
if(xhr.status == 200){ //表示成功处理请求
// 如果定义为 xhr.responseType='json';,控制台包提示格式错误,建议不设置,使用默认设置
console.log(xhr.responseText)
}else{
console.log(xhr.status+' '+xhr.statusText)
post 方法
<!--上传单个、多个文件-->
<input type="file" multiple id="filess">
<button onclick="jsPostRequest5()">上传多个文件ss</button>
<p id="filess_progress"></p>
function jsPostRequest5() {
var url = "http://casphp.com/api/AjaxRequest/jsAjaxPost3";
//实例化一个 XMLHttpRequest 对象
let xhr = new XMLHttpRequest();
// 这个要放到调用open函数之前!!!
xhr.upload.onprogress = function (e) {
// e.lengthComputable 是一个布尔值,表示当前上传的资源是否具有可计算的长度
if (e.lengthComputable) {
// 多个文件总共大小,以及已上传大小
console.log(e.total,e.loaded);
// e.loaded 已传输的字节 e.total 文件传输需要的总字节
var percentComplete = Math.ceil((e.loaded / e.total) * 100); // Math.ceil() 向上取整
var progress=document.getElementById('filess_progress');
progress.style.width=percentComplete+'px';
progress.innerHTML=percentComplete+'%'
// 文件上传成功
xhr.upload.onload = function () {
console.log('文件上传完成')
// open 必须放 xhr.send() 前面
xhr.open('POST', url); //设置请求方式及接口地址
// 设置请求头认证,必须方法 open 后面
xhr.setRequestHeader("Authorization",'token_value');
xhr.withCredentials = true; //一个布尔值,用来指定跨域 Access-Control 请求是否应带有授权信息,如 cookie 或授权 header 头。
//xml.setRequestHeader("Cookie",'cookiename=value');
// formdata 方式传递参数数据
var formData = new FormData();
formData.append('id', 2);
formData.append('name', 'jsPostRequest2');
formData.append('extra', 'formdata 方式传递参数数据');
var files=document.getElementById('filess').files;
// 如果直接写 formData.append("server_files", files); 后端接收不到 server_files
for (var i = 0; i < files.length; i++) {
formData.append("files["+i+"]", files[i]);
xhr.onreadystatechange = (e) => { //服务端响应后
if (xhr.readyState == 4) { //判断客户端是否可以使用
if(xhr.status == 200){ //表示成功处理请求
console.log(xhr.responseText)
}else{
console.log(xhr.status+' '+xhr.statusText)
// 如果不上传文件,可以使用字符串方式传参
// xhr.send("id=12&name=字符串方式传参");
xhr.send(formData);