javascript - 封装原生js实现ajax

  1             /*
  2              * ajax方法
  3              */
  4             var Ajax = function() {
  5                 var that = this;
  6                 //创建异步请求对象方法
  7                 that.createXHR = function() {
  8                     if(window.XMLHttpRequest) { //IE7+、Firefox、Opera、Chrome 和Safari
  9                         return new XMLHttpRequest();
 10                     } else if(window.ActiveXObject) { //IE6 及以下
 11                         var versions = ['MSXML2.XMLHttp', 'Microsoft.XMLHTTP'];
 12                         for(var i = 0, len = versions.length; i < len; i++) {
 13                             try {
 14                                 return new ActiveXObject(version[i]);
 15                                 break;
 16                             } catch(e) {
 17                                 //跳过
 18                             }
 19                         }
 20                     } else {
 21                         throw new Error('浏览器不支持XHR对象!');
 22                     }
 23                 }
 24                 //初始化数据方法
 25                 that.init = function(obj) {
 26                     //初始化数据
 27                     var objAdapter = {
 28                             method: 'get',
 29                             data: {},
 30                             success: function() {},
 31                             complete: function() {},
 32                             error: function(s) {
 33                                 alert('status:' + s + 'error!');
 34                             },
 35                             async: true
 36                         }
 37                         //通过使用JS随机字符串解决IE浏览器第二次默认获取缓存的问题
 38                     that.url = obj.url + '?rand=' + Math.random();
 39                     that.method = obj.method || objAdapter.method;
 40                     that.data = that.params(obj.data) || that.params(objAdapter.data);
 41                     that.async = obj.async || objAdapter.async;
 42                     that.complete = obj.complete || objAdapter.complete;
 43                     that.success = obj.success || objAdapter.success;
 44                     that.error = obj.error || objAdapter.error;
 45                 }
 46                 //ajax异步调用
 47                 that.ajax = function(obj) {
 48                     that.method = obj.method || 'get';
 49                     if(obj.method === 'post'){
 50                         that.post(obj);
 51                     }else{
 52                         that.get(obj);
 53                     }
 54                 }
 55                 //post方法
 56                 that.post = function(obj) {
 57                     var xhr = that.createXHR(); //创建XHR对象
 58                     that.init(obj);
 59                     that.method='post';
 60                     if(that.async === true) { //true表示异步,false表示同步
 61                         //使用异步调用的时候,需要触发readystatechange 事件
 62                         xhr.onreadystatechange = function() {
 63                             if(xhr.readyState == 4) { //判断对象的状态是否交互完成
 64                                 that.callback(obj,this); //回调
 65                             }
 66                         };
 67                     }
 68                     //在使用XHR对象时,必须先调用open()方法,
 69                     //它接受三个参数:请求类型(get、post)、请求的URL和表示是否异步。
 70                     xhr.open(that.method, that.url, that.async);
 71                     //post方式需要自己设置http的请求头,来模仿表单提交。
 72                     //放在open方法之后,send方法之前。
 73                     xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 74                     xhr.send(that.data); //post方式将数据放在send()方法里
 75                     if(that.async === false) { //同步
 76                         that.callback(obj,this); //回调
 77                     }
 78                 };
 79                 //get方法
 80                 that.get = function(obj) {
 81                     var xhr = that.createXHR(); //创建XHR对象
 82                     that.init(obj);
 83                     if(that.async === true) { //true表示异步,false表示同步
 84                         //使用异步调用的时候,需要触发readystatechange 事件
 85                         xhr.onreadystatechange = function() {
 86                             if(xhr.readyState == 4) { //判断对象的状态是否交互完成
 87                                 that.callback(obj,this); //回调
 88                             }
 89                         };
 90                     }
 91                     //若是GET请求,则将数据加到url后面
 92                     that.url += that.url.indexOf('?') == -1 ? '?' + that.data : '&' + that.data;
 93                     //在使用XHR对象时,必须先调用open()方法,
 94                     //它接受三个参数:请求类型(get、post)、请求的URL和表示是否异步。
 95                     xhr.open(that.method, that.url, that.async);
 96                     xhr.send(null); //get方式则填null
 97                     if(that.async === false) { //同步
 98                         that.callback(obj,this); //回调
 99                     }
100                 }
101                 //请求成功后,回调方法
102                 that.callback = function(obj,xhr) {
103                         if(xhr.status == 200) { //判断http的交互是否成功,200表示成功
104                             obj.success(xhr.responseText); //回调传递参数
105                         } else {
106                             alert('获取数据错误!错误代号:' + xhr.status + ',错误信息:' + xhr.statusText);
107                         }
108                     }
109                 //数据转换
110                 that.params = function(data) {
111                     var arr = [];
112                     for(var i in data) {
113                         //特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理
114                         arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
115                     }
116                     return arr.join('&');
117                 }
118                 return {
119                     post : that.post,
120                     get : that.get,
121                     ajax : that.ajax
122                 }
123             }

