ajax，xml，axios，html学习笔记

XML:可扩展标记语言，被设计来传输和存储数据
JSON:现在用的都是json

HTTP：

约定，规则：请求；响应
请求报文：

-------------------行-------------------
包含了一个方法和一个请求URL，还有HTTP版本。这些字段都有空格分开
-------------------头-------------------
首部字段
Date:Tue,3Oct 1997 02:16:03 GMT	服务器产生响应的日期
Content-length:15040	实体的主体部分包含了15 040字节的数据
Content-type:image/gif	实体的主体部分是一个GIF图片
Accept: image/gif, image/jpeg, text/html	客户端可以接收GIF图片和JPEG图片以及HTML
-------------------空行-------------------
-------------------体-------------------
将一个页面表单中的组件值通过 param1=value1¶m2=value2 的键值对形式编码成一个格式化串，它承载多个请求参数的数据。不但报文体可以传递请求参数，请求 URL 也可以通过类似于“/chapter15/user.html? param1=value1¶m2=value2”的方式传递请求参数。

响应报文：

-------------------行 -------------------
包含了响应报文使用的HTTP版本，数字状态，以及描述状态码的原因短语。
-------------------头-------------------
设置跨域：response.setHeader.('access-controa-allow-origin')
HTTP/1.0 200 OK
Content-Type: image/gif
Content-Length: 8572
Server: Test Server
Version 1.0
-------------------空行-------------------
-------------------体-------------------

XHR

// 1.创建对象
const  xhr=new XMLHttpRequest(); 
// 2.打开连接，初始化，设置请求对象和url
        xhr.open("GET",‘http://127.0.0:8000/server’);
        // 3.发送
        xhr.send();
        // 4.设置监听，事件绑定，处理服务端返回的结果
        xhr.onreadystatechange = function(){
        //判断
            if(xhr.readyState == 4){
                if(xhr.status >= 200 && xhr.status <= 300){
                    xhr.status:状态码
                    xhr.statusText:状态字符串
                    xhr.getAllResponseHeader():响应头:
                    xhr.response:响应体
                }else{
                        alert("error");
                     }
            }
        }

• onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
• readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
  0: 请求未初始化
  1: 服务器连接已建立
  2: 请求已接收
  3: 请求处理中
  4: 请求已完成，且响应已就绪
• status 分为两种 200: “OK” 和 404: 未找到页面
  每当readyState改变时，就会触发onreadystatechange事件
  缺点:

1. 语法复杂,需要自己处理状态管理,错误处理的逻辑,而且错误处理必须得在回调函数中进行错误判断
2. 功能少,需要手动设置请求头,处理超时,取消请求等,setRequestHeader()
3. XSRF, 需要手动设置请求头来保护
4. 仅限浏览器环境,无法在服务器端直接用

Ajax

Ajax 是基于浏览器提供的 XMLHttpRequest 对象来实现的。
异步”性质，这意味着它可以与服务器通信、交换数据并更新页面，而无需刷新页面。
缺点:兼容性差,可读性差(没用promise,用的是回调函数)

Axios

1. 基于promise. 在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests
2. 有拦截器, transformRequest, axios.interceptors
3. 允许取消请求,通过创建取消令牌cancel token: source.token,source.cancel(‘取消’),用令牌进行请求配置或在拦截器中中断请求,
4. 并发, axios.all 和 axios.spread
5. 自动转换数据
6. 错误处理机制,可返回详细错误信息,如状态码,描述等
7. api简洁,直接用axios.get(url,…), post、delete、head、options、put、request、patch
8. 防止xsrf: xsrfCookieName: ‘XSRF-TOKEN’, xsrfHeaderName: ‘X-XSRF-TOKEN’,
9. 监控请求进度: onUploadProgress 和 onDownloadProgress
   10.超时 timeout:5000

this.$axios({
		method: 'get',
		url: '/goods.json',
    	params: {
            id:1
        }
	}).then(res=>{
		console.log(res.data);
	},err=>{
		console.log(err);
	})
	
this.$axios.post('/url',{
				id:1
			}).then(res=>{
				console.log(res.data);
			},err=>{
				console.log(err);
			})

fetch

也是以promise为基础,内置json解析,更好的处理错误

fetch('http://127.0.0:8000/server',{
	method: 'post',
	//请求头
	headers:{
		name:'qqq'
	}
	//请求体
	body:'username=admin&password=admin'
)  
.then(...)
.catch(...)

https://huaweicloud.csdn.net/6510ff85993dd34278ee584d.html?dp_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6NzA3NDI4LCJleHAiOjE3MTQ0OTkzNDgsImlhdCI6MTcxMzg5NDU0OCwidXNlcm5hbWUiOiJ3ZWl4aW5fNTA0ODg4OTcifQ.hJWhs0eATa0M6h31MCp5Thifr6no6pV2uG7fId-kzuk