前后端通信方式之Ajax、Fetch

最新推荐文章于 2023-07-28 13:44:14 发布
最新推荐文章于 2023-07-28 13:44:14 发布
阅读量459 收藏 1
点赞数
分类专栏： 前后端交互 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chonger_feifei/article/details/123342825
版权

Ajax

Asynchronous JavaScript and XML（异步 JavaScript 和 XML）
异步：
向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，浏览器可以做自己的事情；直到成功获取响应后，浏览器才开始处理响应数据

需要搭建服务器环境；因非服务器环境下，很多浏览器无法正常使用 Ajax
比如：
Live Server
windows phpStudy
Mac MAMP
XMLHttpRequest

兼容性比 Fetch 好

使用步骤

1.创建 xhr 对象

   const xhr = new XMLHttpRequest();

2.监听事件，处理响应

会触发readystatechange 事件；在该事件中处理响应

xhr.onreadystatechange = () => {
  if (xhr.readyState !== 4) return;  
  if ((xhr.status >= 200) & (xhr.status < 300) 
  		|| xhr.status === 304) { 
          console.log(xhr.responseText);
        }
};

status属性
200-299成功；
304 Not Modified，文件未过期，能用

readyState

readystatechange 监听 readyState 的状态变化
共 5 个状态
0：未初始化。未调用 open()
1：启动。已调用 open()，但未调用 send()
2：发送。已调用 send()，但未接收到响应
3：接收。接收到部分响应数据
4：完成。接收到全部响应数据，且可在浏览器中使用

3.准备发送请求

向远程/本地
调用 open （）做好发送请求的准备

xhr.open(
  'HTTP 方法GET、POST、PUT、DELETE',
  '地址 URL https://www.imooc.com/api/http/search/suggest?words=js ./index.html ./index.xml ./index.txt',
  true
);

参数true：异步

4.正式发送请求

调用 send()

xhr.send(null);

通过请求体携带的数据
1）open()中使用get请求不会报错，但不会发送数据
GET请求头携带数据

 xhr.open('GET', url, true);
 xhr.send(null);
 xhr.send('sex=male');

2）open()中要使用post请求才会成功发送数据
POST请求头/请求体携带数据

xhr.open('POST', url, true);
xhr.send('username=alex&age=18');

对象会被转换成字符串

xhr.send({
  username: 'alex',
  age: 18
});
//[object Object]

封装Ajax

利用模块系统、类进行封装
用Promise改造
失败的4种方法：分别调用reject()，通过传入参数区分

FormData-用 Ajax 提交表单

直接提交会跳转网页，不希望跳转时可使用Ajax提交表单
思路：登录按钮绑定点击事件，获取用户名、密码的数据值，将其组装成常用格式，使用ajax发送
HTML 表单元素创建 FormData 对象

const fd = new FormData(表单元素);
xhr.send(fd);
append() 方法添加数据
const fd = new FormData(表单元素);
fd.append('age', 18);
fd.append('sex', 'male');
xhr.send(fd);

IE10 及以上可支持

<form
id="login"
action="https://www.imooc.com/api/http/search/suggest?words=js"
method="POST"
enctype="multipart/form-data"
>
<input type="text" name="username" placeholder="用户名" />
<input type="password" name="password" placeholder="密码" />
<input id="submit" type="submit" value="登录" />
</form>
const login = document.getElementById('login');
// console.log(login.username);
// console.log(login.password);
//解构赋值，获取username password 的数据值
const { username, password } = login;
const btn = document.getElementById('submit');
const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
btn.addEventListener(
'click',
e => {
// 阻止表单自动提交
e.preventDefault();
// 表单数据验证
//…
// 发送 Ajax 请求
const xhr = new XMLHttpRequest();
xhr.addEventListener(
'load',
() => {
if (
(xhr.status >= 200 && xhr.status < 300) ||
xhr.status === 304
) {
console.log(xhr.response);
}
},
false
);
xhr.open('POST', url, true);
// 组装数据
// const data = `username=${username.value}&password=${password.value}`;
// FormData 可用于发送表单数据
const data = new FormData(login);
// data.append('age', 18); 
// data.append('sex', 'male');
// console.log(data);
// for (const item of data) {
//   console.log(item);
// }
// xhr.setRequestHeader(
//   'Content-Type',
//   'application/x-www-form-urlencoded'
// );
xhr.send(data);
// xhr.send('username=alex&password=12345');
},
false
);

