【前端学习笔记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 ...
随机推荐
- Oracle入门第六天(下)——高级子查询
一.概述 主要内容: 二.子查询介绍 1.简单子查询(WHERE子查询) SELECT last_name FROM employees WHERE salary > (SELECT salar ...
- Oracle入门第五天(下)——数据库其他对象
一.概述 其他数据库对象 主要掌握的为序列 二.序列 1.什么是序列 序列: 可供多个用户用来产生唯一数值的数据库对象 自动提供唯一的数值 共享对象 主要用于提供主键值 将序列值装入内存可以提高访问效 ...
- # 2016-2017-2 20155319 《Java程序设计》实验四Android程序开发实验报告
2016-2017-2 20155319 <Java程序设计>实验四Android程序开发实验报告 实验一 实验内容 Android Stuidio的安装测试: 参考<Java和An ...
- 20155323 第三次实验 敏捷开发与XP实践
20155323 第三次实验 敏捷开发与XP实践 实验内容 XP基础 XP核心实践 相关工具 实验要求 没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim编辑器 ...
- 人脸识别引擎SeetaFaceEngine简介及在windows7 vs2013下的编译
SeetaFaceEngine是开源的C++人脸识别引擎,无需第三方库,它是由中科院计算所山世光老师团队研发.它的License是BSD-2. SeetaFaceEngine库包括三个模块:人脸检测( ...
- 可能是全网首个支持阿里云Elasticsearch Xapck鉴权的Skywalking
可能是全网首个支持阿里云Elasticsearch Xapck鉴权的Skywalking 对Skywalking有兴趣的同学参见:年轻人的第一个APM-Skywalking 之前在搭建Skywalki ...
- Django之Models的class Meta
模型元数据是“任何不是字段的数据”,比如排序选项(ordering),数据库表名(db_table)或者人类可读的单复数名称(verbose_name 和verbose_name_plural).在模 ...
- Python小白学习之基础知识(个人笔记)
介绍while else的使用,这个不常用 格式化输出 while esle ,当循环内有break语句时,不执行else语句,当没有break语句时,执行完while循环,然后执行else下面的语句 ...
- 移动端车牌识别/车牌OCR识别
周末,小编约了朋友商场shopping. 开车进地下车库时,“滴”的一声,完成车牌录入:开车离开时,扫描二维码,输入车牌,完成停车收费.小编不禁感叹科技改变生活,人工智能给生活带来的便利. 车牌自动识 ...
- selenium webdriver API详解(三)
本系列主要讲解webdriver常用的API使用方法(注意:使用前请确认环境是否安装成功,浏览器驱动是否与谷歌浏览器版本对应) 一:获取页面元素的文本内容:text 例:获取我的博客名字文本内容 代码 ...