前端网络请求 个人笔记

请求方法

XMLHttpRequest

• new XMLHttpRequest 实例
• open (method, url, async)
  • method GET / POST / DELETE / PATCH
  • url
  • async 是否开启异步，true (异步）加onreadystatechange false (非异步）
• send 发送
• setRequestHeader
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  向响应添加http头，header:规定头的名称，value: 规定头的值
• 状态码 readyState 0-4
• 状态码变化触发 方法 onreadystatechange
• 响应的状态 status 200
• 响应的数据
  • responseXML 解析
  • responseText 不用解析

案例一：响应 responseXML

// new 一个XMLHttpRequest实例
let xmlhttp;
if (window.XMLHttpRequest) {
  	// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
  	xmlhttp = new XMLHttpRequest();
} else {
  	// IE6, IE5 浏览器执行代码
  	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
	if (xmlhttp.readyState==4 && xmlhttp.status==200) {
	  	xmlDoc = xmlhttp.responseXML;
	  	txt="";
	  	x = xmlDoc.getElementsByTagName("ARTIST");
	  	for (i=0;i<x.length;i++) {
	    		txt=txt + x[i].childNodes[0].nodeValue + "<br>";
	  	}
  		document.getElementById("myDiv").innerHTML=txt;
	}
}
xmlhttp.open("GET", "cd_catalog.xml", true);
xmlhttp.send();

案例一：响应 responseText

// new 一个XMLHttpRequest实例
let xmlhttp;
if (window.XMLHttpRequest) {
  	// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
  	xmlhttp = new XMLHttpRequest();
} else {
  	// IE6, IE5 浏览器执行代码
  	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function(){
  	if (xmlhttp.readyState==4 && xmlhttp.status==200)
  		document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
   	}
}

xmlhttp.open("GET","cd_catalog.xml",true);
xmlhttp.send();

案例三：

var xhr=new XMLHttpRequest();
xhr.open("post","http://127.0.0.1/adv");
xhr.send(formdata);
xhr.onload=function(){
    if (xhr.status==200){
        //...
    }
}

案例四：

const xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
	if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
		// 请求结果
		const result = Json.parse(xmlHttp.responseText);
	}
}
xmlHttp.open('GET', 'http://127.0.0.1:80/yuhang');
// 一定要加send
xmlHttp.send();

Fetch

const formData = new FormData();
// 将"ID=1&signal=value"形式封装成FormData形式
formData.append("Id", '1');
formData.append("signal", 'value');
fetch(this.api, {
   method: 'post',
   body: formData,
   headers: {
       'Content-Type': 'application/json;charset=UTF-8',
       'Access-Control-Allow-Origin': '*',
       'Access-Control-Allow-Headers': '*',
       'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,OPTIONS',
       tk: localStorage.getItem('tk'),
   },
}).then(res => res.json())
   .then((response) => {
       if (response) {

       }
   });

Ajax

2005年出现，基于XMLHttpRequest封装，解决了 不在重新加载的情况下，网页更新部分内容，不需要额外的插件，只需要运行在支持JavaScript的浏览器中

const parm = {
    username: "yh",
    password: "yh",
    uuid: "id",
};
$.ajax({
    type: "POST",
    url: "http://xzxz",
    contentType: "application/json",
    data: JSON.stringify(parm),
    dataType: "json", // 返回的数据类型 json
    success: function (d) {
    	//...
    },
});

Axios

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

并发请求：

• Promise.all

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

Promise.all([getUserAccount, getUserPermissions])
.then(result => {
	// result[0]
	// result[1]
}).catch(err) => {
	console.log(err);
});

• axios.all + axios.spread

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

请求Method类型

简单请求

GET
POST
HEAD

预检请求

定义：

1、除去GET/POST/HEAD之外的Method请求类型
2、请求头 包含自定义头部字段
3、向服务器发送 application/json 格式的数据

结果：

1、在发送真正请求前，发送OPTIONS请求进行预检，以获知服务器是否允许该实际请求
2、服务器成功相应预检请求后，才发送真正的请求，并且携带真实数据

跨域

详见我自己写的这篇

http://t.csdn.cn/ZmIRu