自己封装的一个Ajax小框架

在经历了Jsp实训的惨痛教训后,特意花了点时间学习Ajax,学完后自我感觉良好,于是写了如下一个小框架:

 1 /**
 2 * frameAjax
 3 *
 4 * 参数:
 5 * paramsObj: Json
 6 * required params:
 7 * type:请求参数类型(String)
 8 * url:请求地址(String)
 9 * data:请求参数(Json),data可为空值。
10 * success:请求回调(Function)
11 * async:表示请求是否异步处理。默认为true,表示异步,可省略不写。
12 *
13 */
14
15 (function () {
16     function frameAjax(paramsObj) {
17         //处理请求参数
18         var arr = [];
19         for (var pro in paramsObj.data) {
20             arr.push(pro + ‘=‘ + paramsObj.data[pro]);
21         }
22         var data = arr.join("&");  //用“&”拼接请求参数
23         var async = true; //默认异步
24         if (paramsObj.async) {  //判断是否异步处理
25             async = paramsObj.async;
26         }
27
28         //创建Ajax引擎对象
29         var ajax = getAjax();
30         //复写onreadystatement函数
31         ajax.onreadystatechange = function () {
32             //判断Ajax状态码
33             if (ajax.readyState == 4) {
34                 //判断响应状态码
35                 if (ajax.status == 200) {
36                     if (paramsObj.success) {
37                         paramsObj.success(ajax);
38                     }
39                 } else if (ajax.status == 404) {
40                     console.error("请求资源不存在");
41                 } else if (ajax.status == 500) {
42                     console.error("服务器繁忙");
43                 }
44             }
45         }
46
47         //发送请求
48         if (paramsObj.type.toLowerCase() == "get") {
49             ajax.open("get", paramsObj.url + (data == null ? "" : "?" + data), async);
50             ajax.send(null);
51         } else if (paramsObj.type.toLowerCase() == "post") {
52             ajax.open("post", paramsObj.url, async);
53             ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
54             ajax.send(data);
55         } else {
56             console.log("请求类型错误");
57         }
58     }
59
60     //获取请求对象
61     function getAjax() {
62         var ajax;
63         if (window.XMLHttpRequest) { //火狐
64             ajax = new XMLHttpRequest();
65         } else if (window.ActiveXObject) { //IE
66             ajax = new ActiveXObject("Msxml2.XMLHTTP");
67         }
68         return ajax;
69     }
70     //将框架封装于window对象中
71     window.frameAjax = frameAjax;
72 }())

原文地址:https://www.cnblogs.com/skyzou/p/12305043.html

时间: 2024-10-05 23:27:09

自己封装的一个Ajax小框架的相关文章

实现AOP功能的封装与配置的小框架

内容 java基础巩固笔记 - 实现AOP功能的封装与配置的小框架 设计(目录): XXX = java.util.ArrayList中 代码 Advice接口 MyAdvice类 BeanFactory类 ProxyFactoryBean类 AopFrameWorkTest类 输出 本文通过是动态代理实现的AOP功能的封装与配置的小框架.加深对动态代理和AOP编程的理解 获取源码,学习交流,那就加入小编的学习交流群吧!616 959 444 设计 根据配置文件的键xxx对应的值(类全名)创建相

ajax:在jquery基础上又封装了一个ajax

1.2是正确的,4是前端错误,404,url错误,找不到路径,5是服务器端错误 2.多个表单需要提交所以用到了表单序列化 3. 4.post请求也可以?+参数,但是不见这样写, 5.load:把远程服务端的数据加载到客户端 6.返回信息放在最后的function中,xhr是一个返回对象,所有信息都在里面,status是返回状态 7.post和get不管请求成功还是失败都有值,ajax中写的success是请求成功才有参数 8.提交表单,浏览器支持的默认方式是submit的,如果type是butt

封装一个自己的 Ajax小框架

框架代码如下: // 使用封装方法的人只关心提供http的请求方法,url地址,数据,成功和失败的回调方法 // 类的构造定义,主要职责就是新建出 XMLHttpRequest 对象 var MyXMLHttpRequest = function () { var xmlhttprequest; if (window.XMLHttpRequest) { xmlhttprequest = new XMLHttpRequest(); if (xmlhttprequest.overrideMimeTy

使用原生JS实现一个风箱式的demo,并封装了一个运动框架

声明,该DEMO依托于某个培训机构中,非常感谢这个培训结构.话不多说,现在开始改demo的制作. 首先,在前端的学习过程中,轮播图是我们一定要学习的,所以为了更加高效的实现各种轮播图,封装了一个运动的框架. 1 function getStyle(obj,attr) { 2 if(obj.currentStyle){ 3 return obj.currentStyle[attr];//为了获取IE下的属性值 4 }else{ 5 return window.getComputedStyle(ob

封装自己的Ajax框架

Ajax技术就是利用javascript和xml实现异步交互的功能. 首先先来介绍一下Ajax相关知识点 一.Ajax对象的创建 1.创建Ajax对象的方式 a.第一种方式是针对IE浏览器 b.第二种方式针对w3c:在IE的高版本(IE8+),已经支持了XMLHttpRequest类 2.解决兼容性 a.创建公共文件 public.js b.在需要使用ajax对象的页面中,包含以上js文件 二.ajax对象的相关属性和方法 方法: 1.初始化ajax对象 open(method,url)  me

封装一个Ajax工具函数

/*封装一个ajax工具函数*/ window.$ = {}; /*通过$定义一个ajax函数*/ /* * 1. type   string   请求的方式  默认是get * 2. url    string   请求地址  接口地址 * 3. async  boolean  默认的是true * 4. data   object   {}请求数据 * * 5.success function  成功回调函数 * 6.error   function  失败的回调函数 * */ $.ajax

分析一个类似于jquery的小框架

在网上下了一个类似于jQuery的小框架,分析源码,看看怎么写框架. 选择器Select //用沙箱闭包其整个代码,只有itcast和I暴漏在全局作用域 (function( window , undefined){ //Itcast函数,参数:selector.返回值一个Itcast对象,功能:new Itcast.prototype.init() function Itcast(selector){ return new Itcast.prototype.init(); } // Itcas

java创建一个简单的小框架frame

import java.awt.*; import javax.swing.*; public class SimpleFrameTest { public static void main(String[] args) { EventQueue.invokeLater(new Runnable(){ // 开一个线程 public void run() { SimpleFrame frame = new SimpleFrame(); frame.setTitle("记事本"); //

简单模拟jQuery创建对象的方法,以及封装一个js动画框架

今天无事点开了N年未点开的慕课网,看了一个js动画框架的视频,心血来潮用jQuery的方法封装了一下,虽然不如jQuery,但是还是有点点所获. 什么都不说,直接上代码: /** * 这是框架的唯一对象,使用jQuery框架的创建方法 * @class MyAnimation * @constructor */ function MyAnimation(Selector){ //返回MyAnimation原型链中init()方法创建的对象 return new MyAnimation.proto