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对象树、信号和槽机制

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包

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

如何使用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（非极大值抑制）算法详解与示例

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

【数据结构】——冒泡排序、插入排序、选择排序

# 冒泡排序&#xff0c;复杂度为O(n^2) def bubble_sorted(li:list)->list:for i in range(len(li)):# 第几趟exchanged False# 这个是为了防止多余的遍历&#xff0c;如果前面的元素已经是排序好的&#xff0c;那就不需要再进行比较了&#xff0c;减少运行时间for j in ra…
阅读更多...
【转载】ASP.NET应用程序与页面生命周期

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

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

基于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…
阅读更多...
python 计算器

python 计算器

--coding:utf-8-- from Tkinter import * 创建横条型框架 def frame(root, side): w Frame(root) w.pack(side side, expand YES, fill BOTH) return w 创建按钮 def button(root, side, text, command None): w Button(root, text text, command command) w.pack(side…
阅读更多...
最长公共子序列(LCS)

最长公共子序列(LCS)

注意最长公共子串&#xff08;Longest CommonSubstring&#xff09;和最长公共子序列&#xff08;LongestCommon Subsequence, LCS&#xff09;的区别&#xff1a;子串&#xff08;Substring&#xff09;是串的一个连续的部分&#xff0c;子序列&#xff08;Subsequence&#x…
阅读更多...
【数据结构】——排序算法系列总结

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

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

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

2019独角兽企业重金招聘Python工程师标准>>> 本文会通过分析上一篇中跑起来的示例程序来分析一下Spring Boot程序运行的基本原理。 概要 在上一篇的介绍中&#xff0c;程序是通过SpringBoot1HelloworldApplication.main()方法运行起来的&#xff1a; public static …
阅读更多...
基于PCL的MLS（移动最小二乘）算法简介与示例

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

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

二分法php

二分法。分别使用while循环的方法和递归调用的方法。 <?php// 二分法的使用数组必须是有序的&#xff0c;或升序&#xff0c;或降序 $arr array(1, 3, 5, 7, 9, 13 );// 递归调用&#xff08;相比较好理解 function bsearch_r($v, $arr, $low, $high){if ($low > $high…
阅读更多...
【JZOJ4861】【NOIP2016提高A组集训第7场11.4】推冰块

【JZOJ4861】【NOIP2016提高A组集训第7场11.4】推冰块

题目描述 Dpstr最近迷上了推冰块。冰地是一个n行m列的网格区域&#xff0c;第i行第j列的格子记为(i,j)&#xff0c;也就是左上角为(1,1)&#xff0c;右下角为(n,m)。每个格子可能是冰面、障碍物、减速带三者之一。其中&#xff0c;冰地外围&#xff08;即第0行、第n1行、第0列、…
阅读更多...
【图像处理面试题】——1

【图像处理面试题】——1

链接&#xff1a;https://www.jianshu.com/p/e58ca1775700 1、给定0-1矩阵&#xff0c;求连通域。2、写一个函数&#xff0c;求灰度图的直方图。3、写一个均值滤波&#xff08;中值滤波&#xff09;。4、写出高斯算子&#xff0c;Sobel算子&#xff0c;拉普拉斯算子等&#xff…
阅读更多...
IT运维服务管理问题总结 #F#

IT运维服务管理问题总结 #F#

1.管理现状问题&#xff1a;支撑企业业务运行的IT系统主要由大量的网络设备、主机系统和应用系统组成&#xff0c;这些设备和系统从应用角度来分又属于不同的业务系统和部门&#xff0c;网络设备、主机系统等具备独立的用户管理、认证授权和审计系统&#xff0c;且由不同的系统…
阅读更多...
基于PCL的RANSAC（随机采样一致）算法简介与示例

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

前言 RANSAC&#xff08;Random sample consensus&#xff0c;随机采样一致&#xff09;是3D点云拟合的一种重要的手段&#xff0c;可以对直线、圆、平面&#xff0c;圆球、圆柱等形状的点云进行拟合&#xff0c;其优点在于可以最大程度上减少噪声点对拟合效果的影响。 一、RA…
阅读更多...
MATLAB调用Python自定义函数（类、函数等） Python调用MATLAB

MATLAB调用Python自定义函数（类、函数等） Python调用MATLAB

一、MATLAB调用Python函数 参考链接&#xff1a;https://blog.csdn.net/qq_27280237/article/details/84644900 知乎链接&#xff1a;https://zhuanlan.zhihu.com/p/92081119 知乎上这位说的更加的详细&#xff0c;感谢 二、Python调用MATLAB-API 知乎链接&#xff1a;htt…
阅读更多...
最新文章

Copyright @ 2022~2023