Javascript原生ajax请求代码实例

这篇文章主要介绍了Javascript原生ajax请求代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

代码如下

class Ajax{

  constructor(url, method, data, callback_suc, callback_err, callback_run){
   this.RT = true;//默认为异步请求
   this.url = url;
   this.method = method || "POST";
   this.data = data || "";
   this.callback_suc = callback_suc || function () {};
   this.callback_err = callback_err || function () {};
   this.callback_run = callback_run || function () {};
   if(!this.url){this.callback_err(); return;}
   this.createRequest();
  }

  createRequest(){
   let xhr = new XMLHttpRequest();
   xhr.onreadystatechange = (e)=>{this.run(e);}
   xhr.open(this.method, this.url, this.RT);
   xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   xhr.send(this.data);
  }

  run(e){
   this.callback_run(e);
   if(e.target.readyState !== 4 || e.target.status !== 200){return;}
   this.callback_suc(e);
  }

 }
 //调用:
 new Ajax(
  "./main.php", //url：请求地址
  "POST", //method：请求方法
  "data=3&sb=2",//data：传递数据
  (e)=>{//callback_suc：请求完成 回调函数
   document.write(e.target.responseText);//3
  },
  (e)=>{},//callback_err：请求错误 回调函数
  (e)=>{}//callback_run：请求中 回调函数
 )

上面是js代码

下面以main.php为例接收请求

<?php
 //接收客户端请求数据data和sb
 $data = isset($_POST['data']) ? $_POST['data'] : "data为空";
 $sb = isset($_POST['sb']) ? $_POST['sb'] : "sb为空";
 //向客户端返回数据
 echo $data." ".$sb;
