javascript - 封装原生js实现ajax
2024-05-06 17:50:39
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
javascript - 封装原生js实现ajax相关推荐
- Ajax工作原理和原生JS的ajax封装
前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...
- js原生ajax跨域请求,封装一个原生js的ajax请求,支持IE9CORS跨域请求
前言 关于纯js的ajax请求,我之前有文章写过, https://www.haorooms.com/post/js_ajax_chun , 关于CORS跨域资源共享,我也有文章写过, https:/ ...
- 原生ajax如何跨域,封装一个原生js的ajax请求,支持IE9CORS跨域请求
前言 关于纯js的ajax请求,我之前有文章写过,https://www.haorooms.com/post/js_ajax_chun, 关于CORS跨域资源共享,我也有文章写过,https://ww ...
- 原生js的Ajax实例
与jQuery不同,原生js的ajax的实现相比来说复杂一些,因为jquery中的$.ajax()方法已经把js的实现封装起来,使用起来更加方便.但是,原生js的实现过程,对于理解ajax,好像更清晰 ...
- 原生js实现Ajax，JSONP
Ajax内部的几个执行步骤 创建XMLHttpRequest对象(new XMLHttpRequest()) 设置请求头(setRequestHeader) 连接服务器(open()) 设置回调(on ...
- java原生的ajax怎么写,用原生js实现 ajax方法
原标题:用原生js实现 ajax方法 作者介绍:咔拉宝宝前端工程师,致力于首个情景式购物商城咔拉商城的前端搭建,在咔拉职场栏目作为程序猿担当,与读者朋友们共同探讨前端开发的那些事. 一.ajax介绍: ...
- ajax 原生js操作ajax
一.ajax 1.什么是ajax? ajax是异步javascript与xml,它是多种技术一个集合.可以无刷新状态更新页面. 2.ajax的优缺点: ...
- 原声ajax发送post请求,原生JS实现ajax 发送post请求
1. [代码]原生JS实现ajax 发送post请求 var oStr = ''; var postData = {}; var oAjax = null; //post提交的数据 postData ...
- 原生js实现ajax方法（闭包）
学习Jquery是,模仿写了一个原生js实现ajax方法(闭包),代码上加有注释 方法如下: <script type="text/javascript">(funct ...
最新文章
- Linux内核移植之一：内核源码结构与Makefile分析
- ios 设置属性的center_ios-坐标系统(详解UIView的frame、bounds跟center属性[图])
- KubeFlow安装指南
- 一文看懂数据预处理最重要的3种思想和方法
- Spring ： Spring Aop JDK动态代理调用过程
- 使用aws跑深度学习_RNN示例项目从开发到部署（三）：在AWS上部署深度学习模型...
- @程序员，多写点“坏”代码吧！
- 代码整合错了，回滚后再整合，为何要诉苦
- vue 实现文本的拖拽_基于Vue实现拖拽效果
- PDF内嵌字体分析 - 提取的文字是乱码原因分析
- 8位数控分频器的设计_基于FPGA的通用数控分频器的设计与实现
- 最新解决“请在微信客户端中打开链接”的教程分享
- 远程工具teamviewer使用教程
- 光学系统总体布局设计方法
- Imperva WAF Bypass【翻译】
- 当没有接口文档时候，测试人员如何测试？
- python读取word内容复制粘贴,Python读取word文本操作详解
- Vue SPA工作原理
- 人工智能学习：python实现迭代加深的深度优先搜索
- [HDU5604]守鹤之砂