AJAX基本原理

原生AJAX

AJAX介绍

AJAX全称为Asynchronous JavaScript And XML，就是异步的JS和XML
通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据

XML简介

XML 可扩展标记语言
XML 用来传输和存储数据

AJAX的特点

1. 优点：
   （1） 可以无需刷新页面而与服务器端进行通信
   （2）允许你根据用户事件来更新部分页面内容
2. 缺点：
   （1）没有浏览历史，不能后退
   （2）存在跨域问题（同源）
   （3）SEO(搜索引擎优化)不友好

HTTP协议

HTTP(hypertext transport protocol)协议【超文本传输协议】，协议详细规定了浏览器和万维网服务器之间互相通信的规则

请求报文（浏览器发请求）

格式和参数：

• 请求行:包括请求方法（GET、POST、PUT、DELETE）URL（请求地址）、版本号、HTTP版本（HTTP/1.1）
• 请求头： 是HTTP的报文头，报文头包含若干个属性，格式为“属性名:属性值”，服务端据此获取客户端的信息。
• 请求体：浏览器发送给服务器的数据(参数)

响应报文（服务器响应）

格式和参数：

• 响应行 ：HTTP版本（HTTP/1.1）、状态码（200）、状态信息（OK）
• 响应头： 与请求头类似
• 响应体： 服务器响应数据，客户端请求的内容

express基本使用

安装node
在文件目录下打开命令行 npm install express
自动重启工具安装 npm install -g nodemon

跨域

1. 同源策略

同源：协议、域名、端口号必须完全相同
违背同源策略就是跨域

2. 如何解决跨域

• JSONP

JSONP是非官方的跨域解决方案，只支持get请求
JSONP是利用script标签的跨域能力来发送请求的

• CORS

跨域资源共享，官方的跨域解决方案
特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post请求。
跨域资源共享标准新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源
CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行
使用方法：在服务器加上响应头
response.setHeader(“Access-Control-Allow-Origin”,““);
response.setHeader(“Access-Control-Allow-Headers”,””);
response.setHeader(“Access-Control-Allow-Method”,“*”)