JS与HTTP交互详解-优快云博客

本文链接：https://blog.youkuaiyun.com/snakeflash/article/details/103436877

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('无法选中控件');
	}
}