【前端学习笔记04】JavaScript数据通信Ajax方法封装
//Ajax 方法封装
//设置数据格式
function setData(data){
if(!data){
return '';
}
else{
var arr = [];
for(k in data){
if(!data.hasOwnProperty(k)) continue;
if(typeof data[k] == 'function') continue;
var value = data[k].toString();
var key = encodeURIComponent(k);
value = encodeURIComponent(value);
arr.push(key + '=' + value);
}
return arr.join('&');
}
}
//get()方法封装
function get(url,obj,callback){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}
else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
url = url + '?'+ setData(obj);
xhr.open('get',url,true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
callback(xhr.responseText);
}
}
}
xhr.send(null);
} //post()方法封装
function post(url,obj,callback){
var xhr = null;
var postBody = setData(obj);
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}
else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.open('post',url,true);
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
callback(xhr.responseText);
}
}
}
xhr.send(postBody);
}
【前端学习笔记04】JavaScript数据通信Ajax方法封装的更多相关文章
- 前端学习笔记汇总(之merge方法)
学习笔记 关于Jquery的merge方法 话不多说,先上图 使用jquery时,其智能提示如上,大概意思就是合并first和second两个数组,得到的结果是first+(second去重后的结果) ...
- Web前端学习笔记之JavaScript、jQuery、AJAX、JSON的区别
官网的英文解释: javascript和jQuery有点关系,js是一种脚本语言,主要用于客户端,现在主要用于实现一些网页效果. jquery是js的一个库,你可以认为是对js的补充,提供了很多方便易 ...
- 前端学习笔记之JavaScript
JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中),后将其改名ScriptEase(客 ...
- 【前端学习笔记】JavaScript 常用方法兼容性封装
获取样式函数封装 function getStyle(ele,attr){ if(ele.currentStyle){ return ele.currentStyle[attr]; } else{ r ...
- 【前端学习笔记】JavaScript 小案例合集
获取一个0-9的随机数: Math.round(Math.random()*9); 去除数组中重复的元素: var arr=[1,3,5,4,3,3,1,4] function editArr(arr ...
- 【前端学习笔记】JavaScript JSON对象相关操作
//JSON方法 //JSON.parse(); var json = '{"name":"zj","age":23}'; JSON.par ...
- 【前端学习笔记】2015-09-02 附~~~~~ajax简单请求和获得响应结果
首先得创建一个请求XMLHttpRequest对象,var xmlhttp=window.XMLHttpRequest?new XMLHttpRequest() : new ActiveXObjec ...
- 【前端学习笔记】2015-09-01 附 split()方法、readyState
1.split():作用对象是一个字符串或者字符串对象,会要求设置两个参数(分割点(separator),分割出来的数量(number)),ps:1."2:3:4:5".split ...
- Java程序猿的JavaScript学习笔记(9—— jQuery工具方法)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
随机推荐
- 20145234黄斐《Java程序设计》第九周
教材学习内容总结 整合数据库 JDBC入门 JDBC是用于执行SQL的解决方案,开发人员使用JDBC的标准接口,数据库厂商则对接口进行操作,开发人员无须接触底层数据库驱动程序的差异性,数据库本身是个独 ...
- R的数据读写
目录 1 简介 在使用任何一款数据分析软件的时候,首先要做的就是数据成功的读写问题,所以不同于其他文档的书写方法,本文将探讨如何读写本地文本文件. 2 运行环境 操作系统:Win10 R版本:R-3. ...
- Flutter系列博文链接
Flutter系列博文链接 ↓: Flutter基础篇: Flutter基础篇(1)-- 跨平台开发框架和工具集锦 Flutter基础篇(2)-- 老司机用一篇博客带你快速熟悉Dart语法 Flutt ...
- protobuf工程的编译以及使用
一. 获取Protocol Buffer 1.1 获得源码 Github:ProtocolBuffer源码 Git clone之:git clone https://github.com/google ...
- 自己通过Cygwin编译的windowsx86下的更新至4.0.1
采用方法:https://my.oschina.net/maxid/blog/186506 方法中在3.2.6未找到src/redis.h文件 未修改 方法中 /deps/hiredis/net.c ...
- [原创软件]PC端与移动端文件信息互通工具
一个不小心,花了几个小时,就做出来了一个专利,这不科学啊... 软件主要功能: 跨平台(已适配Mac.Windows)远程连接手机端和PC端 远程执行shell命令 远程和本地文件实现互通传输共享 显 ...
- Web自动化常用方法封装(不定时更新)
/** * JScript实现鼠标悬停 */public void mouseHoverJScript(By by,WebElement HoverElement) { // TODO Auto-ge ...
- InTelliJ 字体调整
Java IDE 工具InTelliJ 调整字体大小 1.File -> Settings 2.左上的搜索框中输入 font. 等待自动查找结果. 3.修改size 大小
- Pycharm主菜单学习
“工欲善其事,必先利其器”,这话我一直是这么坚信的! 找到一款顺手称心的工具,拥有它,熟练地使用它! Pycharm据说就是使用Python的一款最好的工具—— 于是,开始了第一步的学习----先从熟 ...
- SQL行列乾坤大挪移
“生活总是这样,有时候,你需要一个苹果,但别人却给了你一个梨.” 今天dalao邮件里需要添加一张每月累计长长的图,可是,拿到手上的SQL导出数据不符合我最爱的pyecharts的数据输入格式,头大. ...