上述的Ajax方法可以看成是一个类,共有方法有:

   1. 初始化数据方法init(),

   2. 创建异步请求对象方法createXHR(),

   3.请求方法ajax(),post(),get(),

   4.请求成功后回调方法callback(),

   5.数据格式转换方法params()

也可以看成一个函数,return 返回的json对象中定义的接口用于函数内方法的调用 

故而有有两种方式进行使用封装的Ajax

函数方式:测试代码数据

 1             Ajax().post({
 2                 url: 'ajax.php',
 3                 data: {
 4                     'name': 'JR',
 5                     'age': 22
 6                 },
 7                 success: function(message) {
 8                     console.log(message);
 9                 },
10                 async: true
11             });

类方式:测试代码数据

 1             var ajax = new Ajax();
 2             ajax.post({
 3                 url: 'ajax.php',
 4                 data: {
 5                     'name': 'JR',
 6                     'age': 22
 7                 },
 8                 success: function(message) {
 9                     console.log(message);
10                 },
11                 async: true
12             });

对上述封装的ajax方法进行优化

  1var Ajax = {
  2                 //ajax模块
  3                 init: function(obj) {
  4                     //初始化数据
  5                     var objAdapter = {
  6                             url: '',
  7                             method: 'get',
  8                             data: {},
  9                             success: function() {},
 10                             complete: function() {},
 11                             error: function(s) {
 12                                 alert('status:' + s + 'error!');
 13                             },
 14                             async: true
 15                         }
 16                         //通过使用JS随机字符串解决IE浏览器第二次默认获取缓存的问题
 17                     objAdapter.url = obj.url + '?rand=' + Math.random();
 18                     objAdapter.method = obj.method || objAdapter.method;
 19                     objAdapter.data = Ajax.params(obj.data) || Ajax.params(objAdapter.data);
 20                     objAdapter.async = obj.async || objAdapter.async;
 21                     objAdapter.complete = obj.complete || objAdapter.complete;
 22                     objAdapter.success = obj.success || objAdapter.success;
 23                     objAdapter.error = obj.error || objAdapter.error;
 24                     return objAdapter;
 25                 },
 26                 //创建XMLHttpRequest对象
 27                 createXHR: function() {
 28                     if(window.XMLHttpRequest) { //IE7+、Firefox、Opera、Chrome 和Safari
 29                         return new XMLHttpRequest();
 30                     } else if(window.ActiveXObject) { //IE6 及以下
 31                         var versions = ['MSXML2.XMLHttp', 'Microsoft.XMLHTTP'];
 32                         for(var i = 0, len = versions.length; i < len; i++) {
 33                             try {
 34                                 return new ActiveXObject(version[i]);
 35                                 break;
 36                             } catch(e) {
 37                                 //跳过
 38                             }
 39                         }
 40                     } else {
 41                         throw new Error('浏览器不支持XHR对象!');
 42                     }
 43                 },
 44                 params: function(data) {
 45                     var arr = [];
 46                     for(var i in data) {
 47                         //特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理
 48                         arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
 49                     }
 50                     return arr.join('&');
 51                 },
 52                 callback: function(obj, xhr) {
 53                     if(xhr.status == 200) { //判断http的交互是否成功,200表示成功
 54                         obj.success(xhr.responseText); //回调传递参数
 55                     } else {
 56                         alert('获取数据错误!错误代号:' + xhr.status + ',错误信息:' + xhr.statusText);
 57                     }
 58                 },
 59                 ajax: function(obj) {
 60                     if(obj.method === 'post') {
 61                         Ajax.post(obj);
 62                     } else {
 63                         Ajax.get(obj);
 64                     }
 65                 },
 66                 //post方法
 67                 post: function(obj) {
 68                     var xhr = Ajax.createXHR(); //创建XHR对象
 69                     var opt = Ajax.init(obj);
 70                     opt.method = 'post';
 71                     if(opt.async === true) { //true表示异步,false表示同步
 72                         //使用异步调用的时候,需要触发readystatechange 事件
 73                         xhr.onreadystatechange = function() {
 74                             if(xhr.readyState == 4) { //判断对象的状态是否交互完成
 75                                 Ajax.callback(opt, xhr); //回调
 76                             }
 77                         };
 78                     }
 79                     //在使用XHR对象时,必须先调用open()方法,
 80                     //它接受三个参数:请求类型(get、post)、请求的URL和表示是否异步。
 81                     xhr.open(opt.method, opt.url, opt.async);
 82                     //post方式需要自己设置http的请求头,来模仿表单提交。
 83                     //放在open方法之后,send方法之前。
 84                     xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 85                     xhr.send(opt.data); //post方式将数据放在send()方法里
 86                     if(opt.async === false) { //同步
 87                         Ajax.callback(obj, xhr); //回调
 88                     }
 89                 },
 90                 //get方法
 91                 get: function(obj) {
 92                     var xhr = Ajax.createXHR(); //创建XHR对象
 93                     var opt = Ajax.init(obj);
 94                     if(opt.async === true) { //true表示异步,false表示同步
 95                         //使用异步调用的时候,需要触发readystatechange 事件
 96                         xhr.onreadystatechange = function() {
 97                             if(xhr.readyState == 4) { //判断对象的状态是否交互完成
 98                                 Ajax.callback(obj, xhr); //回调
 99                             }
100                         };
101                     }
102                     //若是GET请求,则将数据加到url后面
103                     opt.url += opt.url.indexOf('?') == -1 ? '?' + opt.data : '&' + opt.data;
104                     //在使用XHR对象时,必须先调用open()方法,
105                     //它接受三个参数:请求类型(get、post)、请求的URL和表示是否异步。
106                     xhr.open(opt.method, opt.url, opt.async);
107                     xhr.send(null); //get方式则填null
108                     if(opt.async === false) { //同步
109                         Ajax.callback(obj, xhr); //回调
110                     }
111                 }
112             };

