//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. 20155215 《Java程序设计》实验一(Java开发环境的熟悉)实验报告

    20155215 <Java程序设计>实验一(Java开发环境的熟悉)实验报告 实验要求 1.没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim编辑 ...

  2. mini dc课堂练习补交

    实验截图 实验代码 import java.util.StringTokenizer; import java.util.Stack; public class MyDC { /** * consta ...

  3. 学号20155311 2016-2017-2 《Java程序设计》第10周学习总结

    学号20155311 2016-2017-2 <Java程序设计>第10周学习总结 教材学习内容总结 网络编程 网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据 计算机网络 路 ...

  4. gdb调试带参数程序

    一般来说GDB主要调试的是C/C++的程序.要调试C/C++的程序,首先在编译时,我们必须要 把调试信息加到可执行文件中.使用编译 器(cc/gcc/g++)的 -g 参数可以做到这一点.如: > ...

  5. AWVS11提取规则文件

    在这里给大家分享一个获取AWVS规则文件的思路.  目前我提取的是17年4月份的扫描规则.   后面如果规则更新,可以自行提取 官网:   https://www.acunetix.com/vulne ...

  6. logstash处理@timestamp时区

    input { stdin { } } filter { #ruby { # code => "event.set('timestamp', event.get('@timestamp ...

  7. Maven学习(六)-----Maven仓库的详细介绍

    Maven仓库的详细介绍 在Maven中,任何一个依赖.插件或者项目构建的输出,都可以称之为构件.Maven在某个统一的位置存储所有项目的共享的构件,这个统一的位置,我们就称之为仓库.(仓库就是存放依 ...

  8. Appium+python HTML测试报告(1)(转)

    (原文:https://www.cnblogs.com/fancy0158/p/10054632.html) 测试任务执行完成后,我们需要一份通俗易懂的测试报告来展示自动化测试的结果. HTMLTes ...

  9. RabbitMQ各协议异同详解

    一.官网介绍 Which protocols does RabbitMQ support? RabbitMQ supports several messaging protocols, directl ...

  10. Kibana TypeError : Object #<GlobalState> has no method 'setDefaults'

    在windows server中装完elasticsearch和kibana后,elasticsearch能正常访问(http://localhost:9200): 而访问kibana的地址(http ...