AJAX学习笔记总结
目录
AJAX简介
XML简介
AJAX的特点
AJAX的优点
AJAX的缺点
服务端框架
GET请求
绑定事件步骤：
需求案例
body代码
POST请求
跨域
同源策略
如何解决跨域
JSONP
JSONP是什么？
JSONP怎么工作的
JSONP的使用
CORS
CORS是什么？
CORS怎么工作的？
CORS的使用
AJAX简介
- AJAX就是异步的JS和XML
- 通过AJAX可以再浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据
XML简介
- XML：可扩展标记语言
- XML被用来传输和存储数据
- XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据
| 注意：XML现在已经被JSON取代 |
AJAX的特点
AJAX的优点
- 可以无需刷新页面而与服务器端进行通信
- 允许你根据用户事件来更新部分页面内容
AJAX的缺点
- 没有浏览历史，不能回退
- 存在跨域问题（同源）
- SEO（搜索引擎优化）不友好
服务端框架
步骤：
- 引入express：const express = require('express')
- 创建应用对象：const app = express()
- 创建路由规则
GET请求
绑定事件步骤：
- 创建元素对象
- 初始化，设置请求方法和url
- 发送
- 事件绑定
需求案例
- 点击“点击发送请求”按钮后，向服务端发送GET请求并在下面容器中显示请求到的信息。
body代码
POST请求
| 注：和上述GET方法类似，只需更改请求方法即可 |
跨域
同源策略
- 同源策略最早由Netscape公司提出，是浏览器的一种安全策略。
- 同源：协议、域名、端口号必须完全相同
- 违背同源策略就是跨域
如何解决跨域
JSONP
JSONP是什么？
- JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来的，只支持get请求。
JSONP怎么工作的
- 在网页中有一些标签天生具有跨域能力，例如：img link iframe script
- JSONP就是利用script标签的跨域能力来发送请求
JSONP的使用
- 动态的创建一个script标签
var script = document.createElement("script")
CORS
CORS是什么？
CORS是跨域资源共享，CORS是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post请求，跨域资源共享标准新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源
CORS怎么工作的？
- CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到响应以后就会对响应放行。
CORS的使用
主要是服务器端的设置：