测试代码

 1             Ajax.post({
 2                 url: 'ajax.php',
 3                 data: {
 4                     'name': 'JR',
 5                     'age': 22
 6                 },
 7                 success: function(message) {
 8                     console.log(message);
 9                 },
10                 async: true
11             });

ajax.php页面代码

1 <?php
2 echo $_POST['name'];
3 ?>

控制台显示

转载于:https://www.cnblogs.com/jtnote/p/6022346.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/256086.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

QT对象树、信号和槽机制

文章目录一 、对象树是什么&#xff1f;二、信号和槽的基本概念2.1 信号2.2 槽2.3 松散耦合2.4 特点三、示例总结一 、对象树是什么&#xff1f; 对象树是由父类和若干子类对象组成&#xff0c;而子类也可以由若干孙类。 QT中的对象树是以QObject为起始父类来完成树的构建的&a…

【数据结构】——归并排序

目录 一、代码 二、随笔 一、代码 归并排序的主要思路&#xff1a;将两个有序的子列表归并为一个有序的大列表 #归并函数&#xff0c;假设li是由左右两个有序的子列表组成,假设两个子列表都是从小到大排好序的列表 def merge(li,low,mid,high)::param li: 由左右两个有序的子列…

开发发布npm module包

开发发布npm module包 问题 在项目开发过程中&#xff0c;每当进入一个新的业务项目&#xff0c;从零开始搭建一套前端项目结构是一件让人头疼的事情&#xff0c;就要重新复制一个上一个项目的前端框架和组件代码库。其中很多功能的模块组件都要重复拷贝&#xff0c;可以统一将…