axios-基于 Promise 的 HTTP 库

<!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
<script src="https://unpkg.com/axios@0.19.2/dist/axios.min.js"></script>
<script>
可以用在浏览器和 node.js 中
第三方 Ajax 库
// http://www.axios-js.com/zh-cn/docs/
用法
// 引入 axios
// console.log(axios);
const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
// axios(url, {
//   method: 'post',
//   // 请求时的头信息
//   headers: {
//     'Content-Type': 'application/x-www-form-urlencoded'
//     // 'Content-Type': 'application/json'
//   },
//   // 通过请求头携带的数据
//   params: {
//     username: 'alex'
//   },
//   // 通过请求体携带的数据
//   // application/json
//   // data: {
//   //   age: 18,
//   //   sex: 'male'
//   // }
//   // application/x-www-form-urlencoded
//   data: 'age=18&sex=male'
//   // timeout: 10
//   // withCredentials: true
// })
//   .then(response => {
//     console.log(response);
//     console.log(response.data.data);
//   })
//   .catch(err => {
//     console.log(err);
//   });
// axios
//   .get(url, {
//     params: {
//       username: 'alex'
//     }
//   })
//   .then(response => {
//     console.log(response);
//   });
// axios
//   .post(url, 'username=alex&age=18')
//   .then(response => {
//     console.log(response);
//   })
//   .catch(err => {
//     console.log(err);
//   });
axios
.post('https://www.imooc.com/api/http/json/search/suggest?words=js', {
username: 'alex'
})
.then(response => {
console.log(response);
})
.catch(err => {
console.log(err);
});
// axios.put()
// axios.delete()

应用-完成前后端通信

功能：在不重新加载整个页面的情况下，对页面的某部分进行更新
① 慕课网注册检测-手机号是否已存在
② 慕课网搜索提示-输入关键字从后端传来提示词条

const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
  if (xhr.readyState !== 4) return;
  if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
    console.log(xhr.responseText);
    console.log(typeof xhr.responseText);
  }
};
xhr.open('GET', url, true);
xhr.send(null);

数据交换格式

XML

Extensible Markup Language可扩展标记语言
已渐渐被JSON取代

JSON

JavaScript Object Notation ,JS 对象简谱
是前后端数据的中转格式
JS->JSON->PHP/Java
PHP/Java->JSON->JS

const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
  if (xhr.readyState != 4) return;
  if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
          console.log(xhr.responseText);
        }
      };
xhr.open('GET', url, true);
xhr.send(null);
//输出JSON格式
//{"code":200,"data":[{"word":"jsp"},{"word":"js"},{"word":"json"},{"word":"js \u5165\u95e8"},{"word":"jstl"}]}

3 种形式

3 种形式和 JS 中的数据类型很像

简单值形式-对应 JS 的基础数据类型

.json文件
① JSON中无有 undefined 值
② JSON中的字符串必须使用双引号
③ JSON不能注释

对象形式-对应 JS 的对象

属性名必须用双引号
属性值若是字符串也必须用双引号
不支持 undefined

{
  "name": "张三",
  "age": 18,
  "hobby": ["足球", "乒乓球"],
  "family": {
    "father": "张老大",
    "mother": "李四"
  }
}
数组形式-对应 JS 的数组

数组中的字符串必须用双引号
不支持 undefined

