在做登录注册这类提交表单数据时,我们经常需要局部刷新网页来验证用户输入的信息,这就需要用到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层如何处理,这儿就不过多阐释了

封装的ajax请求的更多相关文章

  1. mui封装的ajax请求

    由于项目中引进MUI框架,所以就不需要引进jquery,但需要和后台交互时,常写为jquery格式:所以笔者觉得有必要将mui封装的ajax请求在这里提一下: 1,mui框架基于htm5plus的XM ...

  2. 简单封装的ajax请求

    简单封装了一个ajax请求,做一下统一处理,少写重复代码,只是一个初步的代码,没有经过优化. $.extend({ myAjax: function (option, rollBack) { var ...

  3. ES6封装原生ajax请求

    http (data) { return new Promise((resolve, reject) => { var xhr = new XMLHttpRequest(); xhr.onrea ...

  4. spring security:ajax请求的session超时处理

    当前端在用ajax请求时,如果没有设置session超时时间并且做跳转到登录界面的处理,那么只是靠后台是很难完成超时的一系列动作的:但是如果后台 没有封装一个ajax请求公共类,那么在ajax请求上下 ...

  5. 原生AJAX请求教程

    ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...

  6. 原生 ajax 请求

    ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...

  7. 学习AJAX必知必会(4)~JQuery发送Ajax请求

    一.JQuery发送Ajax请求 ■ 对于get和post请求,jQuery内部封装了Ajax请求的4个步骤和数据格式的设置 ■ 对于Ajax通用请求,jQuery内部封装了Ajax请求的4个步骤和数 ...

  8. ajax请求的封装

    前端的工作,免不了要用到交互,请求后端的数据,可能大多人一直选择用jq封装好的方法直接使用,要知道封装这个事我们自己也可以的,今天给大家介绍一种封装方法,而且连跨域问题都不在话下,有了这个函数,是不是 ...

  9. ajax请求原理及jquery $.ajax封装全解析

    .ajax原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其中最关键的一步就是从服务器获得 ...

随机推荐

  1. java环境变量的设置

    java安装好后需要配置一下环境变量,配置方法如下: 1.在系统变量里添加两条记录: 1)变量名:JAVA_HOME,变量值为java安装路径,如:C:\Program Files\Java\jdk1 ...

  2. Java生成和操作Excel文件(转载)

    Java生成和操作Excel文件   JAVA EXCEL API:是一开放源码项目,通过它Java开发人员可以读取Excel文件的内容.创建新的Excel文件.更新已经存在的Excel文件.使用该A ...

  3. Webform 文件上传、 C#加图片水印 、 图片验证码

    文件上传:要使用控件 - FileUpload 1.如何判断是否选中文件? FileUpload.FileName - 选中文件的文件名,如果长度不大于0,那么说明没选中任何文件 js - f.val ...

  4. Infinite V2 Release Note

    游戏地址 PLAY 玩法说明 - WASD 控制角色移动 - 按下J键 进入攻击模式(WASD 可以继续移动) 更新内容 - 完成角色锁定目标后边移动边攻击 开发心得 状态机的设计 最初的设计很乱, ...

  5. Dev用于界面按选中列进行分组统计数据源(实用技巧)

    如果有用U8的可以明白这个功能就是模仿他的统计功能.我不过是把他造成通用的与适应于DEV的. (效率为6000条数据分组统计时间为3秒左右分组列过多5秒.1000条以下0.几秒,500条下0.00几秒 ...

  6. Buge's Fibonacci Number Problem

    Buge's Fibonacci Number Problem Description snowingsea is having Buge’s discrete mathematics lesson, ...

  7. Hadoop: Hadoop Cluster配置文件

    Hadoop配置文件 Hadoop的配置文件: 只读的默认配置文件:core-default.xml, hdfs-default.xml, yarn-default.xml 和 mapred-defa ...

  8. node 异步编程

    node 异步编程 我了解到的node异步编程可分成: 1.回调函数 2.pub/sub模式(发布/订阅模式) 3.promise 4.generator 5.async await 一.直接回调函数 ...

  9. 【笔记】科普createDocumentFragment() 创建文档碎片节点

    上一篇文章说到了动态添加文本节点的方法那如果我们要添加多个文本节点或者元素节点呢? 大家可能会想到用循环然后逐个逐个添加 但是别忘了js 还提供了创建一个文本碎片的方法 createDocumentF ...

  10. 用ajax提交数据到后台以便下载,但是不能下载

    在js里面,把一段数据通过post提交给后台,经过后台解析处理,把他以输出流写给浏览器.会发现没得下载提示. 个人觉得是ajax不能解析返回的response里面的流. 如果数据比较大,像post过去 ...