如何使用ATS提高应用的安全性

App Transport Security&#xff0c;简短的说就是ATS&#xff0c;是iOS9和OS X El Capitan的一个新特性。App Transport Security 的目标是提高Apple 操作系统的安全性以及在此操作系统上运行的任何应用的安全性。 基于HTTP传输数据的网络请求都是明文。开启App Transport Secu…

手机客户端测试考虑的点

手机客户端测试考虑点总结 版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主允许不得转载。 此文未本人工作中的总结&#xff0c;特此总结。 异常场景&#xff1a; 网络异常&#xff0c;服务器异常&#xff0c;接口异常或参考参数篡改&#xff0c;断电&#xff0c;…

NMS(非极大值抑制)算法详解与示例

一、NMS是什么&#xff1f; NMS&#xff08;non maximum suppression&#xff09;即非极大值抑制&#xff0c;广泛应用于传统的特征提取和深度学习的目标检测算法中。 NMS原理是通过筛选出局部极大值得到最优解。 在2维边缘提取中体现在提取边缘轮廓后将一些梯度方向变化率较小…

【转载】ASP.NET应用程序与页面生命周期

在本文中&#xff0c;我们将了解不同的事件&#xff0c;ASP.NET 应用程序的生命周期以浏览器向 Web 服务器&#xff08;对于 ASP.NET 应用程序&#xff0c;通常为 IIS&#xff09;发送请求为起点&#xff0c;直至将请求结果返回至浏览器结束。在这个过程中&#xff0c;首先我们…

基于PCL的ICP及其变种算法实现

文章目录前言一、ICP算法基础1.1 提取待匹配点对1.2 计算旋转平移矩阵1.3 计算变换后的点和目标点之间的偏差二、ICP算法变种2.1 PLICP2.2 PointToPlane ICP2.3 NICP2.4 LM_ICP三、程序示例1. 传统方法2. PointToPlane ICP总结前言 ICP&#xff08;Iterative Closest Point&am…

【数据结构】——排序算法系列总结

目录 1、空间复杂度 2、稳定性 3、运行时间 4、目前默认的sort内置函数排序函数 5、六种常用排序方法 1、空间复杂度 空间复杂度产生的原因有两个&#xff1a;①重新定义了一块空间用于存储数据&#xff1b;②递归产生了栈空间 冒泡排序、选择排序、堆排序和插入排序属于…

Spring Boot实践教程(二):SpringApplication分析

2019独角兽企业重金招聘Python工程师标准>>> 本文会通过分析上一篇中跑起来的示例程序来分析一下Spring Boot程序运行的基本原理。 概要 在上一篇的介绍中&#xff0c;程序是通过SpringBoot1HelloworldApplication.main()方法运行起来的&#xff1a; public static …

基于PCL的MLS(移动最小二乘)算法简介与示例

一、MLS基础 mls算法本质上和最小二乘一样&#xff0c;是一种拟合数据的算法。区别在于mls是局部的&#xff0c;即通过系数向量和基函数分别对数据中不同位置的节点区域进行拟合&#xff0c;需要计算出全部节点域的拟合函数的参数。而传统的最小二乘是全局的&#xff0c;采用所…

