XMLHttpRequest这个对象的属性有onreadystatechange 每次状态改变所触发事件的事件处理程序;
readyState 对象状态值0(未初始化状态)对象已建立或已被abort()方法重置,尚未调用open方法。
代码实现
var _url=www.***.com;//请求地址
function ajax(conf) { //ajax封装,url参数必填,
var url=conf.url.indexOf('http://')>=0 || conf.url.indexOf('https://')>=0?conf.url:(_url+conf.url);
var data=conf.data;
var send_data=[];//封装后的数据
var async=conf.async!=undefined ? conf.async : true;// ture为异步请求
var type=conf.type || 'get';
var dataType=conf.dataType || 'json';
var contenType = conf.contenType || 'application/x-www-form-urlencoded';
var beforeSend=conf.beforeSend;//post请求头部
var success=conf.success;
var error=conf.error;
if(data==null){
send_data="";
}else if( typeof data=="object"){//如果data是对象,转换为字符串
for (var k in data){
//send_data.push(k + '=' + data[k]);
send_data.push(encodeURIComponent(k) + '=' + encodeURIComponent(data[k]));
}
send_data=send_data.join('&');
}
var xhr=""; // 创建ajax引擎对象
try {
xhr=new ActiveXObject("microsoft.xmlhttp"); //IE内核系列浏览器
}catch(e1){
try {
xhr=new XMLHttpRequest(); //非IE内核浏览器
}catch(e2){
if(error!=null){error("您的浏览器不支持ajax!请更换!");}
}
}
if(type=="get"){
xhr.open(type, url+'?'+send_data, async);
xhr.send(null);
}else{//post,put,delete等请求
xhr.open(type, url, async);
xhr.setRequestHeader("content-type", contenType);
if(beforeSend!=null && beforeSend!=undefined){
beforeSend(xhr);
}
xhr.send(send_data);
}
xhr.onreadystatechange=function() {
if(xhr.readyState==4){
if(xhr.status>=200 && xhr.status<300){
if(dataType=="text" && success!=null){
success(xhr.responseText);
};
if(dataType=="xml" && success!=null){
success(xhr.responseXML);
};
if(dataType=="json" && success!=null){
success(eval("(" + xhr.responseText + ")")); //将json字符串转换为js对象
};
}else{
if(error!=null){error("通讯失败!请联系网站管理员,错误代码:"+xhr.status);}
}
}
};
},
使用方法
ajax({
url:'',//地址
type:'post',//方式
data:{},//数据
success:function(r){
},
error:function(r){
}
});
JavaScript两行代码实现DOM属性的封装以及交换两个变量的值。编程的时候不要忘记思考,否则你就只是一个完成工作的机器。所以,如果你现在的工作只是让你疯狂做业务而不给你思考和学习的时间,别犹豫,换一个。
vue的v-model是一个十分强大的指令,它可以自动让input里的值自动和你设定的值进行绑定,它是如何实现的呢?其实v-model只不过是一个语法糖而已,真正的实现靠的还是:(1) v-bind:绑定响应式数据,(2) 触发 input 事件 并传递数据 (重点)
目前前端三大框架(Vue.js, Angular.js, React.js)都在引领着前端的组件化开发方向,组件化的前端开发方式的确为业务实现带来了前所未有的方便,其实组件化开发早已经具有(YUI),但如何封装一个优秀的组件,可能并不是每位前端开发者都能够做好的。
JS 中使用 fetch 更加高效地进行网络请求,由于fetch 的请求方式同 $ajax 和 axios 都不太一样,为了方便请求过程,进行Fetch网络封装类:方式一传统使用回调函数的方式、方式二借助ES6中的promise的方式封装。
在日常开发中,我们少不了使用 Promise,而透过封装抽象方法,可以避免造轮子,写出更加优雅的代码。例如:将任意函数,化为具有异步能力的函数、改装成具有并发上千万请求的函数、使用 Web Worker 来使用不同线程、暂停若干秒再继续
最近做了同一个样子的小程序的支付宝版本,现在如果想想是开发两次的话心里应该是很难受的。去年11月12月份左右开发了两个微信小程序是一个在超市买商品的,一个用户版本,一个商户版本的。我们团队看到了uniapp这个东西
当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次, 如果设定时间到来之前,又触发了事件,就重新开始延时。也就是说当一个用户一直触发这个函数,且每次触发函数的间隔小于既定时间
这个时候就要说each了,还是之前的,倘若页面上有N个class为div的元素呢,即:this.length>1,这里each就必然要上场了,且每个对象都要返回,所以此段代码无疑是最方便的写法了
ajax 的全称是Asynchronous JavaScript and XML,简单理解下:ajax就是异步的js和服务端的数据;GET请求的数据会附在URL之后, 以 ? 分割URL和传输数据, 参数之间以 & 相连
JS是一种基于对象的语言,在JS中几乎所有的东西都可以看成是一个对象,但是JS中的对象模型和大多数面向对象语言的对象模型不太一样,因此理解JS中面向对象思想十分重要,接下来本篇文章将从多态、封装、继承
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!