//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方法封装的更多相关文章

  1. 前端学习笔记汇总(之merge方法)

    学习笔记 关于Jquery的merge方法 话不多说,先上图 使用jquery时,其智能提示如上,大概意思就是合并first和second两个数组,得到的结果是first+(second去重后的结果) ...

  2. Web前端学习笔记之JavaScript、jQuery、AJAX、JSON的区别

    官网的英文解释: javascript和jQuery有点关系,js是一种脚本语言,主要用于客户端,现在主要用于实现一些网页效果. jquery是js的一个库,你可以认为是对js的补充,提供了很多方便易 ...

  3. 前端学习笔记之JavaScript

    JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中),后将其改名ScriptEase(客 ...

  4. 【前端学习笔记】JavaScript 常用方法兼容性封装

    获取样式函数封装 function getStyle(ele,attr){ if(ele.currentStyle){ return ele.currentStyle[attr]; } else{ r ...

  5. 【前端学习笔记】JavaScript 小案例合集

    获取一个0-9的随机数: Math.round(Math.random()*9); 去除数组中重复的元素: var arr=[1,3,5,4,3,3,1,4] function editArr(arr ...

  6. 【前端学习笔记】JavaScript JSON对象相关操作

    //JSON方法 //JSON.parse(); var json = '{"name":"zj","age":23}'; JSON.par ...

  7. 【前端学习笔记】2015-09-02 附~~~~~ajax简单请求和获得响应结果

    首先得创建一个请求XMLHttpRequest对象,var  xmlhttp=window.XMLHttpRequest?new XMLHttpRequest() : new ActiveXObjec ...

  8. 【前端学习笔记】2015-09-01 附 split()方法、readyState

    1.split():作用对象是一个字符串或者字符串对象,会要求设置两个参数(分割点(separator),分割出来的数量(number)),ps:1."2:3:4:5".split ...

  9. Java程序猿的JavaScript学习笔记(9—— jQuery工具方法)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

随机推荐

  1. 20145234黄斐《Java程序设计》第九周

    教材学习内容总结 整合数据库 JDBC入门 JDBC是用于执行SQL的解决方案,开发人员使用JDBC的标准接口,数据库厂商则对接口进行操作,开发人员无须接触底层数据库驱动程序的差异性,数据库本身是个独 ...

  2. R的数据读写

    目录 1 简介 在使用任何一款数据分析软件的时候,首先要做的就是数据成功的读写问题,所以不同于其他文档的书写方法,本文将探讨如何读写本地文本文件. 2 运行环境 操作系统:Win10 R版本:R-3. ...

  3. Flutter系列博文链接

    Flutter系列博文链接 ↓: Flutter基础篇: Flutter基础篇(1)-- 跨平台开发框架和工具集锦 Flutter基础篇(2)-- 老司机用一篇博客带你快速熟悉Dart语法 Flutt ...

  4. protobuf工程的编译以及使用

    一. 获取Protocol Buffer 1.1 获得源码 Github:ProtocolBuffer源码 Git clone之:git clone https://github.com/google ...

  5. 自己通过Cygwin编译的windowsx86下的更新至4.0.1

    采用方法:https://my.oschina.net/maxid/blog/186506 方法中在3.2.6未找到src/redis.h文件 未修改 方法中 /deps/hiredis/net.c ...

  6. [原创软件]PC端与移动端文件信息互通工具

    一个不小心,花了几个小时,就做出来了一个专利,这不科学啊... 软件主要功能: 跨平台(已适配Mac.Windows)远程连接手机端和PC端 远程执行shell命令 远程和本地文件实现互通传输共享 显 ...

  7. Web自动化常用方法封装(不定时更新)

    /** * JScript实现鼠标悬停 */public void mouseHoverJScript(By by,WebElement HoverElement) { // TODO Auto-ge ...

  8. InTelliJ 字体调整

    Java IDE 工具InTelliJ 调整字体大小 1.File -> Settings 2.左上的搜索框中输入 font. 等待自动查找结果. 3.修改size 大小

  9. Pycharm主菜单学习

    “工欲善其事,必先利其器”,这话我一直是这么坚信的! 找到一款顺手称心的工具,拥有它,熟练地使用它! Pycharm据说就是使用Python的一款最好的工具—— 于是,开始了第一步的学习----先从熟 ...

  10. SQL行列乾坤大挪移

    “生活总是这样,有时候,你需要一个苹果,但别人却给了你一个梨.” 今天dalao邮件里需要添加一张每月累计长长的图,可是,拿到手上的SQL导出数据不符合我最爱的pyecharts的数据输入格式,头大. ...