没有合适的资源？快使用搜索试试~ 我知道了~

文库首页前端Javascript（免费）菜狗学前端之原生Ajax笔记

（免费）菜狗学前端之原生Ajax笔记

ajax

需积分: 0 0 下载量 168 浏览量 2024-04-14 21:03:20 上传评论收藏 877KB PDF 举报

温馨提示

试读

15页

关于原生Ajax知识：包含原生ajax的get/post传参方式、返回数据等

资源推荐

资源详情

资源评论

原

⽣

Ajax

⼀



原

⽣

ajax

经

典

四

步



(

⼀

)

原

⽣

ajax

经

典

四

步



第

⼀

步

：

创

建

⽹络

请

求

的

AJAX

对

象

（

使

⽤

XMLHttpRequest

）



let xhr = new XMLHttpRequest()

第

⼆

步

：

监

听

对

象

状

态

的

变

化

监

听

XMLHttpRequest

对

象

状

态

的

变

化



xhr.onreadystatechange = function () {

if (xhr.readyState == 4) {

console.log(xhr.response);

}

或

者

监

听

onload

事

件

（

请

求

完

成

时

触

发

）



等

价

于下

⾯

这

么

写

xhr.onload = () => {

console.log(xhr.response);

}

第

三

步

：

配

置⽹络

请

求

（

通过

open

⽅

法

）



xhr.open("get", "http://127.0.0.1:3001/getData")

第

四

步

：

发

送

send

⽹络

请

求



send()

参

数

写

的

是

请

求

体



只

有

post

请

求

⽅

式

才

有

请

求

体



就

是

给

后

端

传

递

数

据

xhr.send()

(

⼆

)

原

⽣

ajax

请

求

前

后

端

代

码

⽰

例



1.package.json

⽤

到

的

依

赖



{

"name": "code",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

"keywords": [],

"dependencies": {

"@koa/router": "^12.0.0",

"axios": "^0.27.2",

"body-parser": "^1.19.0",

"cookie-parser": "^1.4.5",

"express": "^4.17.1",

"express-session": "^1.17.2",

"koa": "^2.13.4",

"koa-body": "^5.0.0",

"koa-bodyparser": "^4.4.0",

"koa-logger": "^3.2.1",

"koa-static": "^5.0.0",

"koa2-cors": "^2.0.6",

"moment": "^2.30.1",

"mongodb": "^4.4.0",

"nprogress": "^0.2.0",

"qs": "^6.10.2"

"author": "",

"license": "ISC"

}

前

端

代

码

：

发

送

ajax

请

求



第

⼀

步

：

创

建

⽹络

请

求

的

AJAX

对

象

（

使

⽤

XMLHttpRequest

）

let xhr = new XMLHttpRequest()

第

⼆

步

：

监

听

XMLHttpRequest

对

象

状

态

的

变

化

，

或

者

监

听

onload

事

件

（

请

求

完

成

时

触

发

）

⽅

式

⼀

onreadystatechange

xhr.onreadystatechange = function () {

if (xhr.readyState == 4) {

console.log(xhr.response);

}

⽅

式

⼆

onload

// xhr.onload = () => {

// console.log(xhr.response);

// }

第

三

步

：

配

置⽹络

请

求

（

通过

open

⽅

法

）

xhr.open("get", "http://127.0.0.1:3001/getData")

第

四

步

：

发

送

send

⽹络

请

求

xhr.send()

</script>

后

端

代

码

：

监

听

到

后

接

收

请

求

并

响

应



const Koa = require("koa");

const cors = require("koa2-cors");

const logger = require("koa-logger");

const Router = require("@koa/router");

路

由

const koaBody = require("koa-body");

const app = new Koa();

剩余14页未读，继续阅读

评论收藏

内容反馈

资源评论

资源反馈

评论星级较低，若资源使用遇到问题可联系上传者，3个工作日内问题未解决可申请退款~

佛系菜狗

粉丝: 137
资源: 8

上传资源快速赚钱

我的内容管理展开

我的资源快来上传第一个资源

我的收益

登录查看自己的收益

我的积分登录查看自己的积分

我的C币登录后查看C币余额

我的收藏

我的下载

下载帮助

前往需求广场，查看用户热搜

（免费）菜狗学前端之原生Ajax笔记

原生ajax使用

原生ajax模拟判断用户名是否已注册

纯js封装原生ajax

原生ajax库实现jsonp跨域短小精悍

JavaScript原生Ajax笔记.doc

原生ajax代码实现异步提交

原生ajax传值

Js原生ajax与跨域(代理)上传文件

ajax原生方法实现导出excel

云原生学习笔记之敏捷基础设施.pdf

JavaScript案例-原生ajax

原生JS实现ajax与ajax的跨域请求实例

Ajax和jQuery学习笔记

ajax+servlet原生实现智能提示框

原生AJAX发送请求2.png

原生js+ajax通用函数+php

原生javascript实现ajax 发送post请求

JavaScript案例-原生ajax查询所有用户

echarts 全国地图json数据

axure谷歌浏览器插件

element-ui v2.15.13离线文档.rar

marktext0.17.1中文版本-【免费资源未商用不存在版权问题】-【请审核大大放过】.zip

html网页做的动态爱心（超好看）

微信小程序登录注册界面代码，包含当前界面的所有源码，使用手机验证码注册或账号登录

2023跨年代码(烟花+背景音乐)

HTML新年代码之2024新年快乐龙年大吉免费下载 happynewyear2024.zip

个人网页制作 大学生个人网页设计 个人网站模板 简单静态HTML个人网页作品 个人博客

13款echarts可视化大屏源码+效果图，适用于多个行业可视化大屏，免费下载

基于SpringBoot+Vue的学生选课管理系统的毕业设计，Vue+SpringBoot+MybatisPlus+MySQL

最新资源

个人网页制作大学生个人网页设计个人网站模板简单静态HTML个人网页作品个人博客