ajax尚硅谷笔记——跨域请求、axios发送ajax请求、jquery发送ajax请求

最新推荐文章于 2024-05-24 11:16:31 发布

Root_src

最新推荐文章于 2024-05-24 11:16:31 发布

阅读量2.2k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： ajax 文章标签： ajax

本文链接：https://blog.csdn.net/weixin_53317758/article/details/127972880

ajax 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了Ajax的基本概念、XML、特点，深入讲解了通过原生JavaScript进行AJAX操作，包括设置请求体、请求头、处理响应JSON数据、网络超时与异常、取消请求等问题。此外，还探讨了jQuery中的Ajax使用，以及通过axios和fetch发送Ajax请求的方法。文章着重讨论了跨域问题，阐述了JSONP和CORS的解决方案，并提供了实际的jQuery JSONP请求示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

去恶补了ajax知识

一、ajax简介

1、ajax全称为Asynchronous JavaScript And XML，就是异步的JS 和XML 2、通过AJAX可以再浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据 3、ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式

二、XML简介

1、可扩展标记语言

2、被设计用来传输和存储数据

3、XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，由来表示一些数据。就是自己给标签取名字

4、现在被json取代了

三、ajax特点

1、优点

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

2、缺点

没有浏览历史，不能回退存在跨域问题（同源） SEO不友好（爬取数据）

四、HTTP协议

http协议（超文本传输协议），协议详细规定了浏览器和万维网服务器之间互相通信的规则。

1、请求报文

重点是格式与参数

行   GET/s?ie=utf-8 HTTP/1.1
头   Host:atguigu.com
     Cookie:name=guigu
     Content-type:application/x-www-form-urlencoded
     User-Agent:chrome 83
空行
体    username=admin&password=admin

2.响应报文

五、通过原生js进行AJAX操作

1、基本实现

node.js部分：

  <style>
    #result{
      width: 200px;
      height: 100px;
      border: solid 1px #90b
    }
  </style>
</head>
<body>
  <button>点击发送请求</button>
  <div id="result"></div>
  <script>
    // 获取button 元素
    const btn = document.getElementsByTagName('button')[0]
    const result = document.getElementById('result')
    // 绑定事件
    btn.onclick = function(){
      // 1.创建对象
      const xhr = new XMLHttpRequest() 
      // 2.初始化 设置请求方法和 url
      xhr.open('GET', 'http://127.0.0.1:8000/server')
      // 3.发送
      xhr.send()
      // 4.事件绑定 处理服务端返回的结果
      // on when 当...时候
      // readystate 是 xhr 对象中的属性 表示状态 0 1 2 3 4
      // change 改变
      xhr.onreadystatechange = function(){
        // 判断 服务端返回了所有的结果
        if(xhr.readyState === 4){
          // 判断响应状态码 200 404 403 401 500
          // 2xx 成功
          if(xhr.status >= 200 && xhr.status < 300){
            // 处理结果 行 头 空行 体
            // 1.响应行
            // console.log(xhr.status); //状态码
            // console.log(xhr.statusText); //状态字符串
            // console.log(xhr.getAllResponseHeaders()); //所有响应头
            // console.log(xhr.response); //响应体
            // 设置 result 的文本
            result.innerHTML = xhr.response
          }else{}
        }
      }
    }
  </script>

先启动服务器，网页点击按钮后向服务器发送GET请求会收到如下结果

POST请求

将服务器GET部分复制一份，将GET改为POST，同理可得

设置请求体、请求头

// 发送请求体写法很自由尽量规范美观

// xhr.send('a:100&b:200&c:300')

// xhr.send('1234567')

xhr.send('a=100&b=200&c=300')

服务器响应JSON数据

json的两种方法：

将对象转化为json 格式：JSON.stringify()
将JSON格式转化为对象：JSON.parse()

nodemon自动重启安装

重新编辑服务器都需要node server 重启，安装nodemon之后F5就可以重启服务器

网络超时与异常

用户给服务器发送请求，服务器返回值给用户时返回时间太久，可以提前提醒用户重启页面

取消请求

上一个网络异常是自动取消请求，现在是手动取消请求。当服务器返回给用户时还没有到用户，就手动取消请求

abort 是XMLHttpRequest 的一个对象

不能使用const 值会变量会报错

重复发送请求的问题

用户频繁发起请求，服务器频繁响应

如何解决？查找是否有相同的请求，如果有则先取消相同的请求，再发一次请求即可

jQuery 中的 AJAX

jquery用axios 请求报文分别有：

自定义强的用$.ajax发送请求，简易代码用$.get / $.post

用 axios发送 ajax请求

是在外网复制的axios链接，可能没有办法实现跨域请求

解决：下载个插件，cnpm install cors --save,在js文件中，const cors=require('cors');app.use(cors()); 这样后不用设置响应头也能解决所有问题实现跨域。

（1）首先通过命令行 npm install -g cnpm --registry=https://registry.npm.taobao.org，安装cnpm。
（2）然后在server.js文件中，const express = require("express");之后添加 const cors=require('cors'); 注意cors是由引号包围的
（3）在const app = express();之后添加app.use(cors());
（4）启动运行，即可不报错

.then() 处理返回结果

使用fetch函数发送ajax请求

fetch函数是全局对象，可以直接调用，返回的是promise对象

fetch 使用频率较少

同源策略

协议、域名、端口号，必须完全相同

跨域请求？

两个网址来源于不同的服务器

如何解决跨域

jsonp

仅支持get 请求

如何工作：在网页有一些标签天生具有跨域能力，比如：img link iframe script，JSONP就是利用script标签的跨域能力来发送请求的

使用end() 不会加特殊的响应头，最后返回是带有参数的函数，函数能够被浏览器解析，参数是指用户需要看到的数据

案例-

用户名输入后光标离开显示用户已存在

jquery发送jsonp请求

按下按钮向8000端口发送请求将内容返回框内

callback参数的值作为函数被服务器调用要看成jquery已经注册了这个函数

cors

跨域资源共享。CORS是官方的跨域解决方案
特点是不需要在客户端做任何特殊的操作，完全在服务器端中处理，支持get和post请求。跨域资源共享标准新增了一组http首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源
- 工作原理：通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应后就会对响应放行