Ajax基础

Ajax 简介

它是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验。

应用场景

页面上拉加载更多数据
列表数据无刷新分页
表单项离开焦点数据验证
搜索框提示文字下拉列表

Ajax 的运行环境：
Ajax 技术需要运行在网站环境中才能生效，当前课程会使用Node创建的服务器作为网站服务器。

Ajax--MDN

Ajax基于核心对象XMLHttpRequest，AJAX 的所有操作都是通过该对象进行的。
本文章基于 XMLHttpRequest Level2

XMLHttpRequest Level2的新功能

可以设置 HTTP 请求的时限

可以使用 FormData 对象管理表单数据

可以上传文件

可以获得数据传输的进度信息

Ajax 运行原理及实现

1. Ajax 运行原理#

Ajax 相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验

2. Ajax 的实现基本步骤#

创建 Ajax 对象

// XMLHttpRequest 为 js的内置对象
var xhr = new XMLHttpRequest();

告诉 Ajax 请求地址以及请求方式

/*
parms1: 请求方式
parms2: 请求地址
parms3: 第三个参数是可选的，用于设置请求是否是异步的。如果设为 true (默认值)，即开启异步，JavaScript就不会在此语句阻塞，使得用户能在服务器还没有响应的情况下与页面进行交互。
*/
xhr.open('get', 'http://www.example.com', true);

发送请求

xhr.send();

获取服务器端给与客户端的响应数据

//当XMLHttpRequest对象接收到服务器的响应后就会执行onload事件的执行函数
xhr.onload = function () {
	// xhr.responseText: 接收文本格式的响应数据
	// xhr.responseXML 接收 xml 格式的响应数据
	if(xhr.readyState == 4 && xhr.status == 200){
		var text = xhr.responseText;
		console.log(text);
	}
}

3. Ajax 请求#

1. 使用xhr发起带参数的GET请求#

传统网站表单提交, 请求参数以查询字符串的形式自动拼接到URL ，随请求头递给服务端

<form method="get" action="http://www.example.com">
 <input type="text" name="username"/>
 <input type="password" name="password">
 </form>
<!– http://www.example.com?username=zhangsan&password=123456 -->

Ajax发送的 GET请求的参数需要自己手动以查询字符串的形式拼接到shr.open()中的指定 URL

var btn = document.getElementById('btn');
var username = document.getElementById('uname');
var pwd = document.getElementById('pwd');

btn.onclick = function () {
    var xhr = new XMLHttpRequest();
    //手动拼接请求参数
    xhr.open('get', `http://localhost:80/get?name=${username.value}&pwd=${pwd.value}`);
    xhr.send();   
    xhr.onload = function() {
       console.log(xhr.responseText); //{"name":"gh","pwd":"13"}
    }        
}

2. 使用xhr发起POST请求#

Ajax中post的请求参数传递与get有所不同

需要在XMLHttpRequest对象的open()中指定请求方式为 'post'
在发送请求前需要设置请求头中的Content-Type字段，当参数为parms1=value1&parms2=value2这种格式时，该属性的属性值为application/x-www-form-urlencoded，这是固定写法
在通过send()发送请求时需要带上拼接好的请求参数

example:

<input type="text" id="username">
<input type="text" id="age">
<input type="button" value="提交" id="btn">
<script type="text/javascript">
	var btn = document.getElementById('btn');
	var username = document.getElementById('username');
	var pwd = document.getElementById('pwd');

	btn.onclick = function () {
		//  1. 创建 xhr 对象
		var xhr = new XMLHttpRequest();

		// 2. 调用 open()
		xhr.open('post', 'http://localhost:3000/post');

		// 3. 设置请求头中请求参数格式的类型（post请求必须要设置）
		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
				
		// 4. 调用 send()，同时将数据以指定的形式，提交给服务器
		xhr.send(`name=${username.value}&pwd=${pwd.value}`);

		// 5. 调用 “响应结束事件”(统称) , 执行回调函数处理响应结果
		xhr.onreadystatechange = function() {
			if (xhr.readyState === 4 && xhr.status === 200) {
				console.log(xhr.responseText);// {"name":"gh","pwd":"13"}
			}
		}
	}
</script>

