php和express用来做后端，还是express强大和方便！！！
翻看笔记才知道自己当时下载
Fiddler,Wampserver，phpstudy_pro是为了什么,实在不敢说自己学过php
文章目录
一、 Ajax介绍1-1 原生AJAX1-2 XML简介1-4 AJAX的特点 第二章 HTTP+node2-1 HTTP协议请求报文 与 响应文本结构2-2 Express框架介绍与基本使用 第三章AJＡＸ3-1 AJAX_GET3-2 AJAX_POST3-3 AJAX设置请求头信息3-4 服务端响应JSON数据3-4-1 3-5 nodemon自动重启工具3-6 IE缓存问题解决3-7 Ajax请求超时与网络异常处理3-8 AJAX 请求重复发送问题 第四章 jQuery发送AJAX，Axios，fetch4-1 jQuery中的AJAX4-1-1 get请求,post请求4-1-2 jQuery通用方法发送AJAX请求 4-2 Axios发送AJAX请求4-2-1 Axios 函数发送 AJAX请求 4-3 使用fetch函数发送AJAX请求 第五章 跨域5-1同源策略5-2 解决跨域5-2-1 JSONP5-2-2 CORS（Cross-Origin Resource Sharing）一、 Ajax介绍
HTTP原生，jQuery，fetch，axios
1-1 原生AJAX
简介： 全称为Asynchronous JavaScript And XML,就是异步的JS和XML 通过AJAAX可以在浏览器中向服务器发送异步请求最大的优势：无刷新获取数据AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式1-2 XML简介
XML可扩展标记语言XML 被设计用来传输和存储数据XML于HTML 类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签 XML 格式进行交换–> JSON1-4 AJAX的特点
优点： 可以无需刷新页面与服务器端进行通信允许根据用户事件来更新部分页面内容 AJAX缺点 没有浏览历史，不能回退存在跨域问题（同源）SEO 不友好第二章 HTTP+node
2-1 HTTP协议请求报文 与 响应文本结构
HTTP : HTTP(hypertext transport protocol) 协议[超文本传输协议]，，协议详细规定了浏览器和万维网服务器之间相互通信的规则.
约定，规则
请求报文： 格式和参数
响应报文
2-2 Express框架介绍与基本使用
npm init --yesnpm i expressnode 脚本第三章AJＡＸ
3-1 AJAX_GET
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX GET请求</title><style>#result {width: 200px;height: 100px;border: 1px solid #90b;}</style></head><body><button>点击发送请求</button><div id="result"></div><script>// 获取button元素const btn = document.getElementsByTagName('button')[0];// 绑定事件btn.onclick = function() {// 1. 创建对象const xhr = new XMLHttpRequest();// 2. 初始化设置请求方法和url// xhr.open('GET', 'http://localhost:8080/server');// 发送参数xhr.open('GET', 'http://localhost:8080/server?a=100&b=200&c=300');// 3. 发送xhr.send();// 4. 事件绑定 处理服务端返回的结果// on when 当..时候// resdystate 是 xhr 对象中的属性， 表示状态 0 1 2 3 4// change 改变xhr.onreadystatechange = function() {// 判断if (xhr.readyState === 4) {// 判断响应状态码 200 404 403 401 500// 2xx 成功if (xhr.status >= 200 && xhr.status < 300) {// 处理结果 行 头 空行 体// 1. 响应行console.log(xhr.status); // 状态码console.log(xhr.statusText); // 状态字符串console.log(xhr.getAllResponseHeaders());console.log(xhr.response); // 响应体result.innerHTML = xhr.response;}}}}</script></body></html>
3-2 AJAX_POST
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Post请求</title><style>#result {width: 200px;height: 100px;border: 1px solid #903;}</style></head><body><div id="result"></div><script>// 获取元素对象const result = document.getElementById("result");// 绑定事件result.addEventListener("mouseover", function() {// console.log("test");// 1. 创建对象const xhr = new XMLHttpRequest();// 2. 初始化 设置类型 与 URLxhr.open('POST', 'http://localhost:8080/server');// 3. 发送// xhr.send();xhr.send('a=100&b=200&c=300');xhr.send('a:100&b:200&c:300');// 4. 事件绑定xhr.onreadystatechange = function() {// 判断if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {// 处理服务器返回的结果result.innerHTML = xhr.response;}}}})</script></body></html>
3-3 AJAX设置请求头信息
设置请求头
// 设置请求头xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')xhr.setRequestHeader('name', 'niutt');
Content-Type: 设置请求体内容的类型
有效的bug
3-4 服务端响应JSON数据
3-4-1
3-5 nodemon自动重启工具
免去了不停重新启动node.js
3-6 IE缓存问题解决
对AJAX的请求结果缓存，再次请求时返回的是缓存数据，无法实时请求
// ajax解决IE请求缓存问题xhr.open("GET", "http://localhost:8080/ie?t=+Date.now()");
3-7 Ajax请求超时与网络异常处理
<button>点击发送请求</button><div id="result"></div><script>const btn = document.getElementsByTagName('button')[0];const result = document.querySelector('#result');btn.addEventListener('click', function() {const xhr = new XMLHttpRequest();// 超时设置 2sxhr.timeout = 2000;// 超时回调xhr.ontimeout = function() {alert("网络异常，请稍后再试！");}// 网络异常的回调xhr.onerror = function() {alert("你的网络似乎出了一些问题");}xhr.open("GET", 'http://localhost:8080/delay');xhr.send();xhr.onreadystatechange = function() {if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {result.innerHTML = xhr.response;}}}})</script>
3-8 AJAX 请求重复发送问题
再次点击请求时，把第一个请求关闭使用isSending来判断当前是否有正在发送的请求，有的话就abort，重新发送下一个请求第四章 jQuery发送AJAX，Axios，fetch
4-1 jQuery中的AJAX
4-1-1 get请求,post请求
$.get(url,[data],[calback],[type])
url: 请求的URL地址data: 请求携带的参数calback： 载入成功时回调函数type: 设置返回内容格式，xml，html，script，json，text，_default
<script>$('button').eq(0).click(function() {$.get("http://localhost:8080/jQuery-server", {a: 100,b: 200}, function(data) {console.log(data);})})$('button').eq(1).click(function() {$.get("http://localhost:8080/jQuery-server", {a: 100,b: 200}, function(data) {console.log(data);}, 'json')})</script>
4-1-2 jQuery通用方法发送AJAX请求
头信息实现有点问题，第22集<script> $('button').eq(2).click(function() {$.ajax({// urlurl: 'http://localhost:8080/delay',// 参数data: {a: 100,b: 200},// 请求类型type: 'GET',// 响应体结果dataType: 'json',success: function(data) {console.log(data);},// 超时时间timeout: 2000,// 失败的回调error: function() {console.log('出错了！');},// // 头信息// headers: {//c: 300,//d: 400// }})})</script>
4-2 Axios发送AJAX请求
好处： 在node.js发送http请求支持Promise拦截器机制数据请求自动返回json数据4-2-1 Axios 函数发送 AJAX请求
4-3 使用fetch函数发送AJAX请求
第五章 跨域
5-1同源策略
同源策略（Same-Origin Policy）最早由Netscape公司提出，是浏览器的一种安全策略同源 ： 协议，域名，端口号必须完全一致 违背同源策略就是跨域 ajax默认遵守同源策略 同源策略就是来自同一区域5-2 解决跨域
5-2-1 JSONP
JSONP （JSON with Padding）：是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发
只支持get请求
JSONP怎么工作：
在网页有一些标签天生具有跨域能力，比如： img link iframe scriptJSONP : 利用script标签的跨域能力来发送请求
JSONP的使用：
动态创建一个script标签
var script = document.createElement("script")
设置script的scr， 设置回调函数
5-2-2 CORS（Cross-Origin Resource Sharing）
跨域资源共享，COPS是官方的跨域解决方案
不需要客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post请求，跨域资源共共享标准新增了一组HTTp首部字段允许服务器声明哪些源站通过浏览器有权限访问哪些资源
CORS怎么工作
