【前端学习笔记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 ...
随机推荐
- linux编程实现pwd命令
linux编程实现pwd命令 在linux中,一切皆文件.目录其实也是一种文件,只不过这种文件比较特殊,它里面存储的是一张对应表,即文件名和i节点的对应关系表,而i节点才是记录此文件详细信息的结构,如 ...
- 20155318 2016-2017-2 《Java程序设计》第一周学习总结
20155318 2016-2017-2 <Java程序设计>第一周学习总结 教材学习内容总结 上周总结 上周学习了一些大学的学习方法,比如知识分为为三种:元知识.软知识和硬知识,讲述技能 ...
- [arc076F]Exhausted?
Description 传送门 Solution 额外的椅子可以放置在任意实数位置,所以该问题其实就问最多能够有多少人坐下.由于每个人的需求有<=l和>=r两个限制,并不是很好下手,我们先 ...
- 【LG3238】 [HNOI2014]道路堵塞
题目描述 给你一张\(N\)个点.\(M\)条边的有向图,按顺序给定你一条有\(L\)条边的\(1\rightarrow n\)的最短路, 每次断掉这\(L\)条边中的一条(不对后面答案产生影响),求 ...
- Nginx入门篇(五)之LNMP环境应用
一.LNMP组合工作原理 (1)用户通过浏览器输入域名请求Nginx web服务: (2)Nginx对请求的资源进行判断,如果是静态资源,则由Nginx返回给用户:如果是动态请求(.php文件),那么 ...
- JS的发布订阅模式
JS的发布订阅模式 这里要说明一下什么是发布-订阅模式 发布-订阅模式里面包含了三个模块,发布者,订阅者和处理中心.这里处理中心相当于报刊办事大厅.发布者相当与某个杂志负责人,他来中心这注册一个的杂志 ...
- linux部署MantisBT(一)部署apache
一.部署apache 1.下载apache安装包及依赖包 http://httpd.apache.org/download.cgi#apache24(apache2)http://apr.apache ...
- [C++] Solve "Launch Failed. Binary not found." error on Eclipse
This error is that the default lanch configuration is not being created for this project. To solve i ...
- Alpha发布用户使用报告
此作业要求参见:[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2325] 组名:可以低头,但没必要 组长:付佳 组员:张俊余 李文涛 孙 ...
- 《C》指针
储存单元: 不同类型的数据所占用的字节不同,上面一个长方形格子表示4个字节 变量: 变量的值,就是存储的内容.变量的名就相当于地址的名.根据变量类型分配空间:通过变量名引用变量的值,程序经过编译将变量 ...