ajax请求封装,封装的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]+¶m[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.οnblur= 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层如何处理，这儿就不过多阐释了
mui封装的ajax请求
由于项目中引进MUI框架,所以就不需要引进jquery,但需要和后台交互时,常写为jquery格式:所以笔者觉得有必要将mui封装的ajax请求在这里提一下: 1,mui框架基于htm5plus的XM ...
简单封装的ajax请求
简单封装了一个ajax请求,做一下统一处理,少写重复代码,只是一个初步的代码,没有经过优化. $.extend({ myAjax: function (option, rollBack) { var ...
ES6封装原生ajax请求
http (data) { return new Promise((resolve, reject) => { var xhr = new XMLHttpRequest(); xhr.onrea ...
spring security：ajax请求的session超时处理
当前端在用ajax请求时,如果没有设置session超时时间并且做跳转到登录界面的处理,那么只是靠后台是很难完成超时的一系列动作的:但是如果后台 没有封装一个ajax请求公共类,那么在ajax请求上下 ...
原生AJAX请求教程
ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...
原生 ajax 请求
ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...
ajax请求的封装
前端的工作,免不了要用到交互,请求后端的数据,可能大多人一直选择用jq封装好的方法直接使用,要知道封装这个事我们自己也可以的,今天给大家介绍一种封装方法,而且连跨域问题都不在话下,有了这个函数,是不是 ...
ajax请求原理及jquery $.ajax封装全解析
.ajax原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其中最关键的一步就是从服务器获得 ...
使用es6的then()方法封装jquery的ajax请求
使用场景: jsp页面中使用jquery的ajax请求比较频繁,以前vue框架的项目用过axios,所以就想着用then()封装一个公共请求的方法,这样每次请求就不用那么麻烦的写一大堆请求参数了. 示 ...
随机推荐
OO.A.D.P
OO/A/D/P 对象和类 三大特征 对象: 对象是面向对象语言的一个极为重要的特点,所有的面向对象语言都有对象的共性. 1. 职责(单一) 2. 属性(数据.可改变的) 3. 函数(行为.方法.业务 ...
Lucene 3.0
http://www.cnblogs.com/forfuture1978/archive/2010/02/22/1671487.html http://www.cnblogs.com/jiekzou/ ...
java集合_collection子接口 list的特有方法，ArrayList类体现
/* Collection |--List:元素是有序的,元素可以重复.因为该集合体系有索引. |--ArrayList:底层的数据结构使用的是数组结构.特点:查询速度很快.但是增删稍慢.线程不同步. ...
136 Single Number(找唯一数Medium)
题目意思:一个int数组,有一个数只出现一次,其他数均出现两次,找到这个唯一数 知识普及:~:非运算,单目运算符1为0,0为1; &:与运算,都为1则为1,否则为0 |:或运算,全为0则为 ...
POJ2063 Investment 【全然背包】
Investment Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 8019 Accepted: 2747 Descri ...
mysql用户创建及授权
一. 创建用户: 命令:CREATE USER 'username'@'host' IDENTIFIED BY 'password'; 说明:username - 你将创建的用户名, host - 指 ...
01-学前入门.Net两种交换模式
C/S:客户机(Client)/服务器模式(Server)Winfrom应用程序 B/S:浏览器(Browser)/服务器模式(Server)Internet应用模式
在 CSS 中使用特征查询