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****的优点

  1. 可以无需刷新页面而与服务器端进行通信
  1. 允许你根据用户事件来更新部分页面内容

AJAX****的缺点

  1. 没有浏览历史,不能回退
  1. 存在跨域问题(同源)
  1. SEO(搜索引擎优化)不友好

服务端框架

步骤:

  1. 引入express:const express = require('express')
  1. 创建应用对象:const app = express()
  1. 创建路由规则

GET****请求

绑定事件步骤:

  1. 创建元素对象
  1. 初始化,设置请求方法和url
  1. 发送
  1. 事件绑定

需求案例

  • 点击"点击发送请求"按钮后,向服务端发送GET请求并在下面容器中显示请求到的信息。

body****代码

POST****请求

|-------------------------|
| 注:和上述GET方法类似,只需更改请求方法即可 |

跨域

同源策略

  • 同源策略最早由Netscape公司提出,是浏览器的一种安全策略。
  • 同源:协议、域名、端口号必须完全相同
  • 违背同源策略就是跨域

如何解决跨域

JSONP

JSONP****是什么?

  • JSONP(JSON with Padding),是一个非官方的跨域解决方案,纯粹凭借程序员的聪明才智开发出来的,只支持get请求。

JSONP****怎么工作的

  • 在网页中有一些标签天生具有跨域能力,例如:img link iframe script
  • JSONP就是利用script标签的跨域能力来发送请求

JSONP****的使用

  1. 动态的创建一个script标签

var script = document.createElement("script")

CORS

CORS****是什么?

CORS是跨域资源共享,CORS是官方的跨域解决方案,它的特点是不需要在客户端做任何特殊的操作,完全在服务器中进行处理,支持get和post请求,跨域资源共享标准新增了一组HTTP首部字段,允许服务器声明哪些源站通过浏览器有权限访问哪些资源

CORS****怎么工作的?

  • CORS是通过设置一个响应头来告诉浏览器,该请求允许跨域,浏览器收到响应以后就会对响应放行。

CORS****的使用

主要是服务器端的设置:

相关推荐
linux_cfan17 小时前
videojs v10 源代码系列解读:14 · 谓词守卫:在运行时安全地调用能力
前端·javascript·音视频
是翎17 小时前
深度长文|2026产品经理AI实践手册
人工智能·深度学习·学习·自然语言处理·数据挖掘
Linux-lucky18 小时前
32-38-Linux学习之旅之MySQL综合
linux·运维·学习·mysql·ubuntu
kyriewen18 小时前
我扒了 10,221 条 JD:腾讯技术岗 75% 在要 AI
前端·人工智能·ai编程
郑州光合科技余经理18 小时前
同城外卖小程序开发:下单成功后,后台导出能不能对上用户端状态
开发语言·前端·git·后端·uni-app·php·ai编程
知识分享小能手19 小时前
C++ 学习教程,从入门到精通,C++ 入门知识 — 完整知识点(1)
开发语言·c++·学习
IT_陈寒19 小时前
Vue的响应式让我熬到凌晨三点,原来漏了这个小细节
前端·人工智能·后端
Blanche150019 小时前
利用 RAG 为答疑机器人扩展知识范围
前端
天若有情67319 小时前
【纯前端小工具】公历生日转农历,批量查询每年农历生日对应的公历日期(GitHub Pages在线直接用)
前端·javascript·github pages·农历转换·lunisolar·网页小工具
SoonITer19 小时前
怎样构建一个 Agent-friendly 的网站
前端·agent