[1, "hi", null]
[
  {
    "id": 1,
    "username": "张三",
    "comment": "666"
  },
  {
    "id": 2,
    "username": "李四",
    "comment": "999 6翻了"
  }
]

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState != 4) return;
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
console.log(xhr.responseText);
console.log(typeof xhr.responseText);
}
};
// xhr.open('GET', './plain.json', true);
// xhr.open('GET', './obj.json', true);
xhr.open('GET', './arr.json', true);
xhr.send(null);

方法

JSON.parse()-解析字符串-JSON到JS

将 JSON 格式的字符串解析成 JS 中的对应值
得是合法的 JSON 字符串，否则会报错

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
   if (xhr.readyState != 4) return;
   if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
          console.log(xhr.responseText);
          console.log(typeof xhr.responseText);
          console.log(JSON.parse(xhr.responseText));
          // console.log(JSON.parse(xhr.responseText).data);
      }
};
// xhr.open('GET', './plain.json', true);
// xhr.open('GET', './obj.json', true);
xhr.open('GET', './arr.json', true);
// xhr.open(
//   'GET',
//   'https://www.imooc.com/api/http/search/suggest?words=js',
//   true
// );
xhr.send(null);
JSON.stringify()-解析基本数据类型、对象、数组-JS到JSON

将 JS 的基本数据类型、对象或数组转换成 JSON 格式的字符串

console.log(
  JSON.stringify({
    username: 'alex',
    age: 18
  })
);
const xhr = new XMLHttpRequest();
xhr.open(
  'POST',
  'https://www.imooc.com/api/http/search/suggest?words=js',
  true
);
xhr.send(
  JSON.stringify({
    username: 'alex',
    age: 18
  })
);

应用-封装 localStorage

import { get, set, remove, clear } from './storage.js';
set('username', 'alex');
console.log(get('username'));
set('zs', {
  name: '张三',
  age: 18
});
console.log(get('zs'));
remove('username');
clear();

Fetch

是 Ajax（XMLHttpRequest）的一种替代方案
是基于 Promise 的
未提供abort timeout等方式
调用后返回 Promise 对象

用法

console.log(fetch);
console.log(ajax);
const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
// body: (...)
// bodyUsed: false
// ok: true
// status: 200
// statusText: "OK"
// type: "cors"
// url: "https://www.im

第二个参数是对象，用来配置 fetch

const fd = new FormData();
fd.append('username', 'alex');
fetch(url, {
method: 'post',
// body: null
// body: 'username=alex&age=18',
// body: JSON.stringify({ username: 'alex' })
body: fd,
// headers: {
//   // 'Content-Type': 'application/x-www-form-urlencoded'
//   'Content-Type': 'application/json'
// }
mode: 'cors'
// credentials:'include'
})
.then(response => {
console.log(response);
// body/bodyUsed
// body 只能读一次，读过之后就不让再读了
// ok
// 如果为 true，表示可以读取数据，不用再去判断 HTTP 状态码了
if (response.ok) {
// console.log(response.json());
return response.json();
// return response.text();
} else {
throw new Error(`HTTP CODE 异常 ${response.status}`);
}
})
.then(data => {
console.log(data);
})
.catch(err => {
console.log(err);
});

附加：XMLHttpRequest

是一组API函数集，可被JavaScript、JScript、VBScript以及其它web浏览器内嵌的脚本语言调用
通过HTTP在浏览器和web服务器之间收发XML或其它数据。
可以动态地更新网页，它无需重新从服务器读取整个网页，也不需要安装额外的插件
除XML之外，XMLHTTP还能用于获取其它格式的数据，如JSON或者甚至纯文本

属性

responseType

响应类型：空/text/json
默认值：空/text
与 responseText关系
1）若未设置responseType，或值为 ‘空/text’
则与 responseText属性作用同
2）若responseType = ‘JSON’
responseText无法使用

responseText

响应数据的文本格式

response

响应数据

