AJAX

image-20240216171811112

Asynchronous Javascript And XML 异步JavaScript和XML,

最大的特点: 在网页不刷新的情况下向网页发送http请求, 得到http线程,

  • 通过Ajax可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据
  • AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式

比如百度搜索框, 一输入下面就会跳出来相关词条, 以及注册的时候检测用户名是否可用

发送ajax请求的方式

  1. xhr : 鼻祖, 开发中不经常用, 因为要自己去调用new XMLHttpRequest(), xhr.open, xhr.send

  2. jQuery :封装了xhr, get, post, 核心是封装dom操作, 但我们开发中一般避免直接操作dom

  3. axios :封装了xhr, promise风格的, 体积小

  4. fetch : 和xhr平级, 内置的, 能直接用, promise风格的, 会把返回的数据包两层promise, 兼容性稍差(ie不支持)

axios是最热门的ajax请求库

XML

Extensible Markup Language (XML) is a markup language that provides rules to define any data

现在已经被JSON取代, 简洁, 灵活度高, 快速将字符串转成JS对象

为什么要用AJAX

  • 优点

    1. 可以无刷新页面与服务端进行通信

    2. 允许你根据用户事件(鼠标, 表单,文档事件)来更新部分页面内容

  • 缺点

    1. 没有浏览历史，不能回退

    2. 存在跨域问题（同源） a.com 向 b.com 发请求 , 发不了

    3. SEO不友好（search engine optimazation 爬虫获取不到信息）

基本使用

  1. 首先搭建服务器(用nodeJS和express)

    image-20230719130156616

  2. 然后写发送请求的网页, 点击按钮, 可以把response body 呈现到页面上的框(id为result的div)里

    image-20230719130230367

image-20230719130253727

设置请求参数

如果是发送GET请求在这个后面直接添加

image-20230719130548954

浏览器看

image-20230719130719449

如果是发送Post请求, 那么需要在这里添加

image-20230719133721723

发送POST请求

跟发送get请求一样

image-20230719133803550

服务器端

image-20230719133815687

POST 设置请求内容

设置请求参数

已写过, 发送Post请求, 那么需要在这里添加

image-20230719133721723

设置请求头

使用方法 xhr.setRequestHeader(...)

image-20230719134741159

如果想要不报错, 那么服务端那边就要写上

image-20230719134840857

服务端响应JSON

客户端:

image-20230719170148322

下面这个是xhr.response输出的内容

image-20230719165904016

服务端

image-20230719170436027

IE缓存问题

ie浏览器会缓存数据, 这就导致最新的结果不给你呈现, 它用的是缓存的里面的结果, 如何解决?

在路径后面添加参数, 每一次发请求的时间戳就不一样, 就会认为是新的, 就从服务器去取数据

image-20230719171829655

请求超时与网络异常

客户端

image-20230720182922032

服务端

image-20230720183202503

取消请求

image-20230721162052794

重复请求问题

image-20230721162059288

JQuery发送AJAX请求

服务端(返回JSON格式数据)

image-20230721162648149

客户端:一共有四个参数

image-20230721163053585

要发post请求就把get改成post

JQuery通用方法发送AJAX请求

image-20230721164324010

axios发送AJAX请求

axios是基于promise这种操作方式的一个AJAX封装的包

可以node安装axios, 我们选择直接引入script标签

<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>

axios发送get请求

image-20230721182907553

value的输出结果

image-20230721182921698

axios发送post请求

image-20230721183041362

axios通用方法发送请求

image-20230721183832298

fetch发送AJAX请求

image-20230721185027242

同源策略和解决跨域

同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。

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

如何解决跨域

JSONP(JSON with padding, 非官方), 或者 CORS(官方)

思路:

返回函数调用, 把参数传入函数

直接通过script标签里面的src向服务器发送请求, 服务器要返回一串js代码, 浏览器才能解析

image-20230722143523203

发送原生JSONP请求

实现功能:

用户输入用户名后, 失去焦点(unblur)就给服务端发请求, 验证这个名字是否可用(我们这里没有数据库, 所以直接返回不可用), 返回后, 客户端的input框变红, 同时有文字提示:该用户名不可用

客户端

image-20230722150233535

服务端

image-20230722150243897

JQuery发送JSONP请求

我没打

CORS

CORS（Cross-Origin Resource Sharing），跨域资源共享。

CORS 是官方的跨域解决方 案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 请求。

跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些 源站通过浏览器有权限访问哪些资源

CORS 怎么工作的？ CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应 以后就会对响应放行。

直接在服务端设置一个响应头

res.setHeader('Access-Control-Allow-Origin','*') //设置允许跨域, 第二个参数填写允许的url, 这里是通配符

还有一些其她的, 例如

res.setHeader('Access-Control-Allow-Headers','*')// 可以自定义头信息
res.setHeader('Access-Control-Allow-Method','*') //可以各种方法都发过来