原生ajax封装,数据初始化,
var ajaxTool = {
setting : {
method : 'get',
url : location.href,
data : '',
callback : function(){alert('兄弟,你忘记写回掉函数了吧')}
},
ajax :function(json){
//初始化数据
var This = this
this.extend(this.setting,json);
//创建一个xhr对象
var xhr = new XMLHttpRequest();
//格式化数据格式 以字符串键值队的形式传递数据
this.setting.data = this.format(this.setting.data);
//发送请求
if(this.setting.method == 'get'){
this.setting.url += "?" + this.setting.data
this.setting.data = null;
}
xhr.open(this.setting.method,this.setting.url,true);
if(this.setting.method == 'post'){
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
}
//发送请求
xhr.send(this.setting.data)
//监听请求状态
xhr.onreadystatechange = function (){
if(xhr.readyState==4&&xhr.status==200){
var result = JSON.stringify(xhr.responseText) //假设请求的是json文件
result = JSON.parse(result);
This.setting.callback(result);
}
}
},
extend :function(obj1,obj2){
for (var attr in obj2) {
obj1[attr] = obj2[attr]
}
},
format : function(data){
var html ="";
for (var attr in data) {
html += attr + '=' + data[attr]+'&';
}
html = html.substring(0,html.length-1)
return html;
}
}
原生ajax封装,数据初始化,的更多相关文章
- 原生ajax封装,包含post、method方式
原生ajax封装,包含post.method方式 function ajax(method, url, data, success) { var xhr = null; try { xhr = new ...
- 原生 Ajax 封装 和 Axios 二次 封装
AJAX 异步的JavaScript与XML技术( Asynchronous JavaScript and XML ) Ajax 不需要任何浏览器插件,能在不更新整个页面的前提下维护数据,但需要用户允 ...
- 原生Ajax封装随笔
XMLHttpRequest 对象用于和服务器交换数据.我们使用 XMLHttpRequest 对象的 open() 和 send() 方法: open(method,url,async) metho ...
- 原生ajax封装及用法
/* 封装ajax函数 * @param {string}opt.type http连接的方式,包括POST和GET两种方式 * @param {string}opt.url 发送请求的url * @ ...
- 原生AJAX封装
var ajaxHelper = { /*1.0 浏览器兼容的方式创建异步对象*/ makeXHR: function () { //声明异步对象变量 var xmlHttp = false; //声 ...
- 原生js封装ajax:传json,str,excel文件上传表单提交
由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(u ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 原生JavaScript 封装ajax
原生JavaScript 封装ajax function myajax(options){ //新建一个局部对象 用来存放用户输入的各种参数 var opt={ type:options.type ...
- 使用原生ajax及其简单封装
原生ajax配置详解 // 原生ajax // 1. 创建ajax对象 if(window.XMLHttpRequest){ // // IE7+, Firefox, Chrome, Opera, S ...
随机推荐
- C语言实验单片机串口发送int型数据
void SendIint(int n)reentrant { unsigned char s; while(n!=0) { s=(unsigned char)n%10+48; SendByte(s) ...
- 一次基于Vue.Js用户体验的优化
.mytitle { background: #2B6695; color: white; font-family: "微软雅黑", "宋体", "黑 ...
- Plupload上传插件自定义图片的修改
若自定义的一个上传图片效果,代码(可能不全),当用户再次点击所有或任意一个上传图片的input时,uploader.files已经多了客户再次上传的图片,但是你就想要最后的两张图片,这就可以使用到up ...
- (数字IC)低功耗设计入门(四)——RTL级低功耗设计
二.RTL级低功耗设计 前面介绍了系统级的低功耗设计,换句话说就是在系统级降低功耗可以考虑的方面.系统级的低功耗设计,主要是由系统级设计.具有丰富经验的人员实现,虽然还轮不到我们设计,我们了解一下还是 ...
- javascript基础-DOM原理
解释清楚DOM原理并不是一件容易的事,但是任何一个前端工程师,都必须牢牢掌握它. DOM整体架构: 图解: DOM,即针对XML文档的应用程序编程接口(API).通俗一点说,HTML属于XML的一种, ...
- JAVA POI 应用系列(1)--生成Excel
POI简介(官网:http://poi.apache.org/) Apache POI是Apache软件基金会的开放源码函式库,POI提供API给Java程序对Microsoft Office ...
- 一天搞定CSS: 浮动(float)的副作用--12
我们通常使用浮动来实现某些元素的布局,但是往往这些元素浮动会影响其他元素的布局,因此会产生副作用. 如果你还不清楚什么是浮动,那就点开这个链接: http://blog.csdn.net/baidu_ ...
- MarkDown编辑器快捷方式
常用快捷: Ctrl+K 插入代码块 Ctrl+G 插入图片 Ctrl+B 文字加粗 Ctrl+I 文字倾斜 Ctrl+G 插入图片 Tab 默认新建高亮代码块 ">" 向右 ...
- day_1_登录接口
#/usr/bin/env python3# -*- coding: utf-8 -*-##This is an account login authentication##Version 1.0## ...
- Spring学习(15)--- 基于Java类的配置Bean 之 @Bean & @Scope 注解
默认@Bean是单例的,但可以使用@Scope注解来覆盖此如下: @Configuration public class MyConfiguration { @Bean @Scope("pr ...