//注意: 服务端的中间件 还需要通过第三方插件body-parser 来获取请求参数
app.use(bodyParser.urlencoded({ extended: false }));
app.use('/post', (req, res) => {
    res.send(req.body);
})

4. Ajax 中操作请求头与响应头#

setRequestHeader#

// 设置请求头中 Content-Type字段, 指定请求参数格式
new XMLHttpRequest().setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

getResponseHeader#

//获取响应头中 Content-Type字段, 得到响应数据格式
new XMLHttpRequest().getResponseHeader('Content-Type');

服务器端大多数情况下会通过 JSON.stringify()，以 json字符串作为响应数据的格式。当客户端拿到响应数据时，要将 json 字符串通过 JSON.parse() 把 json 字符串转换为 json 对象，以方便使用。

example:

//客户端
var btn = document.getElementById('btn');
var username = document.getElementById('uname');
var pwd = document.getElementById('pwd');

btn.onclick = function () {
    var xhr = new XMLHttpRequest();
    xhr.open('post', `http://localhost:80/json`);
    //指定请求参数传递格式
    xhr.setRequestHeader('Content-Type', 'application/json'); // xhr.responseType = 'json'; 也可以
    // 发送请求
    xhr.send(JSON.stringify({
        "name":username.value,
        "pwd":pwd.value
    }));
    xhr.onload = function() {
       console.log(json.parse(xhr.responseText));//{ name: 'gh', pwd: '12' } 
    }        
}

//服务端
app.use(require('body-parser').json());
app.use('/json', (req, res) => {
    console.log(req.body);//{ name: 'gh', pwd: '12' }
    res.send(json.stringify(req.body));
})

5. 获取服务器端的响应#

① Ajax 状态码#

在创建ajax对象，配置ajax对象，发送请求，以及接收完服务器端响应数据，这个过程中的每一个步骤都会对应一个数值，这个数值就是ajax状态码。

Ajax 状态码	步骤
0	请求未初始化(还没有调用open())
1	请求已经建立，但是还没有发送(还没有调用send())
2	请求已经发送
3	请求正在处理中，通常响应中已经有部分数据可以用了
4	响应已经完成，可以获取并使用服务器的响应了

获取 ajax状态码

new XMLHttpRequest().readyState; //获取ajax状态码

② Http 状态码#

//在响应结束处理事件的函数中可以通过如下方式获取 http：状态码
 xhr.status;

Ajax状态码: 表示Ajax请求的过程状态 ajax对象返回的
Http状态码: 表示请求的处理结果是服务器端返回的

③ onreadystatechange 事件#

ajax对象除了onload事件可以获取到服务器端响应结果，还有onreadystatechange事件

当 Ajax 状态码发生变化时将自动触发该事件

在事件处理函数中可以获取 Ajax 状态码并对其进行判断，当状态码为 4 时就可以通过 xhr.responseText 获取服务器端的响应数据了

// 当Ajax状态码发生变化时
xhr.onreadystatechange = function () {
	// 判断当Ajax状态码为4时
	if (xhr.readyState == 4) {
		// 获取服务器端的响应数据
		console.log(xhr.responseText);
	}
}

两种获取服务器端响应方式的区别

区别描述	onload事件	onreadystatechange事件
是否兼容IE低版本	不兼容	兼容
是否需要判断Ajax状态码	不需要	需要
被调用次数	一次(效率较高)	多次

example:

//客户端
var xhr = new XMLHttpRequest();
// 0 已经创建了ajax对象 但是还没有对ajax对象进行配置
console.log(xhr.readyState);//0
xhr.open('get', 'http://localhost:3000/readystate');
// 1 已经对ajax对象进行配置 但是还没有发送请求
console.log(xhr.readyState);//1

// 当ajax状态码发生变化的时候触发事件
xhr.onreadystatechange = function() {
	// 2 请求已经发送了
	// 3 已经接收到服务器端的部分数据了
	// 4 服务器端的响应数据已经接收完成
	console.log(xhr.readyState);
	// 对ajax状态码进行判断 如果状态码的值为4就代表数据已经接收完成了
	if (xhr.readyState == 4) {
		console.log(xhr.responseText);
	}
} 
xhr.send();

6. 低版本 IE 浏览器的缓存问题#

