JS与HTTP
使用JS发送HTTP请求
JS异步请求json
- get参数
function xhrGetJson(url,callback) {
var xhr = new XMLHttpRequest();
//responseType设置必需在open之前
xhr.responseType ='json';
xhr.open("get", url, true);
xhr.send();
//onreadystatechange 事件使代码复杂化了。但是这是在没有得到服务器响应的情况下,防止代码停止的最安全的方法。
xhr.onreadystatechange = callback;
}
function showThisMethod(){
var url = '';
xhrGetJson(url,function(){
//xhr state 4 = "loaded" ,200 = OK
if (this.readyState == 4 && this.status == 200) {
//因为responseType 指定了为json,所以xhr自动将json字符串转换成了js对象
console.log(this.response);
}
});
}
- json参数
function xhrJsonPostJson(url,param,callback){
var xhr = new XMLHttpRequest();
xhr.responseType ='json';
xhr.open("post", url, true);
xhr.setRequestHeader('Content-Type', 'application/json');
var jsonStr = JSON.stringify(param);
xhr.send(jsonStr);
xhr.onreadystatechange = callback;
}
function showThisMethod(){
var url = '';
xhrJsonPostJson(url,{},function(){
//xhr state 4 = "loaded" ,200 = OK
if (this.readyState == 4 && this.status == 200) {
//因为responseType 指定了为json,所以xhr自动将json字符串转换成了js对象
console.log(this.response);
}
});
}
- form参数
function xhrFormPostJson(url,param,callback){
var xhr = new XMLHttpRequest();
xhr.responseType ='json';
xhr.open("post", url, true);
//这个请求头设置必需在open之后
//对于formdata,xhr的open方法会根据提交的内容自动初始化RequestHeader,这行代码反而会坏事,导致提交的数据显示为Payload
//xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
var formData = new FormData();
for(var key in param){
formData.append(key,param[key]);
}
xhr.send(formData);
xhr.onreadystatechange = callback;
}
function showThisMethod(){
var url = '';
xhrFormPostJson(url,{},function(){
//xhr state 4 = "loaded" ,200 = OK
if (this.readyState == 4 && this.status == 200) {
//因为responseType 指定了为json,所以xhr自动将json字符串转换成了js对象
console.log(this.response);
}
});
}
- 含有文件的form参数
function xhrFilePostJson(url,param,callback){
var xhr = new XMLHttpRequest();
xhr.responseType ='json';
xhr.open("post", url, true);
//这个请求头设置必需在open之后
var formData = new FormData();
for(var key in param){
formData.append(key,param[key]);
}
xhr.send(formData);
xhr.onreadystatechange = callback;
}
function showThisMethod(){
var url = '';
var fileInput= document.createElement('input');
fileInput.style.display = 'none';
fileInput.type = 'file'
fileInput.click();
fileInput.onchange = function(){
if(fileInput.files.length > 1){ alert('不可选择文件夹')}
var param = {};
param['file'] = fileInput.files[0]
xhrFilePostJson(url,param,function(){
//xhr state 4 = "loaded" ,200 = OK
if (this.readyState == 4 && this.status == 200) {
//因为responseType 指定了为json,所以xhr自动将json字符串转换成了js对象
console.log(this.response);
}
});
}
}
JS异步请求文件流
function xhrPostFile(url,param,callback){
var xhr = new XMLHttpRequest();
//想要让xhr把返回值作为字节对待,这个参数很重要
xhr.responseType ='arraybuffer';
xhr.open("post", url, true);
//这个请求头设置必需在open之后
var formData = new FormData();
for(var key in param){
formData.append(key,param[key]);
}
xhr.send(formData);
xhr.onreadystatechange = callback;
}
function showThisMethod(){
var url = '';
var param = {};
xhrPostFile(url,param,function(){
//xhr state 4 = "loaded" ,200 = OK
if (this.readyState == 4 && this.status == 200) {
//因为responseType 指定了为json,所以xhr自动将json字符串转换成了js对象
console.log(this.response);
}
});
}
JS同步请求
function xhrNoSyncGetJson(url,callback) {
var xhr = new XMLHttpRequest();
xhr.open("get", url, false);
xhr.send();
var response = JSON.parse(xhr.responseText);
callback(response);
}
function showThisMethod(){
var url = '';
xhrNoSyncGetJson(url,function(response){
console.log(response);
});
}
JS实现自动化操作
通用控制类
JS复制内容
function copyToClipBoard(text){
var inputEle = document.createElement("input");//创建一个input元素
inputEle.value = text;
document.body.appendChild(inputEle);//把input元素绑定到document,不然操作不到
// 判断元素是否能被选中
if (inputEle&&inputEle.select) {
// 选择文本
inputEle.select();
try {
// 复制文本
document.execCommand('copy');
} catch (err) {
alert('由于浏览器安全设置,不支持复制功能!!!');
}
document.body.removeChild(inputEle);//删除元素
}else {
alert('无法选中控件');
}
}
新一代js
Fetch用法
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch