封装的ajax请求

在做登录注册这类提交表单数据时,我们经常需要局部刷新网页来验证用户输入的信息,这就需要用到ajax请求,我们通常需要获取表单中的数据,发起ajax请求,通过服务程序,与数据库的数据进行比对,判断信息的正确与否。这儿也将ajax请求进行了封装,当我们在项目中需要多次ajax请求时,就可以用封装的函数了,不用每次都写ajax请求,提高了代码的利用率和工作效率。当然封装得不一定很完美,网上也有很多优秀的封装好的ajax请求。也是通过闭包思想,具体的封装思路,在代码注释中也写得很详细了

这是封装的ajax请求

var dajax=function(){
        function createAjax(){
            //创建XHR对象
           var xhr;
            if(window.XMLHttpRequest){
                xhr=new XMLHttpRequest();
            }
            else if(window.ActiveXObject){
                xhr=new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xhr;
        }
        //ajax请求
        function ajaxRequest(obj){
            /*
             * success:成功时的处理
             * asyn:同步还是异步
             * method:get还是post方式
             * url:地址(路径)
             * */
            //XHR请求
//            var xhr=createAjax();//执行创建XHR对象
            //xhttpr=xhr;
            var xhr=obj.xhr;//用xhr接收传入的变量名,此xhr与createAjax()中的xhr不同
            xhr.onreadystatechange=obj.success;
            if(obj.asyn=="undefined"){
                obj.asyn=true;//异步
            }
            var ddParam=[];//定义一个数组,用来存放ajax请求传递的参数
            for(key in obj.param){
                ddParam.push(key+"="+obj.param[key]);
            }
            var dataParam=ddParam.join("&");//多个参数之间用&分割
            //console.log(dataParam);
            if(obj.method=="get"){
                //obj.url=obj.url+"?username="+obj.param[0];//param[0]+&param[1]
                obj.url=obj.url+"?"+dataParam;
                xhr.open(obj.method,obj.url,obj.asyn);
                xhr.send(null);
            }
            if(obj.method=="post"){
                xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                xhr.open(obj.method,obj.url,obj.asyn);
                xhr.send(dataParam);
            }
        }
        //返回ajaxRequest()方法
        return myAjax={
            ajaxRequest:ajaxRequest,
            createAjax:createAjax
        };
    }

在我们需要发起ajax请求时,则只需要写(这里以登录时,判断用户名或密码是否正确,发起ajax请求为例)

var getAjax=dajax();//封装的ajax方法
    var xhttpr=getAjax.createAjax();//得到创建XHR对象(createAjax())中的xhr,并赋给用自定义的变量,eg:xhttpr
    user.onblur= function () {//例如当登录时,填写用户名,失去焦点时,发送ajax请求,判断是否存在该用户,实现局部刷新
        getAjax.ajaxRequest({
            success:function(){
                //请求成功,用户定义的操作
                if(xhttpr.readyState==4&&xhttpr.status==200){
                if(xhttpr.responseText==‘1‘){
                    user.nextElementSibling.innerHTML=‘‘;
                }
                else{
                    user.nextElementSibling.innerHTML=‘用户名不存在‘;
                }
            }
            },
            method:"get",
            url:"checkuser.do",
            param:{
                name1:user.value,
                name2:"pwd"
            },
            xhr:xhttpr   //把用户定义的这个变量名(xhttpr),传到封装的ajax中
        })
    }

至于发起请求后,服务处理,dao层如何处理,这儿就不过多阐释了

时间: 2024-10-03 13:48:31

封装的ajax请求的相关文章

mui封装的ajax请求

由于项目中引进MUI框架,所以就不需要引进jquery,但需要和后台交互时,常写为jquery格式:所以笔者觉得有必要将mui封装的ajax请求在这里提一下: 1,mui框架基于htm5plus的XMLHttpRequest,封装了常用的Ajax函数,支持GET.POST请求方式,支持返回json.xml.html.text.script数据类型: 本着极简的设计原则,mui提供了mui.ajax方法,并在mui.ajax方法基础上,进一步简化出最常用的mui.get().mui.getJSON

原生与jQuery封装的ajax请求数据及状态码

原生Ajax 请求数据 btn.addEventListener('click',function(){ if(window.XMLHttpRequest){ var xhr = new window.XMLHttpRequest(); }else{ //兼容IE浏览器 var xhr = new ActiveXObject('Microsoft.XMLHTTP'); } //请求方式get/post //请求URL //ture 异步请求:false 同步请求 xhr.open('get','

封装基本的Ajax请求

一.说明 Ajax请求能够对页面进行局部的更新,而不用重新刷新当前浏览的整个页面,使用户体验更好. 实现Ajax请求的方法可以通过JavaScript代码向服务器发出 请求信息,客户端浏览器接收到返 回的Ajax数据,对页面进行 局部的刷新.在这个实现过程中,XMLHttpRequest对象是Ajax 的核心. 虽然jQuery已经将Ajax请求封装得很好了,我们可以非常方 便的使用jQuery库提供的方法($.get(), $.post(),$.ajax()等) 实现Ajax请求,但是本着学习

原生AJAX请求教程

ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异步:指某段程序执行时不会阻塞其它程序执行,其表现形式为程序的执行顺序不依赖程序本身的书写顺序,相反则为同步. XMLHttpRequest 对象 浏览器内建对象,用于在后台与服务器通信(交换数据) ,由此我们便可实现对网页的部分更新,而不是刷新整个页面. 所有现代浏览器(IE7+.Firefox.C

原生js和jquery发送ajax请求及封装

原生js                                   // ajax get 五部曲function ajax_get(url,data){ // 异步对象 var ajax=new XMLHttpRequest(); // 设置url和请求方式 // url方法 如果有数据要把数据拼接到url中?name=jack&age=20 if(data){ url+=?; url+=data; }else{}; ajax.open('get',url); // 发送请求 aja

通用ajax请求方法封装,兼容主流浏览器

ajax简介 没有AJAX会怎么样?普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面.如果没有AJAX,在youku看视频的过程中如果点击了"顶.踩".评论.评论翻页,页面就会刷新,视频就会被打断.开发一个看效果:用<video src="diaosi.mp4" autoplay controls></video>播放视频(只有支持html5的浏览器能播放),然后放一个"赞"按钮的功能(赞的数量存到数据库),看

JS/Jquery:jquery封装ajax请求。

jquery提供了ajax请求,但这个写起来很繁琐,所以我在项目里对其进行了简单封装,为了用起来方便嘛~~~~~ 以后每次都引入这个js文件就可以了: 下面是代码部分: base.js //ajax请求 var ajaxRequest = function () { }; ajaxRequest.prototype = { //初始化设置 url : '', dataType : 'json', data:'', //初始化ajax参数 setUp : function(){ $.ajaxSet

ajax请求封装调用

/* * ajax请求封装 */ function _ajax(url,data,callback){ try { $.ajax({ url:url, type:"POST", data:data, dataType:'json', success:function(data){ try { if(data.code == 0){ mui.alert('保存成功') }else{ mui.toast('保存失败'); } } catch(e) { mui.toast('获取数据失败')

js 实现对ajax请求面向对象的封装

AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 在js中使用ajax请求一般包含三个步骤: 1.创建XMLHttp对象 2.发送请求:包括打开链接.发送请求 3.处理响应 在不使用任何的js框架的情况下,要想使用ajax,可能需要向下面一样进行代码的编写 var xmlHttp = xmlHttpCreate();//创建对象 xmlHttp.onreadysta