AJAX基础

Ajax简介
1.ajax就是异步的js和xml
2.通过ajax可以在浏览器中发送异步请求，最大的优势就是无刷新获取数据
3.ajax不是新语言，而是一种将现有的标准组合在一起的刷新方式

XML简介
1.xml可扩展标记语言
2.被设计用来传输和存储数据
3.xml和html类似，不同的是html中都是预定义标签，而xml中没有预定于标签
4.xml中都是自定义标签，用来表示一些数据。

//比如说我有一个学生数据：
	name="孙悟空"; age=18; gender="男";
//用xml表示
	<student>
	  <name>孙悟空</name>
	  <age>18</age>
	  <gender>男</gender>
	</student>

//现在xml已经被json取代，服务器返回数据的格式多为json
	{"name": "孙悟空",
	 "age": 18,
	 "gender": "男"}

AJAX特点
优点：可无需刷新页面与服务器端进行通信；允许你根据用户事件来部分更新内容。
缺点：没有浏览历史不能回退；存在跨域问题（同源）;SEO不友好

ajax请求的基本操作

借用express使用ajax:

//1.引入express
const express = require('express');

//2.创建应用对象
const app=express();

//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server',(request,response)=>{
	//设置响应头   设置允许跨域
	response.setHeader('Access-Control-Allow-Origin','*');
	//设置响应体
	response.send('Hello AJAX');
});

//4.监听端口启动服务
app.listen(8000,()=>{
	console.log("服务已启动，8000端口监听中...");
})

ajax就是基于浏览器提供的XMLHttpRequest对象来实现的。

//获取button元素
const btn=document.getElementsByTagName('button')[0];
//绑定事件
btn.onclick=function(){
	//1.创建对象
	const xhr=new XMLHttpRequest();
	//2.初始化 设置请求方法和url
	xhr.open('GET','http://127.0.0.1:8000/server');
	//3.发送
	xhr.send();
	//4.事件绑定  处理服务器端返回的结果
	//on  当。。。的时候
	//readystate 是xhr对象中的属性，表示状态0（初始化完毕） 1（open完成） 2（send完成） 3（服务器返回部分数据） 4（服务器返回所有数据）
	//change 状态改变时触发，readystate可发生4次改变
	xhr.onreadystatechange=function(){
		//判断（服务端返回了所有的结果）
		//响应报文：请求行 请求头 空行  请求体
		if(xhr.readyState===4){
			//判断响应状态码 200 404 403 401 500
			//2xx 成功
			if(xhr.status >= 200 && xhr.status < 300){
				console.log(xhr.status); //状态码
				console.log(xhr.statusText);  //状态字符串
				console.log(xhr.getAllResponseHeaders()); //所有响应头
				console.log(xhr.response); //响应体
			}
		}
	}
}

ajax设置请求参数
在请求地址后面加入参数。
eg：xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&c=300');

post设置请求头与请求头（发送参数）：

const result=document.getElementById("result");
result.addEventListener("mouseover",function(){
	const xhr=new XMLHttpRequest();
	xhr.open('POST','http://127.0.0.1:8000/server');
	
	//设置请求头
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	//xhr.setRequestHeader('name','atguigu'); 自定义请求头
	
	xhr.send('a=100&b=10');
	//xhr.send('a:100&b:10');
	//xhr.send('anclnal123');
	xhr.onreadystatechange=function(){
		if(xhr.readyState===4){
			if(xhr.status >= 200 && xhr.status < 300){
				result.innerHTML=xhr.response;
			}
		}
	}
})

AJAX服务端响应json数据：

const result=document.getElementById("result");
window.onkeydown=function(){
	const xhr=new XMLHttpRequest();
	xhr.responseType='json';
	xhr.open('GET','http://127.0.0.1:8000/server');
	xhr.send();
	xhr.onreadystatechange=function(){
		if(xhr.readyState===4){
			if(xhr.status >= 200 && xhr.status < 300){
				//当服务器返回的数据为json格式时需对数据进行转换
				
				/*
				在服务器传送代码时需格式转换
				const data={
					name:'atguiga'
				};
				let str=JSON.stringify(data); 对对象进行字符串转换
				response.send(str);
				*/
				
				//1.手动转换
				let data=Json.parse(xhr.response);
				result.innerHTML=data.name;
				//2.自动转换  在开始请求前设置响应体数据类型,见此模块代码第四行
				result.innerHTML=xhr.response.name;
			}
		}
	}
}

AJAX的IE缓存问题：向服务器请求数据时IE会把请求的结果缓存到浏览器中，下次再请求时则会在服务器中拿取数据，对于实时性要求高的服务无法满足数据更新。
解决IE缓存的方法是在发送请求时添加时间戳，使每次的数据都因时间不同而发生变化

xhr.open('GET','http://127.0.0.1:8000/server?t='+Data.now());

AJAX请求超时或网络异常处理

const result=document.getElementById("result");
result.addEventListener("mouseover",function(){
	const xhr=new XMLHttpRequest();
	//超时设置 2s
	xhr.timeout=2000;
	//超时回调
	xhr.ontimeout=function(){  
		alert("请求超时");
	}
	//网络异常回调
	xhr.onerror=function(){  //可通过浏览器调试时将网络选项修改为offline测试
		alert("网络异常")
	}
	xhr.open('POST','http://127.0.0.1:8000/server');
	xhr.send();
	xhr.onreadystatechange=function(){
		if(xhr.readyState===4){
			if(xhr.status >= 200 && xhr.status < 300){
				result.innerHTML=xhr.response;
			}
		}
	}
})

AJAX取消请求

<button>点击发送</button>
<button>点击取消</button>
<script>
	const btns=document.querySelectorAll('button');
	let x=null; //因x在两个函数中均使用到故需将其拿出做全局变量
	btns[0].onclick=function(){
		x=new XMLHttpRequest();
		x.open("GET",'http://127.0.0.1:8000/server');
		xhr.send();
	}
	//abort 取消
	btns[1].onclick=function(){
		x.abort();
	}
	...
</script>

AJAX解决重复请求问题

let isSending = false; //是否正在发送请求
btns[0].onclick=function(){
	//判断标识变量
	if(isSending) x.abort(); //如果正在发送则取消该变量，创建一个新的请求
	x=new XMLHttpRequest();
	//修改标识变量
	isSending=true;
	x.open("GET",'http://127.0.0.1:8000/server');
	x.send();
	x.onreadystatechange=function(){
		if(x.readyState===4){
			//修改标识变量  发送完成即可修改，无需判断响应结果是否正确
			isSending = false;
		}
	}
}

同源策略：浏览器的一种安全策略
同源：发送的请求与服务器的协议、域名、端口号都必须相同，违背同源策略就是跨域。可使用jsonp解决

nodemon
项目开发阶段因经常需对文件进行修改，修改后不断地项目重启很麻烦，故可安装nodemon工具包。
nodemon用来监视node.js应用程序中的任何更改并自动重启服务,非常适合用在开发环境中。
nodemon将监视启动目录中的文件，如果有任何文件更改，nodemon将自动重新启动node应用程序。
nodemon不需要对代码或开发方式进行任何更改。 nodemon只是简单的包装你的node应用程序，并监控任何已经改变的文件。nodemon只是node的替换包，只是在运行脚本时将其替换命令行上的node。
nodemon Git地址：github.com/remy/nodemon#nodemon
安装后重新启动项目nodemon server.js
学习视频链接

注意axios、fetch与ajax关系