问题：在低版本的 IE 浏览器中，Ajax 请求有严重的缓存问题，即在请求地址不发生变化的情况下，只有第一次请求会真正发送到服务器端，后续的请求都会从浏览器的缓存中获取结果。即使服务器端的数据更新了，客户端依然拿到的是缓存中的旧数据。

解决方案：在请求地址的后面加请求参数，保证每一次请求中的请求参数的值不相同。

xhr.open('get', 'http://www.example.com?t=' + Math.random());

7. 取消请求#

可通过new XMLHttpRequest().abort() 来取消请求

    <button>点击发送</button>
    <button>点击取消</button>
    <script>
        //获取元素对象
        const btns = document.querySelectorAll('button');
        let x = null;

        btns[0].onclick = function(){
            x = new XMLHttpRequest();
            x.open("GET",'http://127.0.0.1:8000/delay');
            x.send();
        }

        // abort
        btns[1].onclick = function(){
            x.abort();
        }
    </script>

8. 处理重复请求#

<button>点击发送</button>
    <script>
        const btns = document.querySelectorAll('button');
        let x = null;
        let isSending = false; // 标识变量,用于验证是否正在发送AJAX请求

        btns[0].onclick = function(){
            //1. 判断标识变量，如果正在发送, 则取消该请求, 创建一个新的请求
            if(isSending) x.abort();
            x = new XMLHttpRequest();
            //2. 修改 标识变量的值
            isSending = true;
            x.open("GET",'http://127.0.0.1:8000/delay');
            x.send();
            x.onreadystatechange = function(){
                if(x.readyState === 4){
                    // 3.当前请求结束，修改标识变量
                    isSending = false;
                }
            }
        }
    </script>

Ajax 配合 FormData 上传复杂数据

FormData_G/H的博客-CSDN博客

实现表单上传#

example:

<!-- 客户端 -->
<!-- 创建普通的html表单 -->
<form id="form">
	<input type="text" name="username">
	<input type="password" name="password">
	<input type="button" id="btn" value="提交">
</form>
<script type="text/javascript">
	// 获取按钮
	var btn = document.getElementById('btn');
	// 获取表单
	var form = document.getElementById('form');
	// 为按钮添加点击事件
	btn.onclick = function () {
		// 将普通的html表单转换为表单对象
		var formData = new FormData(form);
		// 创建ajax对象
		var xhr = new XMLHttpRequest();
		// 对ajax对象进行配置
		xhr.open('post', 'http://localhost:3000/formData');
		// 发送ajax请求
		xhr.send(formData);
		// 监听xhr对象下面的onload事件
		xhr.onload = function () {
			// 对象http状态码进行判断
			if (xhr.readyState === 4 && xhr.status === 200) {
				//输出后端返回结果
				console.log(xhr.responseText);// " {"username":"jam","password":"123"} "
			}
		}
	}
</script>

//以nodejs 用express搭建的后端为例
const express = require('express');
//通过formidable解析客户端传递过来的表单对象 formData
const formidable = require('formidable');
const app = express();
app.post('/formData', (req, res) => {
	// 创建formidable表单解析对象
	const form = new formidable.IncomingForm();
	// 解析客户端传递过来的FormData对象
	form.parse(req, (err, fields, files) => {
		/*
		fields: { username: 'jam', password: '123' }
		*/
		res.send(fields);
	});
});

❕注意：

Formdata 对象不能用于 get 请求，因为对象需要被传递到 send()中，而 get 请求方式的请求参数只能放在请求地址的后面。

二进制文件上传#

所谓二进制文件泛指视频、音频、图片文件

example: 图片上传以及图片实时预览

<!-- 客户端 -->
<label>请选择文件</label>
<input type="file" id="file"/>
<div id="box">
	<!--<img src="" class="img-rounded img-responsive">-->
</div>