const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
 if (xhr.readyState != 4) return;
 if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
     // console.log('responseText:', xhr.responseText);
     console.log('response:', xhr.response);
     // console.log(JSON.parse(xhr.responseText));
     }
};
xhr.open('GET', url, true);
// xhr.responseType = '';
// xhr.responseType = 'text';
xhr.responseType = 'json';
xhr.send(null);

IE6~9 不支持，IE10 开始支持

timeout

请求的超时时间（单位 ms）
配合timeout事件


const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
  if (xhr.readyState != 4) return;
  if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
    console.log(xhr.response);
  }
};
xhr.open('GET', url, true);
xhr.timeout = 10000;
xhr.send(null);

IE6~7 不支持，IE8 开始支持

withCredentials

指定是否携带 Cookie
同域时，默认携带 Cookie；
跨域时，不携带 Cookie，想携带需设置xhr.withCredentials = true;
跨域携带 Cookie能否成功，还需看服务器安全策略是否拦截
和后端沟通，设置指定域名的跨域请求，例如Access-Control-Allow-Origin:

http://127.0.0.1:5500
 const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
 // const url = './index.html';
 const xhr = new XMLHttpRequest();
 xhr.onreadystatechange = () => {
   if (xhr.readyState != 4) return;
   if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
          console.log(xhr.response);
        }
 };
 xhr.open('GET', url, true);
 xhr.withCredentials = true;
 xhr.send(null);

IE6~9 不支持，IE10 开始支持

方法

abort()

终止当前请求
配合 abort 事件一起使用
发送完请求后调用

 const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
 const xhr = new XMLHttpRequest();
 xhr.onreadystatechange = () => {
   if (xhr.readyState != 4) return;
   if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
          console.log(xhr.response);
        }
  };
  xhr.open('GET', url, true);
  xhr.send(null);
  xhr.abort();

setRequestHeader()

设置请求头信息
Content-Type 字段-告诉服务器，浏览器发送的数据是什么格式的

 // const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
const url = 'https://www.imooc.com/api/http/json/search/suggest?words=js';
 const xhr = new XMLHttpRequest();
 xhr.onreadystatechange = () => {
   if (xhr.readyState != 4) return;
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
    console.log(xhr.response);
  }
};
xhr.open('POST', url, true);
// xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('Content-Type', 'application/json');
// xhr.send(null);
// xhr.send('username=alex&age=18');
xhr.send(
  JSON.stringify({
    username: 'alex'
  })
);

事件

load -响应数据可用时触发

const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
const xhr = new XMLHttpRequest();
// xhr.onload = () => {
//   if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
//     console.log(xhr.response);
//   }
// };
xhr.addEventListener(
'load',
() => {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
console.log(xhr.response);
}
},
false
);
xhr.open('GET', url, true);
xhr.send(null);

IE6~8 不支持 load 事件

error -请求发生错误时触发

const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
const url = 'https://www.iimooc.com/api/http/search/suggest?words=js';
const xhr = new XMLHttpRequest();
xhr.addEventListener(
'load',
() => {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
console.log(xhr.response);
}
},
false
);
xhr.addEventListener(
'error',
() => {
console.log('error');
},
false
);
xhr.open('GET', url, true);
xhr.send(null);

IE10 开始支持

abort -终止请求时触发

const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
const xhr = new XMLHttpRequest();
xhr.addEventListener(
'load',
() => {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
console.log(xhr.response);
}
},
false
);
xhr.addEventListener(
'abort',
() => {
console.log('abort');
},
false
);
xhr.open('GET', url, true);
xhr.send(null);
xhr.abort();

IE10 开始支持

timeout -请求超时后触发

const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
const xhr = new XMLHttpRequest();
xhr.addEventListener(
'load',
() => {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
console.log(xhr.response);
}
},
false
);
xhr.addEventListener(
'timeout',
() => {
console.log('timeout');
},
false
);
xhr.open('GET', url, true);
xhr.timeout = 10;
xhr.send(null);

