封装的一个Ajax小框架

更新日期: 2020-02-12阅读: 1.7k标签: ajax

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

/**
* frameAjax 
* 
* 参数:
* paramsObj: Json
* required params:
* type:请求参数类型(String)
* url:请求地址(String)
* data:请求参数(Json),data可为空值。
* success:请求回调(Function)
* async:表示请求是否异步处理。默认为true,表示异步,可省略不写。
* 
*/

(function () {
    function frameAjax(paramsObj) {
        //处理请求参数
        var arr = [];
        for (var pro in paramsObj.data) {
            arr.push(pro + '=' + paramsObj.data[pro]);
        }
        var data = arr.join("&");  //用“&”拼接请求参数
        var async = true; //默认异步
        if (paramsObj.async) {  //判断是否异步处理
            async = paramsObj.async;
        }

        //创建Ajax引擎对象
        var ajax = getAjax();
        //复写onreadystatement函数
        ajax.onreadystatechange = function () {
            //判断Ajax状态码
            if (ajax.readyState == 4) {
                //判断响应状态码
                if (ajax.status == 200) {
                    if (paramsObj.success) {
                        paramsObj.success(ajax);
                    }
                } else if (ajax.status == 404) {
                    console.error("请求资源不存在");
                } else if (ajax.status == 500) {
                    console.error("服务器繁忙");
                }
            }
        }

        //发送请求
        if (paramsObj.type.toLowerCase() == "get") {
            ajax.open("get", paramsObj.url + (data == null ? "" : "?" + data), async);
            ajax.send(null);
        } else if (paramsObj.type.toLowerCase() == "post") {
            ajax.open("post", paramsObj.url, async);
            ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            ajax.send(data);
        } else {
            console.log("请求类型错误");
        }
    }

    //获取请求对象
    function getAjax() {
        var ajax;
        if (window.XMLHttpRequest) { //火狐
            ajax = new XMLHttpRequest();
        } else if (window.ActiveXObject) { //IE
            ajax = new ActiveXObject("Msxml2.XMLHTTP");
        }
        return ajax;
    }
    //将框架封装于window对象中
    window.frameAjax = frameAjax;
}())


链接: https://www.fly63.com/article/detial/7463

js中关于ajax笔试面试题汇总

什么是ajax?Ajax包含下列技术,为什么要用ajax?Ajax应用程序的优势在于?Ajax的最大的特点是什么?请介绍一下XMLHTTPREQUEST对象?Ajax技术体系的组成部分有哪些?AJAX应用和传统Web应用有什么不同...

Vue通过ajax获取数据,如何避免绑定的数据中出现 property of undefined错误

使用vue开发过程中,通过使用{{}}或者v-text=的形式进行数据绑定,如果数据是通过服务器异步获取的。在控制台我们会发现报这样的错误:Uncaught TypeError: Cannot read property name of null。通过v-if或者空对象来解决

js 判断异步执行完成方法总汇,比如多个ajax执行完毕后执行其他方法

在多个异步操作中,由于不确定异步操作的执行顺序,如何判断异步操作在已经执行完成的情况下,再执行一个新的操作,有哪些方法可以实现?

使用AJAX实现文件拖拽上传功能详解

前端选择文件上传的两种方式:对话框选择方式上传、拖拽选择方式上传;如何上传获取到的文件?使用AJAX即可通过表单方式上传文件。

ajax请求 get与post的区别?_get和post的使用场景

使用Ajax时,采用Get或者Post方式请求服务器,那么它们的区别有哪些呢?相比post,get请求参数跟在url后面,提交数据的长度长度有限制,而且会被浏览器缓存起来,存在一定的安全问题。

IE浏览器关于ajax的缓存机制

IE浏览器对于同一个URL只返回相同结果。因为,在默认情况下,IE会缓存ajax的请求结果。对于同一个URL地址,在缓存过期之前,只有第一次请求会真正发送到服务端。大多数情况下,我们使用ajax是希望实现局部刷新的

使用Ajax同步请求时,等待时间过长增加页面提示问题

后台的处理时间比较长,根据合同的多少可能等待时间比较长,会达到10s左右,这个时候如果不加任何的提示,会导致用户因为没有看到是否执行而导致重复的操作,为了增加用户的体验感,以及项目的完善性,这个时候就需要增加一个等待页面进行提示。

解决ajax跨域访问sessionid不一致问题

根据浏览器的保护规则,跨域的时候我们创建的sessionId是不会被浏览器保存下来的,这样,当我们在进行跨域访问的时候,我们的sessionId就不会被保存下来,也就是说,每一次的请求服务器就会以为是一个新的人

web项目通过ajax提交数据太大报错

ajax提交数据很多的时候报错,web后端没有接收到数据解决方案:经查为tomcat默认限制post提交2M数据。这里需要修改tomcat中大配置文件server.xml文件

ajax的优缺点

ajax异步的js和XML:以前更多的是使用XML的数据格式,现在数据格式更多的是json.;ajax的优势:单页面应用(SPA)无刷新更新数据(局部刷新);异步与服务器通信

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!