<script>
	var file = document.getElementById('file')
	// 当用户选择文件的时候
	file.onchange = function () {
		// 1. 验证是否选择了文件
		// 获取到选择的文件列表 并 判断用户是否成功选取文件
		var files = this.files;
		if(files.length <= 0 ){
			return alert('请选择要上传的文件！');
		}
		
		// 2. 向FormData中追加文件
		// 创建空 FormData 表单对象
		var formData = new FormData();
		// 将用户选择的二进制文件追加到表单对象中
		formData.append('attrName', files[0]);
		
		// 3. 使用 xhr 发起上传文件的请求
		// 创建 xhr 对象
		var xhr = new XMLHttpRequest()
		// 调用 open 函数，指定请求类型与URL地址。其中，请求类型必须为 POST
		xhr.open('post', 'http://localhost/uploads');
		// 将表单对象formData传递到服务端
		xhr.send(formData);
		// 监听onreadystatechange事件
		xhr.onreadystatechange = function(){
			// 将服务器端返回的数据显示在控制台中
			var result = JSON.parse(xhr.responseText);//{"path":"\\uploads\\upload_475f2774362b294ef21ef4e76d4888d2.png"}
			// 动态创建img标签
			var img = document.createElement('img');
			// 给图片标签设置src属性
			img.src = result.path;
			// 当图片加载完成以后
			img.onload = function () {
				// 将图片显示在页面中
				document.getElementById('box').appendChild(img);
			}
		}
	}
</script>

// nodejs服务端为例，使用express搭建, 使用formiable解析客户端传递过来的formData
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));
app.post('/uploads', (res, req) => {
	// 创建formidable表单解析对象
	const form = new formidable.IncomingForm();
	// 设置客户端上传文件的存储路径
	form.uploadDir = path.join(__dirname, 'public', 'uploads');
	// 保留上传文件的后缀名字
	form.keepExtensions = true;
	// 解析客户端传递过来的FormData对象
	form.parse(req, (err, fields, files) => {
		if(err){
			res.send('文件上传失败!')
		}else {
			res.send({
				path: files.attrName.path.split('public')[1]//"path":"\\uploads\\upload_475f2774362b294ef21ef4e76d4888d2.png"
			});
		}
	})
})

文件上传进度展示#

新版本的 XMLHttpRequest 对象中，可以通过监听xhr.upload.onprogress事件，来获取到文件的上传进度。语法格式如下：

		// 创建 XHR 对象
		var xhr = new XMLHttpRequest()
		
		// 监听 xhr.upload 的 onprogress 事件
		/*
		upload对象 为 XMLHttpRequest对象下的一个属性
		文件上传过程中持续触发onprogress事件  
		*/
		xhr.upload.onprogress = function (ev) {
			/*
			ev:在文件上传的过程中，系统传递过来的事件对象
			ev.loaded: 已传输的字节
			ev.total: 需传输的总字节
			ev.lengthComputable 是一个布尔值，表示当前上传的资源是否具有可计算的长度
			*/	
			// 当前上传文件大小/文件总大小 再将结果转换为百分数
			// 将结果赋值给进度条(bar)的宽度属性
			if (e.lengthComputable) {
				var percentComplete = Math.ceil((e.loaded / e.total) * 100);	
			}
		}

XMLHttpRequest.upload

基于Bootstrap渲染进度条#

导入需要的库

<link rel="stylesheet" href="./lib/bootstrap.css" />
<script src="./lib/jquery.js"></script>

UI结构

<!-- 进度条 -->
<div class="progress" style="width: 500px; margin: 10px 0;">
<div class="progress-bar progress-bar-info progress-bar-
striped active" id="percent" style="width: 0%">
0%
</div>
</div>

监听上传进度的事件

xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
	// 1. 计算出当前上传进度的百分比
	var percentComplete = Math.ceil((e.loaded / e.total) * 100)
	$('#percent')
	// 2. 设置进度条的宽度
	.attr('style', 'width:' + percentComplete + '%')
	// 3. 显示当前的上传进度百分比
	.html(percentComplete + '%')
}
}

监听上传完成的事件

xhr.upload.onload = function() {
$('#percent')
	// 移除上传中的类样式
	.removeClass()
	// 添加上传完成的类样式
	.addClass('progress-bar progress-bar-success')
}

请求超时、网络异常、响应错误处理

设置HTTP请求时限#

有时，Ajax 操作很耗时，而且无法预知要花多少时间。如果网速很慢，用户可能要等很久。新版本的 XMLHttpRequest 对象，增加了 timeout 属性，可以设置 HTTP 请求的时限来处理请求超时

xhr.timeout = 3000

