目录
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****的使用
主要是服务器端的设置: