//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. 20155212 实验二 Java面向对象程序设计

    20155212 实验二 Java面向对象程序设计 单元测试 三种代码 用编程去解决问题,必须学会写三种码: 伪代码 产品代码 测试代码 例: MyUtil 类解决一个百分制成绩转成"优.良 ...

  2. 20155333 2016-2017-2《Java程序设计》课程总结

    20155333 2016-2017-2<Java程序设计>课程总结 (按顺序)每周作业链接汇总 预备作业1:你期望的师生关系是什么? 预备作业2:体会做中学(Learing By Doi ...

  3. 【SHOI2008】堵塞的交通

    题面 题解 这里提供几种不用脑子的算法(当然是离线的): $\text{LCT}$ 记下每条边的删除时间,用$\text{LCT}$维护最大生成树,每次加进一条边时,跟原来那条链上的做比较,删除那条删 ...

  4. Pandas v0.23.4手册汉化

    Pandas手册汉化 此页面概述了所有公共pandas对象,函数和方法.pandas.*命名空间中公开的所有类和函数都是公共的. 一些子包是公共的,其中包括pandas.errors, pandas. ...

  5. Spring学习(十三)-----Spring 表达式语言(Spring EL)

    本篇讲述了Spring Expression Language —— 即Spring3中功能丰富强大的表达式语言,简称SpEL.SpEL是类似于OGNL和JSF EL的表达式语言,能够在运行时构建复杂 ...

  6. 用php做个简单的日历

    存档: index.php <html> <head> <title>日历</title> <style> table{border:1px ...

  7. Jmeter直连postgresql数据库进行压测

    关于Jmeter直连数据库进行压测,网上有好多教程了,pg数据库的相对少一些,今天自己测试了下,还是挺简单的,有个别需要注意的地方.相较于Loadrunner这么全面庞大的压测工具,Jmeter在数据 ...

  8. UGUI简易摇杆

    实现 直接使用系统自带圆形控件图标 编写脚本, 实现UGUI拖拽事件 将多拽范围限定于给定半径和圆心的圆内 计算出等同于Input.GetAxis()的值,直接控制被控制物体 代码 using Sys ...

  9. 电脑提示‘您需要来自Administration的权限才能对此文件夹进行更改’怎么删除文件

    电脑提示'您需要来自Administration的权限才能对此文件夹进行更改'怎么删除文件 应该怎么做 win7系统需要定期删除一些无用的文件,扩大内存空间,但是在删除文件的时候弹出提示"您 ...

  10. 5.airflow问题

    1. Traceback (most recent call last): File "/usr/bin/airflow", line 28, in <module> ...