上面的语句，将最长等待时间设为 3000 毫秒。过了这个时限，就自动停止HTTP请求。与之配套的还有一个timeout事件，用来指定回调函数：

xhr.ontimeout = function(event){
	alert('请求超时！')
}

xhr.onerror 处理网络异常#

网络中断的异常情况下，请求无法发送到服务器端。
无法触发xhr响应事件，会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理。

	//客户端
	xhr.onerror = function() {
		alert('网络中断, 无法发送Ajax请求')
	}

xhr.status 获取 http响应状态码#

在网络正常的情况下，不同情况有不同响应，比如 400 404 500这类异常状态码



Ajax需要对错误进一步处理：

	var xhr = new XMLHttpRequest();
	xhr.open('get', 'http://localhost/error');
	xhr.send();
    xhr.onload = function() {
        if(xhr.status == 400){
            alert('请求出错');  
        }
        if(xhr.status == 404){
        	alert('访问资源不存在')
        }
        if(xhr.status == 505){
        	alert('服务器出错')
        }
    }

封装自定义Ajax功能函数

/*******************调用自定义myAjax函数, 实现发送Ajax请求*********************************/
myAjax({
	//请求类型，默认值为'get', String类型
	type: 'post',
	
	//请求地址, 默认值为: '', String类型
	url: 'http://www.example.com',
	
	//是否异步，默认值为true
	async: true,
	
	//请求参数对象，默认值为: {}, object类型
	data: {name: 'zhangsan', age: 20},
	
	//请求头中的参数类型，默认值为:{'Content-Type': 'application/x-www-form-urlencoded'}, object类型
	header: {'Content-Type': 'application/json'},
	
	//响应状态码为：200时执行的函数，默认值为空函数
	success: function(responseText, xhr){},
	
	//响应状态码不为200时执行的函数，默认值为函数
	error: function(responseText, xhr){}
})

/*
函数功能:根据指定参数向服务端发送ajax请求并接收服务端响应结果
*/
function myAjax(options) {
/********************************设置参数option*********************************/
	// 默认值参数
	var defaults = {
		type: 'get',
		url: '',
		async: true,
		data: {},
		header: {
			'Content-Type': 'application/x-www-form-urlencoded'
		},
		success: function () {},
		error: function () {}
	};
	// 使用options对象中的属性覆盖defaults对象中的属性
	Object.assign(defaults, options);


/********************************指定请求参数并发送请求*********************************/	
	// 创建ajax对象
	var xhr = new XMLHttpRequest();
	// 拼接请求参数的变量
	var params = '';
	// 循环用户传递进来的对象格式参数
	for (var attr in defaults.data) {
		// 将参数转换为字符串格式
		params += attr + '=' + defaults.data[attr] + '&';
	}
	// 将参数最后面的&截取掉 
	// 将截取的结果重新赋值给params变量
	params = params.substr(0, params.length - 1);// "name=zhangsan&age=20"

	// 判断请求方式
	//如果请求方式为get
	if (defaults.type.toUpperCase() == 'GET') {
		defaults.url = defaults.url + '?' + params;
	}
	
	// 配置ajax对象
	xhr.open(defaults.type, defaults.url, defaults.async);
	// 如果请求方式为post
	if (defaults.type.toUpperCase() == 'POST') {
		// 用户希望的向服务器端传递的请求参数的类型
		var contentType = defaults.header['Content-Type']
		// 设置请求参数格式的类型
		xhr.setRequestHeader('Content-Type', contentType);
		// 判断用户希望的请求参数格式的类型
		// 如果类型为json
		if (contentType == 'application/json') {
			// 向服务器端传递json数据格式的参数
			xhr.send(JSON.stringify(defaults.data))
		}else {
			// 向服务器端传递普通类型的请求参数
			xhr.send(params);
		}
	}else {
		// 发送请求
		xhr.send();
	}

/********************************接收服务器响应结果*********************************/	
	// 监听xhr对象下面的onload事件 当xhr对象接收完响应数据后触发
	xhr.onload = function () {
		// xhr.getResponseHeader():  获取响应头中的数据
		var contentType = xhr.getResponseHeader('Content-Type');
		// 服务器端返回的数据
		var responseText = xhr.responseText;

		// 如果响应类型中包含applicaition/json
		if (contentType.includes('application/json')) {
			// 将json字符串转换为json对象
			responseText = JSON.parse(responseText)
		}

		// 当Ajax状态码等于4 并且 http状态码等于200的时候
		if (xhr.readyState === 4 && xhr.status === 200) {
			// 请求成功 调用处理成功情况的函数
			defaults.success(responseText, xhr);
		}else {
			// 请求失败 调用处理失败情况的函数
			defaults.error(responseText, xhr);
		}
	}
	// 当网络中断时
	xhr.onerror = function () {
		// 调用失败回调函数并且将xhr对象传递给回调函数
		defaults.error(xhr);
	}
}