基于PCL的RANSAC(随机采样一致)算法简介与示例

前言 RANSAC&#xff08;Random sample consensus&#xff0c;随机采样一致&#xff09;是3D点云拟合的一种重要的手段&#xff0c;可以对直线、圆、平面&#xff0c;圆球、圆柱等形状的点云进行拟合&#xff0c;其优点在于可以最大程度上减少噪声点对拟合效果的影响。 一、RA…

Testin云測与ARM 战略合作:推动全球移动应用加速进入中国市场

Testin云測与ARM 战略合作&#xff1a;推动全球移动应用加速进入中国市场 2014/10/14 Testin 业界资讯&#xff08;中国北京–2014年10月14日 &#xff09;全球最大的移动游戏、应用真机和用户云測试平台Testin云測今日宣布与ARM建立战略伙伴合作关系&#xff0c;设立“ARM应…

正则表达式快速入门,转载

正则表达式快速入门 首先简单介绍下正则表达式&#xff1a; 在编写处理字符串的程序或网页时&#xff0c;经常会有查找符合某些复杂规则的字符串的需要。正则表达式就是用于描述这些规则的工具。换句话说&#xff0c;正则表达式就是记录文本规则的代码。 下面就看看正则表达式里…

【pyqt5】配置Qt Designer之【designer.exe的保存位置及ui文件转py文件及no Qt platform plugin could be initialized 问题解决】

目录 一、寻找designer.exe 二、no Qt platform plugin could be initialized 问题解决 三、ui文件转换为py文件 四、pyqt5的使用教程 一、寻找designer.exe 头疼&#xff0c;找了一上午都没有找到这个的路径&#xff0c;最后还是在评论区看到的&#xff0c;这也不能怪人家…

PCL中GreedyProjection三角化算法简介与示例

文章目录前言一、PCL点云三角化1.1 Delaunay三角剖分1.2 贪婪三角化二、程序示例总结前言 Delaunay三角剖分最初应用于2维领域&#xff0c;而与Greedy三角化算法的结合&#xff0c;使之成为目前在三维重建领域最为基础的算法原理之一&#xff0c;很多学者针对其原理进行改进用…

【pyqt5】 读取numpy arrray 显示图片

目录 1、GUI界面&#xff08;QT designer设计&#xff09; 2、逻辑函数&#xff08;回调等&#xff09; 3、显示图片在label上 0&#xff09;直接利用QPixmap显示图像 1&#xff09;显示彩色图 彩色图显示色调不正常——opencv&#xff08;BGR&#xff09;QT(RGB)需要进行…

【pyqt5】——入门级模板(ui文件+ui转py文件+逻辑py文件)(消息提示框)

目录 1、ui文件 2、ui转py文件 3、逻辑py文件 4、实例 1&#xff09;ui文件——demo.ui 2&#xff09;ui转py文件——demo.py 3)逻辑py文件——demoLogic.py 4)运行结果 1、ui文件 这个文件是直接通过pyqt5 designer进行设计的&#xff0c;相关配置可见《配置Qt Design…

PCL中点特征描述子PFH、FPFH和VFH简述和示例

文章目录前言一、点特征直方图1.1 PFH1.1.1 法线估计1.1.2 特征计算1.2 FPFH1.3 VFH二、示例2.1 PFH计算2.2 FPFH2.3 VFH前言 点特征直方图是PCL中非常重要的特征描述子&#xff0c;在点云匹配、分割、重建等任务中起到关键作用&#xff0c;可以对刚体变换、点云密度和噪声均有…

来一个炫酷的导航条

本文分享一个带动画效果的中英文切换导航条。 鼠标放上去试一下&#xff1a; INDEX 首页 BBS 社区 HOME 我 1.用CSS3实现 效果看上去复杂&#xff0c;其实我们先来做出一个样式&#xff0c;就很简单了。如下&#xff1a; 代码&#xff1a; <nav><ul class"list…