JS中的原生Ajax实现同步和异步

最新推荐文章于 2023-03-28 08:36:13 发布
最新推荐文章于 2023-03-28 08:36:13 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： 前端学习 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42490441/article/details/110181687
版权

1、Ajax概述

异步访问：客户端发送请求到服务器，无论服务器是否返回响应，客户端都可以随意进行其他操作，不会被卡死。

Ajax运行原理：页面发出请求，会将请求发送给浏览器中内置的Ajax引擎，Ajax引擎会提交请求到服务器端，等待服务器响应期间，用户可以进行其他操作，直到服务器端将数据返回给Ajax引擎后，会出发设置的事件，执行自定义js的逻辑代码完成某种功能。

2、使用js原生Ajax的步骤

创建Ajax引擎对象
为Ajax引擎对象绑定监听
绑定提交地址
发送请求
接受相应数据

Insert title here


`
梁子、不闹
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JavaScrpit中异步请求Ajax实现方法
11-27
所以接下来便用原生JavaScrpit实现一个简单的Ajax请求，并说明ajax请求中的跨域访问问题，以及多个ajax请求的数据同步问题。 JavaScript实现Ajax异步请求 简单的ajax请求实现 Ajax请求的原理是创建一个...
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
12-09
前言：ajax的神奇之处在于JavaScript 可在不重载页面的情况...1、原生ajax （1）html前端代码get请求方式创建一个ajax实例xhr open()方法传入三个参数，第一个是请求方式（一般为get和post），第二个参数是请求地址，第
JavaScript实现同步Ajax请求的两种方式
milugloomy的博客
09-08 6336
JavaScript的Ajax请求默认是异步的，有以下两种方式能让Ajax请求变成同步 方式一 使用ES7的Async和Await async function main(){ const env = await queryEnv('141001') console.log(env) } async function queryEnv (platform) { const result = await axios({ url: '/chronic/userPlatformConfig/
原生Ajax请求流程：同步请求、异步请求
m0_51258512的博客
02-16 2406
Ajax 异步无刷新技术 原生Ajax的实现流程 得到XMLHttpRequest对象 - var xhr = new XMLHttpRequest(); 打开请求 - xhr.open(method,url,async); - method:请求方式，通常是GET|POST - url：请求地址 - async：是否异步。如果是true，表示异步，false表示同步 发送请求 - xhr.send(params); - params:请求时需要传递的参数 - 如果是GET请求，设置null(GET请.
ajax 原生js操作ajax
热门推荐
fagdg的博客
07-25 1万+
1.不需要插件支持（一般浏览器且默认开启JavaScript即可）；2.用户体验极佳（不刷新页面即可获取可更新的数据）；3.提升Web程序的性能（在传递数据方面做到按需放松，不必整体提交）；4.减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）；...
原生Ajax
m0_61843988的博客
08-21 1691
Ajax = Async JavaScript And XML (异步的JavaScript和XML)。就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去;就相当于是当客户端发送请求给服务端，在等待服务端响应的请求时，客户端不做其他的事情。当服务端做完了才返回到客户端。这样的话客户端需要一直等待。用户使用起来会有不友好。是指进程不需要一直等下去。而是继续执行下面的操作，不管其他过程的状态。
【Ajax】原生 Ajax 的使用
Superman_H的博客
10-29 361
# 基本使用 ## 使用 express 部署服务端 1. 安装 node（官网下载，无脑安装即可） 2. 安装 express：`npm i express` 3. 编写代码，部署服务器： ```js // 1. 引入 express 模块 const express = require('express'); // 2. 创建应用对象 let app = express(); // 3. 创建路由规则 app.get('/', (request, response) => {
原生JavaScript实现Ajax异步请求
01-19
所以接下来便用原生JavaScrpit实现一个简单的Ajax请求，并说明ajax请求中的跨域访问问题，以及多个ajax请求的数据同步问题。 JavaScript实现Ajax异步请求 简单的ajax请求实现 Ajax请求的原理是创建一个...
原生js jquery ajax请求以及jsonp的调用方法
12-12
XMLHttpRequest，异步访问服务器并发送请求数据，服务器返回响应的数据，以页面无刷新的效果改变页面中的局部内容 同步：任务一个一个的执行，只有前面的任务执行完才会执行下一个任务，如果前面的任务是耗时操作，...
Jquery揭秘系列:ajax原生js实现详解(推荐)
01-19
可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。XMLHTTPRequest基本上算是标准化了，兼容大部分浏览器ActiveXObject这玩儿意儿是微软的东西，所以是为了兼容IE版本，我们用的...
ajax的同步异步请求
zhengjiesuaige的博客
03-28 1056
异步请求：ajax发送请求后，JavaScript 无需等待服务器的响应，继续执行接下来的代码，等到响应成功以后，执行响应的结果。
原生JavaScript实现Ajax（二）：同步，异步，GET，POST
郭宇的博客
05-31 7493
ajax 同步，异步，GET，POST
原生JavaScript封装Ajax同步异步封装
weixin_44903107的博客
06-06 548
// 封装ajax函数 // @param {string}opt.type http连接的方式，包括POST和GET两种方式 // @param {string}opt.url 发送请求的url // @param {boolean}opt.async 是否为异步请求，true为异步的，false为同步的 // @param {object}opt.data 发送的参数，格式为对象类型 // @param {function}opt.success ajax发送并接收成功调用的回调函数 funct
将AJAX转换为同步，原来这么简单
weixin_44416517的博客
01-29 3269
csdn很少上线，经常在掘金摸鱼，本文掘金链接https://juejin.cn/post/7058602557987356708 言归正传： 如果我想将ajax封装在一个具名函数中，然后用这个具名函数返回ajax获得的数据，能直接成功吗？ 答案是不可以的，因为在js中ajax默认是异步的，而具名函数是同步的，先于ajax执行，所以无法获得ajax获得的数据，最终的结果就是undefined。 需求： 随机生成一个10位数的整数，与后端数据库做对比，如果后端数据库中有这个随机数，则重新再生成一个，如果没有就
原生js实现ajax异步加载
包子源的博客
05-22 2492
原生js异步加载 window.onload = ajax(); function ajax() { var xmlhttp; if(window.XMLHttpRequest){ //创建 XMLHttpRequest 对象 xmlhttp = new XMLHttpRequest();
原生js实现ajax方法(超简单)
f656e5的博客
05-18 2788
上一篇文章写到原生js取代jquery的一些常用函数：原生js仿jquery一些常用方法，那么，ajax如何实现呢？如下是一个比较完整的ajax()?12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849function ajax(){   var ajaxData = { ...
javascript Ajax 同步请求与异步请求的问题
weixin_30383279的博客
04-14 191
先来看以下代码： var flag=true; var index=0; $.ajax({ url: "http://www.baidu.com/", success: function(data){ flag=false; } }); while(flag){ index++; } alert(index); 请问最后alert的index的结...
原生js实现Ajax
jingtian678的博客
07-23 259
一般来说，大家可能都会习惯用JQuery提供的Ajax方法，但是用原生的js怎么去实现Ajax方法呢？     JQuery提供的Ajax方法： $.ajax({ url: , type: '', dataType: '', data: { }, success: function(){
原生js封装ajax
shenmill的博客
06-08 3485
前两天闲着没事爬了下校园网的信息，实现了模拟登陆然后获取课表，考勤表，空教室的信息等，想着顺便结合前端也都实现一下。以前在请求接口数据时基本都利用了jquery ajax，方便嘛，这次我将原生拿出来溜溜，还是要知道原理的好。
用js代码实现原生ajax请求
最新发布
08-15
原生ajax请求可以通过JavaScript代码来实现。以下是一个简单的示例： ```javascript // 创建一个XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 设置请求的方法和URL xhr.open('GET', '...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值