Object.assign() - JavaScript | MDN (mozilla.org)

String.prototype.includes() - JavaScript | MDN (mozilla.org)

XMLHttpRequestEventTarget.onerror - Web API 接口参考 | MDN (mozilla.org)

作者：Hong•Guo

出处：https://www.cnblogs.com/ghnb1/p/15851735.html

版权：本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

posted @ 2022-01-28 01:22 Hong•Guo 阅读(55) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· jQuery 中的 Ajax

· Express框架

· 快速带你了解Ajax技术

· ajax笔记

· Ajax-概述

阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）

公告

😫本人概述：
22届🐮🐴大专，📍深圳，《低学历➕互联网寒冬》👉 毕业即失业最后沦落转行，编程也就图一乐，收收心找个电子厂打螺丝了
博客园的文章都是在校学习时写的，往后不再更新与回复了💀，虽然都是水文🤡 @ 2024-06-10

⚡转告:
博客园陪伴了我们多年, 最近博客园“遭遇困难❗”，博客园或许能到你的帮助❤️，点开这个官方链接
(https://www.cnblogs.com/cmt/p/17320765.html)
看看吧！ @ 2023-04-15

昵称： Hong•Guo
园龄： 4年4个月
粉丝： 6
关注： 3

+加关注

Loading

Ｈｏｎｇ

欢迎来到我的博客🤞🌹~

Ajax基础

Ajax 简介

Ajax 运行原理及实现

1. Ajax 运行原理#

2. Ajax 的实现基本步骤#

3. Ajax 请求#

1. 使用xhr发起带参数的GET请求#

2. 使用xhr发起POST请求#

4. Ajax 中操作请求头与响应头#

setRequestHeader#

getResponseHeader#

5. 获取服务器端的响应#

① Ajax 状态码#

② Http 状态码#

③ onreadystatechange 事件#

6. 低版本 IE 浏览器的缓存问题#

7. 取消请求#

8. 处理重复请求#

Ajax 配合 FormData 上传复杂数据

实现表单上传#

二进制文件上传#

文件上传进度展示#

基于Bootstrap渲染进度条#

请求超时、网络异常、响应错误处理

设置HTTP请求时限#

xhr.onerror 处理网络异常#

xhr.status 获取 http响应状态码#

封装自定义Ajax功能函数

公告

搜索

常用链接

合集

随笔分类

随笔档案

Loading

Ｈｏｎｇ

欢迎来到我的博客🤞🌹~

Ajax基础

Ajax 简介

Ajax 运行原理及实现

1. Ajax 运行原理#

2. Ajax 的实现基本步骤#

3. Ajax 请求#

1. 使用xhr发起带参数的GET请求#

2. 使用xhr发起POST请求#

4. Ajax 中操作 请求头与响应头#

setRequestHeader#

getResponseHeader#

5. 获取服务器端的响应#

① Ajax 状态码#

② Http 状态码#

③ onreadystatechange 事件#

6. 低版本 IE 浏览器的缓存问题#

7. 取消请求#

8. 处理重复请求#

Ajax 配合 FormData 上传 复杂数据

实现表单上传#

二进制文件上传#

文件上传进度展示#

基于Bootstrap渲染进度条#

请求超时、网络异常、响应错误处理

设置HTTP请求时限#

xhr.onerror 处理网络异常#

xhr.status 获取 http响应状态码#

封装自定义Ajax功能函数

公告

搜索

常用链接

合集

随笔分类

随笔档案

4. Ajax 中操作请求头与响应头#

Ajax 配合 FormData 上传复杂数据