原生js编写异步请求

于 2023-02-05 16:35:55 发布
阅读量234 收藏
点赞数
文章标签： javascript 前端 json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45672607/article/details/128891536
版权

原生js编写异步请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="javascript:;">
    <input type="text" class="mobile" name="username"> <br>
    <input type="text" class="password" name="password"> <br>
    <button class="login">登陆</button>
</form>
<script>
  window.onload = function (){
      // 封装选择器
      var $ = name => document.querySelector(name);
      $(".login").onclick = function (){
          let _mobile = $(".mobile").value,
              _password = $(".password").value;
          sendData(_mobile,_password)
      }

      function sendData(mobile,password) {
          let xmlhttp = new XMLHttpRequest();
          xmlhttp.open("post","http://localhost:8080/login") // 异步
          xmlhttp.setRequestHeader("Content-Type","application/json") // 请求头
          xmlhttp.send(JSON.stringify({
              mobile,
              password
          }))
          xmlhttp.onreadystatechange = function (){
              if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
                  alert(xmlhttp.responseText);
              }
          }
      }
  }
</script>
</body>
</html>
^_^NeverStop
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
原生JS发送异步数据请求
12-11
在做项目的时候，有时候需要用到异步数据请求，但是如果这个时候没有框架的依赖，就需要用到原生JS进行异步数据请求。这时候无非有两种请求方式，一种是AJAX，另一个是JSONP。通过原生JS对异步请求进行简单的封装。 AJAX 　　AJAX是一种数据请求方式，不需要刷新整个页面就能够更新局部页面的数据。AJAX的技术核心是XMLHttpRequest对象，主要请求过程如下： 创建XMLHttpRequest对象(new) 连接服务器(open) 发送请求(send) 接收响应数据(onreadystatechange) 　　不说话直接贴代码 /** * 通过JSON的方式请求 *
原生的js实现异步请求
weixin_42223701的博客
11-13 1559
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{ String pathInfo = req.getPathInfo(); req.setCharacterEncoding("utf-8"); resp.setContentType("text/html;charset=utf-8"); super.print(resp
JS原生异步请求
SYQ15544423296的博客
08-27 548
js原生异步请求
原生js--异步请求
weixin_33816821的博客
02-26 112
1、异步请求的方法： 　　iframe、script、XMLHttpRequest、comet（服务器端发起） 2、XMLHttpRequest 　　request = new XMLHttpRequest(); 　　open( "GET", url ); 　　　　两个必须的参数。 　　　　“GET” “POST”等，不区分大小写，但通常用大写字母来匹配HTTP协议 　　　　想要缓存...
02.原生JS实现异步请求
天天向上
07-16 1188
1. 原生JS实现异步请求 描述：原生JS的AJAX开发，通过XMLHttpRequest对象来完成异步发送请求和接受响应 步骤： 第一步：获取XMLHttpRequest对象 第二步：和服务器进行连接 第三步：发送请求数据 第四步：接受服务器响应 第五步：获取响应数据 ```java 第一步：获取XMLHttpRequest对象 # 兼容大多数浏览器 var xhr = new XMLHttpRequest(); # 兼容IE6浏览器 var xhr = new Ac
原生JavaScrpit中异步请求Ajax实现方法
08-28
在原生JavaScript中，异步请求通常通过Ajax技术来实现，它允许我们在不重新加载整个网页的情况下与服务器交换数据并更新部分网页内容。Ajax（Asynchronous JavaScript and XML）虽然最初设计用于处理XML数据，但现在...
原生JavaScript实现异步多文件上传
10-23
最后，我们需要编写`uploadFile`函数，将选中的文件封装到FormData对象中并发送请求： ```javascript function uploadFile() { var picFileList = $("#pic").get(0).files; var formData = new FormData(); for ...
原生js编写autoComplete插件
10-22
【原生JS编写autoComplete插件详解】 在前端开发中，常常会遇到需要实现自动完成功能的场景，比如在输入框中输入关键词时，自动显示与之匹配的下拉选项。这种功能可以极大地提高用户体验，减少用户输入的负担。本篇...
仿华为官网纯原生JS+Css编写，无jquery
07-30
原生JS的使用意味着开发者需要手动处理DOM操作、事件监听、异步请求等任务，这要求对JavaScript的掌握深入到DOM API、BOM（浏览器对象模型）以及Promise或Async/Await的理解。同时，纯CSS的运用则涵盖了选择器、盒...
使用原生js写ajax实例(推荐)
10-19
在本文中，我们将深入探讨如何使用原生JavaScript编写AJAX（Asynchronous JavaScript and XML）实例。AJAX是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。以下是一个使用原生JS封装的AJAX...
原生JavaScript实现Ajax异步请求
01-19
在前端页面开发的过程中，经常使用到Ajax请求，异步提交表单数据，或者异步刷新页面。 一般来说，使用Jquery中的$.ajax，$.post，$.getJSON，非常方便，但是有的时候，我们只需要ajax功能，这样引入Jquery比较不划算。 所以接下来便用原生JavaScrpit实现一个简单的Ajax请求，并说明ajax请求中的跨域访问问题，以及多个ajax请求的数据同步问题。 JavaScript实现Ajax异步请求 简单的ajax请求实现 Ajax请求的原理是创建一个XMLHttpRequest对象，使用这个对象来进行异步发送请求，具体实现参考下面代码： function ajax(
JS_js原生异步请求
小歪博客
07-09 198
var xhr = new XMLHttpRequest(); xhr.open('get','请求地址') xhr.setRequestHeader('Content-Type','application/json'); //设置请求头 xhr.responseType="json"; //设置数据类型 xhr.onload = () =>{ if(xhr.status == 200 ){ console.log(xhr.response); } } xhr.se
js原生的异步请求的用法
sinat_38852244的博客
01-25 620
var xmlhttp; function loadXMLDoc(url) { xmlhttp=null; //判断是否支持XMLHttpRequest,IE6,IE7支持ActiveXObject对象 if (window.XMLHttpRequest) {// code for all new browsers xmlhttp=new XMLHttpRequest(); } else if (...
Ajax练习二（原生JS异步请求）
LmingAn的博客
09-17 2776
JS异步请求　　这里我使用的编译器是WebStorm（不管用哪个编译器我们的最终结果都是一样的就是要请求后台的数据，随后将后台返回的结果展示在界面中），后台的配置请参考Ajax练习一（配置Java后台）。 　　这里用可能会遇到跨域的问题。解决方式只需要在后台设置即可。因为我后台用的是SpringMvc，所以只需要在Controller中加上@CrossOrigin注解即可！
js原生 Ajax 简易异步请求
aj951225的博客
05-01 351
一、js原生请求过程 //兼容浏览器 var XML= null; // 根据浏览器的不同情况进行创建 if(window.XMLHttpRequest){ // 表示除IE外的其他浏览器 XML= new XMLHttpRequest(); }else{ // 表示IE浏览器 XML= new ActiveXObject('Microsoft.XMLHttp'); } var aj
原生js--ajax异步请求
炒饭的博客
08-16 168
function request(methodName, params){ // console.log('methodName--params=='+methodName+&quot;--&quot;+JSON.stringify(params)); var xmlHttp; function GetXmlHttpObject(){ if (window.XMLHttpReq...
原生JavaScript/js实现ajax异步数据处理
qq_32869419的博客
04-21 1810
一、ajax介绍Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。[百度百科]简单的讲，ajax就是一种不需要刷新就可以实现一些交互操作的技术，例如常见的登录，密码如果错误，会有红色字提示密码错误，...
原生JS发送ajax请求
BB_____的博客
09-25 5373
开门见山，直入主题。 既然要发送ajax请求，那ajax是什么呢？ AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。 通俗点来说就是可以让你在不刷新（重载）网页的情况下和你的后台交换数据，从而更新你的网页。 大多数开发者都是使用jQuery框架中封装好的方法 $.ajax 来发送异
javascript异步请求的几种方式示例
CYS_zxcvbnm的博客
08-15 949
javascript异步请求的几种方式示例 整理JS的最后一天，主要写一点ajax和fetch。记得最开始了解ajax的时候，一些文章都是结合项目来说的，一大坨，对于小白来说理解需要时间。这里仅描述核心功能，最大程度精简代码。这里用到的数据为疫情数据。 首先说为什么使用ajax 在不重新加载页面的情况下更新网页 在页面已加载后从服务器请求数据 在页面已加载后从服务器接收数据 在后台向服务器发送数据 （忘了在哪抄的了） 1.XMLHttpRequest ajax基于XMLHttpRequest实现，下
ajax异步请求python
最新发布
09-15
对于使用Ajax进行异步请求并与Python后端交互，您可以按照以下步骤进行操作： 1. 在前端页面中使用JavaScript编写Ajax请求的代码。可以使用原生的JavaScript，也可以使用jQuery等库来简化操作。以下是一个使用原生...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值