// IE8 开始支持

chonger_feifei
关注
专栏目录
python 数据处理 及 前后端通信demo
12-05
本示例主要探讨了Python如何进行数据处理以及如何实现前后端通信，结合了Python的Tornado框架来构建高效的网络应用。 首先，Python的数据处理涉及到多个库，如Pandas、NumPy和Matplotlib等。Pandas是Python中最常用...
fetch前后端通信
最新发布
betterangela的博客
10-04 164
fetch前后端通信
如何使 fetch() 请求超时
allway2的博客
02-17 5422
在开发使用网络的应用程序时，要记住的第一条规则是不要依赖网络。 网络不可靠，因为 HTTP 请求或响应可能由于多种原因而失败： 用户离线 DNS 查询失败 服务器没有响应 服务器响应但出现错误 和更多。 用户可以等待最多 8 秒来完成简单的请求。这就是为什么您需要对网络请求设置超时并在 8 秒后通知用户网络问题。 我将向您展示如何使用setTimeout()、中止控制器和fetch()API 来发出具有可配置超时时间的请求（包括有趣的演示！）。 1. 默认 fetch() 超时 默认情况.
前后端交互--fetch
yzy2736的博客
04-18 439
什么是fetch？ fetch是可以和后端实现交互的一个浏览器自带的 API。（发网络请求和后台进行交互的） fetch这个api是Promise的调用方式（方法调用返回值就是一个Promise对象） 需要注意的是fetch并不是ajax的进一步封装，他是原生的js。 为什么要用fetch？ 为了和后端实现交互，不刷新页面的情况可以获取服务器的资源。 注意： fetch 这个 api出来的比较晚，只有版本比较高的浏览器才可以使用。低版本浏览器（一般就是说的IE678）是没有这个fetch这个api。 一、基
AJAX网络请求 —— Fetch 现代的网络请求方法（一）
秋天，黄叶坠地，凉风有信。
03-15 2997
Fetch JavaScript 可以将网络请求发送到服务器，并在需要时加载新信息。 例如，我们可以使用网络请求来： 提交订单， 加载用户信息， 从服务器接收最新的更新， ……等。 ……所有这些都没有重新加载页面！ 对于来自 JavaScript 的网络请求，有一个总称术语 “AJAX”（Asynchronous JavaScript And XML 的简称）。但是，我们不必使用 XML：这个术语诞生于很久以前，所以这个词一直在那儿。 有很多方式可以向服务器发送网络请求，并从服务器获取信息。 fetch
fetch详细讲解
@必意玲
07-28 5259
使用 fetch 可以方便地向服务器发送请求，并将响应返回给客户端。你可以使用 fetch 获取文本、JSON、图像和文件等数据，并进行各种处理。fetch 还支持流式传输和取消请求等高级功能，使得处理大型数据集和长时间运行的操作变得更加简单和可靠。fetch API 也是 Javascript 中常用的 API 之一，它提供了一组方法和属性，可以在浏览器端与服务器进行通信。通过 fetch API，你可以轻松地使用 fetch 协议进行数据传输，并对请求和响应进行操作和处理。
sm234+springboot 前后端分离.zip
06-24
在这种架构下，前端通常使用React、Vue.js或Angular等库或框架，通过Ajax或Fetch API与后端API进行通信。这有利于提升开发效率，降低维护成本，并且可以为不同的设备提供更好的用户体验。 压缩包内的"sm最终版"可能...
前后端框架，前端后端数据处理
03-12
"前后端框架，前端后端数据处理"这一主题涵盖了多个关键知识点，包括前端框架的选择、后端框架的运用以及如何在两者之间有效地进行数据通信。 前端框架主要是用于构建用户界面，它简化了HTML、CSS和JavaScript的...
vue后台管理前后端代码.zip
07-07
3. 前后端通信：理解 AJAX 或 Fetch API，用于前端向后端发送请求获取数据。 4. RESTful API 设计：后端接口应遵循 RESTful 规范，确保接口清晰、易用。 5. 数据库设计：学习如何设计数据库表结构，以及编写 SQL ...
java + vue 的前后端分离的考试系统.zip
11-16
前端利用axios或fetch等库发送AJAX请求，实现无刷新的页面更新。 **安全与认证** 为了保护用户数据和系统安全，该考试系统可能采用了JWT（JSON Web Tokens）进行身份验证。用户登录后，服务器会返回一个JWT，前端将...
前后端实现通信的方式
Shirley_Song_1的博客
04-19 6183
前后端实现通信的方式，AJAX，XMLHttpRequest，Fetch Api，EventSource，WebSocket
重学fetch
qq1195566313的博客
05-29 3010
Fetch是一种网络通信协议，用于在客户端和服务器之间传输数据。该协议使用HTTP请求和响应进行通信，与传统的AJAX方式相比，Fetch更加简单易用，并提供了许多现代化的功能。使用Fetch可以方便地向服务器发送请求，并将响应返回给客户端。你可以使用Fetch获取文本、JSON、图像和文件等数据，并进行各种处理。Fetch还支持流式传输和取消请求等高级功能，使得处理大型数据集和长时间运行的操作变得更加简单和可靠。
前端发送Ajax请求数据的几种常见方法(三) fetch方法发送
YoungMan_09的博客
12-26 395
fetch方法发送Ajax请求
Ajax--使用fetch函数发送AJAX请求
天行健 君子以自强不息，地势坤 君子以厚德载物。
07-27 402
1.使用fetch函数发送AJAX请求 参考文档: 1.1 请求前的准备 1.1.1 HTML页面 ajaxDemo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt
AJAX发送网络请求-封装AJAX-Fetch发送网络请求
m0_71485750的博客
07-11 518
AJAX 是异步的 JavaScript 和 XML（Asynchronous JavaScript And XML）如何来完成AJAX请求呢？第一步：创建网络请求的AJAX对象（使用XMLHttpRequest）第二步：监听XMLHttpRequest对象状态的变化，或者监听onload事件（请求完成时触发）；第三步：配置网络请求（通过open方法）, open方法可以传入两个参数；参数一: method(请求的方式: get, post …)参数二: url(请求的地址)第四步：发送send网络请求；【
fetch发起ajax请求
zgh472365411的博客
09-06 395
fetch发送Ajax请求
AJAX网络请求 —— Fetch：发送跨域请求（三）
秋天，黄叶坠地，凉风有信。
03-17 5472
文章目录Fetch：跨源请求为什么需要 CORS？跨源请求简史)使用表单使用 script简单的请求用于简单请求的 CORSResponse header“非简单”请求Step 1 预检请求（preflight request）Step 2 预检响应（preflight response）Step 3 实际请求（actual request）Step 4 实际响应（actual response）凭据（Credentials）总结 Fetch：跨源请求 如果我们向另一个网站发送 fetch 请求，则该请求可
Ajax
qq_45178972的博客
04-03 114
1.XMLHttpRequest是一个构造函数 2.ajax的使用步骤 2.1创建xhr对象 const xhr = new XMLHttpRequest(); 2.2 准备发送请求 xhr.open(‘Http 方法 GET、POST、PUT、DELETE’, ‘远程地址 URL 或者本地文件./index.html ./index.xml ./index.txt’, true是否异步); 调用open并不会真正发送请求，而只是做好发送请求前的准备工作 2.3 发送请求 调用send()的参数是通过请求
Ajax 前后端数据交互
qq_44706666的博客
05-19 196
当readyState===4的时候，我们就可以正常使用服务端的数据了。再配合http状态码为200~299。创建一个ajax的对象。创建一个ajax对象。+ 用一个数字来描述本次请求的状态。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值