Ajax

Sweety
102 阅读4分钟

01-认识ajax

网页不刷新就可以获取数据

  • 在网站输入关键字会提示 image.png

  • 注册页面，用户名被使用过会提醒 image.png

  • 京东网站，鼠标点击一级目录会显示二级目录 image.png

02-HTTP

  • HTTP 全称为 Hypertext Transfer Protocol，翻译为中文是“超文本传输协议”的意思，它是互联网中应用最为广泛的一种网络协议。

请求 内容：报文

请求包括四部分：
    1)请求 行      请求类型：GET/Post；优化路径URL；HTTP版本：1.1
    2)请求 头      格式——名字：空格+值
           Host: atbaidu.com
           Cookie: name=baidu
           Content-type: application/ x-www-from-urllencoded
           User-Agent: chrome 83
    3)请求 空行     必须得有
    4)请求 响应体   GET请求：请求体为空；Post请求：请求体可以不为空
           username=admin&password=admin

响应 结果：报文

四部分：
    1）行       HTTP版本：1.1；响应状态码：200；响应状态字符串：OK
    2）头       格式——名字：空格+值
        Content-Type: text/html;charset=utf-8
        Content-length: 2048
        Content-encoding: gzip
    3）空行      必须得有
    4）响应体    <html>
                   <head>
                   </head>
                   <body>
                       <h1>我是一个孤独的h1</h1>
                   </body>
                </html>
                
     * 200表示  OK
     * 404    服务器找不到请求的资源
     * 500    服务器遇到了不知道如何处理的情况
  • get请求： image.png
  • post： image.png

03-Express框架

  • Express向服务器发请求 image.png

  • 在终端里：node +文件名 启动服务

  • 打开浏览器测试：127.0.0.1:8900 image.png

  • 敲回车的一刹那发送的请求如下： image.png

04-ajax案例 (发送GET请求)

01-请求发送前的准备

前端页面准备

  • HTML
  • 需求:点按钮发请求,结果在div中呈现 image.png

服务端代码准备

  • JS image.png

端口(相当于服务窗口)被使用：

  • 在终端里：把cmd转成node，表示03-Express中还在使用端口
  • ctrl+c 释放前面的端口
  • 释放窗口后重新启动 node +文件名
  • 打开浏览器测试：127.0.0.1:8900/server image.png
  • 名字和值 image.png

02-AJAX请求的基本操作

image.png

  • 结果在div中呈现 image.png

03-AJAX设置请求参数

  • url地址后边缀参数 ?xxx&xxx&xxx image.png
  • 查看效果 image.png

05-发送POST请求

  • 需求:鼠标放在div上时发POST请求,结果(响应体)在div中呈现 image.png
  • 还需要将JS代码中的GET换成POST，不然不匹配 报错 image.png
  • 每一次JS代码修改后都需要重新启动服务 image.png

01-AJAX设置请求参数

  • 请求体在send里设置 三种方法...比较灵活 image.png
  • 查看效果 image.png

06-AJAX设置请求头信息

  • 使用预定义的头 image.png
  • 查看效果，请求头中： image.png

自定义请求头

  • 第一步 HTML中 image.png
  • 第二步 JS中 image.png
  • 查看效果 image.png

07-服务端响应JSON数据

JS代码 image.png

  • 1.手动对数据做转化

image.png

  • 2.自动转换

image.png image.png

08-安装nodemon

  • JS代码修改后自动重启服务，不需要手动重启

      安装：npm install -g nodemon
  安装完之后，用nodemon +文件名 重新启动

09-IE缓存问题

  • ie浏览器中存在数据缓存，最新结果无法呈现，发送的是自己内部缓存的结果

解决方法：

  • 获取时间戳 image.png

10-AJAX请求超时与网络异常处理

请求超时： image.png

  • 设置2秒超时提醒 image.png

网络异常： image.png

  • 检验方法：把online改成offline image.png

11-AJAX取消请求——abort

  • 请求过程中：在结果没回来前，可以利用代码手动取消请求 image.png

12-AJAX请求重复发送问题

  • 问题：每点击一次就会创建一个请求 image.png

  • 解决：第二次点，把上一次没完成的请求关掉

        标识变量：
    let inSending = false; 
    // 是否正在发送AJAX请求
    // false 标识没有发；true 正在发

image.png

  • 效果： image.png

13-jQury发送AJAX请求方法

引进jQury资源: https://www.bootcdn.cn/ 搜索 jquery

image.png

01-GET

  • 加上Json 结果转成字符串 image.png image.png

02-POST

  • 没加Json 不会转字符串 image.png
  • GET加了json POST没加json 对比 image.png

03-通用型发送AJAX

14-Axios发送AJAX请求

01-GET方式

image.png

02-POST方式

image.png

03-Axios函数(通用型)发送AJAX

image.png

14-使用fetch发送AJAX请求

image.png

15-跨域

01-AJAX同源策略

  • 同源：协议、域名、端口，必须完全相同。同源——同一来源
  • 违背同源策略就是跨域
  • AJAX在发送请求时，默认遵循同源策略 image.png image.png

02-解决跨域——JSONP

  • 返回结果是一个函数调用，函数的实参是想给客户端返回的结果数据
  • 函数必须要在前端提前声明，否则没有函数会报错 image.png image.png

03-jQuery发送jsonp请求

image.png

  • cd就是callback的值 image.png

04-设置CORS响应头实现跨域

  • 只需要加上响应头即可 image.png
avatar
文章
阅读
粉丝