javascript原生ajax请求

 1     class Ajax{
 2
 3         constructor(url, method, data, callback_suc, callback_err, callback_run){
 4             this.RT = true;//默认为异步请求
 5             this.url = url;
 6             this.method = method || "POST";
 7             this.data = data || "";
 8             this.callback_suc = callback_suc || function () {};
 9             this.callback_err = callback_err || function () {};
10             this.callback_run = callback_run || function () {};
11             if(!this.url){this.callback_err(); return;}
12             this.createRequest();
13         }
14
15         createRequest(){
16             let xhr = new XMLHttpRequest();
17             xhr.onreadystatechange = (e)=>{this.run(e);}
18             xhr.open(this.method, this.url, this.RT);
19             xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
20             xhr.send(this.data);
21         }
22
23         run(e){
24             this.callback_run(e);
25             if(e.target.readyState !== 4 || e.target.status !== 200){return;}
26             this.callback_suc(e);
27         }
28
29     }
30
31     new Ajax(//调用
32         "./main.php", //url:请求地址
33         "POST", //method:请求方法
34         "data=3&sb=2",//data:传递数据
35         (e)=>{//callback_suc:请求完成 回调函数
36             document.write(e.target.responseText);//3
37         }
38         (e)=>{}//callback_err:请求错误 回调函数
39         (e)=>{}//callback_run:请求中 回调函数
40     )

上面是js代码

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

1 <?php
2     //接收客户端请求数据data和sb
3     $data = isset($_GET[‘data‘]) ? $_GET[‘data‘] : "data为空";
4     $sb = isset($_GET[‘sb‘]) ? $_GET[‘sb‘] : "sb为空";
5     //向客户端返回数据
6     echo $data." ".$sb;
7 ?>

原文地址:https://www.cnblogs.com/weihexinCode/p/12316696.html

时间: 2024-08-14 20:29:12

javascript原生ajax请求的相关文章

【转】Javascript原生Ajax请求

什么是 ajaxajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. http 请求 首先需要了解 http 请求的方法(GET 和 POST). GET 用于获取数据.GET 是在 URL 中传递数据,它的安全性低,容量低. POST 用于上传数据.POST 安全性一般,容量几乎无限. ajax 请求 ajax 请求一般分成 4 个步骤. 1.创建 ajax 对象 在创建对象时,有兼容问题: var o

原生javaScript完成Ajax请求

使用原生javaScript完成Ajax请求,首先应该创建一个对象XMLHttprequest,考虑到兼容低版本IE浏览器,使用ActiveXObject对象,代码入下: var request; if(windoe.XMLHtprequest){ request=new XMLHttprequest(); }else{ request = new ActiveXObject(); } function success(text) { var textarea = document.getEle

原生AJAX请求教程

ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异步:指某段程序执行时不会阻塞其它程序执行,其表现形式为程序的执行顺序不依赖程序本身的书写顺序,相反则为同步. XMLHttpRequest 对象 浏览器内建对象,用于在后台与服务器通信(交换数据) ,由此我们便可实现对网页的部分更新,而不是刷新整个页面. 所有现代浏览器(IE7+.Firefox.C

Servlet处理原生Ajax请求

萌新小白人生中的第一篇博客,难免会有差错,还望各位大佬多多包涵. 1. Ajax技术简介      Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)时一种创建交互式网页应用的网页开发技术,它并不是一项新的技术,其产生的目的是用于实现页面的局部刷新.通过Ajax技术可以使之前的应用程序在每次提交时不用进行页面的整体刷新,从而提升操作的性能. 2. Servlet概念     Servlet(服务器端小程序)是使用java编写的服务器端小程

JS原生Ajax请求

摘录一个JS原生Ajax请求行为,原文地址:http://caibaojian.com/ajax-jsonp.html ajax({ url: "./TestXHR.aspx", //请求地址 type: "POST", //请求方式 data: { name: "super", age: 20 }, //请求参数 dataType: "json", success: function (response, xml) { //

javascript中Ajax请求的封装代码

/****************************ajax请求 start**************************************/ function ajaxClass(_url, _successCallback, _failureCallback, _urlParameters, _callbackParams, _async, _charset, _timeout, _frequency, _requestTimes, _frame) { /** * AJAX

javascript版Ajax请求

什么是Ajax请求,Ajax也就是"Asynchronous JavaScript and XML"(异步JavaScript和XML),无刷新数据读取.能减少流量的消耗,也提高了浏览的流畅性,给用户更加友好的体验. 发送Ajax请求也就几步便可完成 第一步:创建异步对象 var xhr = new XMLHttpRequest(); 这样创建的异步对象是给新版的浏览器用的,当然不乏一些用着旧版浏览器的老客户.旧版的创建方法如下: var xhr = new ActiveXObject

原生ajax请求

原生ajax请求: // ajax四步:创建XMLHttpRequest对象,连接服务器,发送请求,接收响应数据 ajax: function (options) { options = options || {}; options.type = (options.type || "GET").toUpperCase(); options.dataType = options.dataType || 'json'; var xhr = new XMLHttpRequest(); var

使用原生JavaScript发送ajax请求

关于使用原生JavaScript发送异步请求给服务端. 准备工作: 代码编写工具用的是sublime 服务端使用的是wamp搭的一个本地Apache服务器,主要用来返回数据 方便测试 步骤: 浏览器端 html标签绑定事件发送ajax请求----> 五步操作:1 创建异步对象XMLHttpRequest; 2 设置method url 3 发送请求给服务端 4 注册事件   5 在事件中获取服务端返回的数据,进行操作. 服务器端 1 获取请求数据 2 返回结果给浏览器 下面来一个小demo1做一