?>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AjaxFileUpload.js实现异步上传文件功能

    做软工作业时,需要实现无刷新异步上传图片到服务器,于是想利用Ajax: 得到file的val,再post过去- 等真正实现的时候才发现,根本行不通. 于是翻来翻去找到一个封装好的js插件,可以实现异步上传文件. AjaxFileUpload 这个插件的原理是创建隐藏的表单和iframe,然后用JS去提交,获得返回值. 语法 $.ajaxFileUpload([options]) 参数说明 url 上传处理程序地址. fileElementId 需要上传的文件域的ID,即的ID. secureur

  • JS通过ajax + 多列布局 + 自动加载实现瀑布流效果

    Ajax •说明:本文效果是无限加载的,意思就是你一直滚动就会一直加载图片出现,通过鼠标滚动距离来判断的,所以不是说的那种加载一次就停了的那种,那种demo下次我会再做一次 css部分用的是html5+css3的新属性,图片会自动添加到每行的最顶端上去,而不是用js去判断.去除了一些js计算的麻烦. css部分: * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #352323 url(images/a

  • Laravel validate error处理,ajax,json示例

    如下所示: public function updateLevelTestRecords(Request $request) { $rules = [ 'uid' => 'required|integer', 'level_test_page_id' => 'required', 'level_test_progress_id' => 'required', 'cost_time' => 'required', 'score' => 'required', ]; $valid

  • $.ajax中contentType: “application/json” 的用法详解

    具体内容如下所示: $.ajax({ type: httpMethod, cache:false, async:false, contentType: "application/json; charset=utf-8", dataType: "json",//返回值类型 url: path+url, data:jsonData, success: function(data){ var resultData = '返回码='+data.status+',响应结果='

  • Django 通过JS实现ajax过程详解

    ajax的优缺点 AJAX使用Javascript技术向服务器发送异步请求 AJAX无须刷新整个页面 因为服务器响应内容不再是整个页面,而是页面中的局部,所以AJAX性能高 小练习:计算两个数的和 方式一:这里没有指定contentType:默认是urlencode的方式发的 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

  • js 实现ajax发送步骤过程详解

    js发送ajax发送,分步骤进行 ajax的核心 是XMLHttpRequest, 步骤1:创建一个对象xmlrequest,在主流的浏览器都支持new , var xmlhttp = new XMLHttpRequest() IE浏览器不支持这种方法,需要再写一个函数来创建 步骤2 :连接服务端 得到XMLHTTPRequest对象后,就可以调用对象的open()方法,与服务器连接,参数如下 open(method,url,async): method:请求方法GET或POST, url:服务

  • ajaxfileupload.js实现上传文件功能

    使用ajaxfileupload.js实现上传文件功能 一.ajaxFileUpload是一个异步上传文件的jQuery插语法:$.ajaxFileUpload([options]) options参数说明: 1.url 上传处理程序地址 2.fileElementId 文件选择框的id属性,即的id 3.secureuri 是否启用安全提交,默认为false 4.dataType 服务器返回的数据类型.可以为xml,script,json,html.如果不填写,jQuery会自动判断 5.su

  • Javascript原生ajax请求代码实例

    这篇文章主要介绍了Javascript原生ajax请求代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 class Ajax{ constructor(url, method, data, callback_suc, callback_err, callback_run){ this.RT = true;//默认为异步请求 this.url = url; this.method = method || "POST";

  • php下的原生ajax请求用法实例分析

    本文实例讲述了php下的原生ajax请求用法.分享给大家供大家参考,具体如下: 浏览器中为我们提供了一个JS对象XMLHttpRequet,它可以帮助我们发送HTTP请求,并接受服务端的响应. 意味着我们的浏览器不提交,通过JS就可以请求服务器. ajax(Asynchronous Javascript And XML)其实就是通过XHR对象,执行HTTP请求. 1.创建XHR对象 var xhr = new XMLHttpRequest(); //暂不考虑兼容 2.XHR的对象属性和方法 方法

  • SpringBoot基于Shiro处理ajax请求代码实例

    写一个Shiro的过滤器 import cn.erika.demo.common.model.vo.Message; import com.alibaba.fastjson.JSON; import org.apache.shiro.SecurityUtils; import org.apache.shiro.subject.Subject; import org.apache.shiro.web.servlet.AdviceFilter; import javax.servlet.Servle

  • Javascript发送AJAX请求实例代码

    一个对AJAX的封装 //url就是请求的地址 //successFunc就是一个请求返回成功之后的一个function,有一个参数,参数就是服务器返回的报文体 function ajax(url,successFunc) { var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); xhr.open("POST",url,true); xhr.onr

  • 原生javascript的ajax请求及后台PHP响应操作示例

    本文实例讲述了原生javascript的ajax请求及后台PHP响应操作.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table id="t">

  • 原生JavaScript实现日历功能代码实例(无引用Jq)

    原生JavaScript实现日历功能代码实例(无引用Jq)

    这篇文章主要介绍了原生JavaScript实现日历功能代码实例(无引用Jq),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 成品显示,可左右切换月份 html 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi

  • 原生ajax调用数据实例讲解

    由于jQuery的盛行,现在使用较多的是jQuery封装好了的ajax,因为解决了浏览器兼容性问题,这对程序员来说就等于去掉了一个心头大患,但并非原生ajax就销声匿迹,并且本人感觉还是对原生的ajax有所了解的好,下面就是一段ajax数据调用的实例代码,非常的简单,初学者可以参考一下.代码如下: 一.兼容浏览器部分 function xmlHttpR() { var xmlhttp; if(window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(

  • 基于JavaScript伪随机正态分布代码实例

    这篇文章主要介绍了基于JavaScript伪随机正态分布代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在游戏开发中经常遇到随机奖励的情况,一般会采取先生成数组,再一个一个取的方式发随机奖励. 下面是js测试正态分布代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

  • Spring boot通过AOP防止API重复请求代码实例

    这篇文章主要介绍了Spring boot通过AOP防止API重复请求代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 实现思路 基于Spring Boot 2.x 自定义注解,用来标记是哪些API是需要监控是否重复请求 通过Spring AOP来切入到Controller层,进行监控 检验重复请求的Key:Token + ServletPath + SHA1RequestParas Token:用户登录时,生成的Token Servlet

  • 通过javascript实现扫雷游戏代码实例

    这篇文章主要介绍了通过javascript实现扫雷游戏代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 html代码: <div id="mine"> <div class="level"> <button type="button">初级</button> <button type="button">中级&l

随机推荐