HTML-封装原生Ajax
function ajax(data){
//data{data:"",dataType:"xml/json",type:"get/post",url:"",asyn:"true/false",success:funtion(){},failure:function(){}}
//datapost={username:123,pwd=456}
//dataGet="username=123&pwd=456"
//第一步:创建XHR对象
var xhr=null;
if(window.XMLHttpRequest){//标准的浏览器
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject('Microsoft.XMLHTTP');
}
//第二步:准备发送前的一些配置参数
var type=data.type=='get'?'get':'post';
var url='';
if(data.url){
url=data.url;
if(type=='get'){
url+="?"+data.data+'&_t='+new Date().getTime();//(就是dataGet)
}
}
var flag=data.asyn=='true'?'true':'false';
xhr.open(type,url,flag);
//第三步:执行发送的动作
if(type=='get("Content-Type","application/x-www-form-urlencoded")
xhr.send(data.data);//就是dataPost
}
//第四步:指定回调函数
xhr.onreadstatechange=function(){
if(this.readyState==4){
if(this.status==200){
if(typeof data.success=='function'){
var d=data.dataType=='xml'?this.responseXML:this.responseText;
data.success(d);
}
}else{
if(typeof data.failure=='function'){
data.failure();
}
}
}
}
}
HTML-封装原生Ajax的更多相关文章
- js 封装原生ajax
jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就 ...
- vue实践---vue结合 promise 封装原生ajax
有时候不想使用axios这样的外部依赖,想自己封装ajax,这里有两种方法 方法一,在单个页面内使用 封装的代码如下: beforeCreate () { this.$http = (() => ...
- 原生ajax解析&封装原生ajax函数
前沿:对于此篇随笔,完是简要写了几个重要的地方,具体实现细节完在提供的源码做了笔记 <一>ajax基本要点介绍--更好的介绍ajax 1. ajax对象中new XMLHttpReques ...
- 封装原生Ajax
var Chef = { createAjax:function() { var xhr = null; try { //IE系列浏览器 xhr = new ActiveXObject("m ...
- ES6封装原生ajax请求
http (data) { return new Promise((resolve, reject) => { var xhr = new XMLHttpRequest(); xhr.onrea ...
- 原生AJAX请求教程
ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...
- js原生Ajax(十四)
一.XMLHttpRequest [使用XMLHttpRequest时,必须将html部署到web服务器中]1) 指定请求1.实例化eg: var http = new XMLHttpReque ...
- 原生 ajax 请求
ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...
- js原生Ajax的封装与使用
一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR: function() { return new XMLHttpRequest ...
- js原生Ajax 的封装和原理
原理及概念 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术. 动态网页:是指可以通过服务器语言结合数 ...
随机推荐
- Objective-C 浅拷贝与深拷贝
一个Objective-C对象通常分配在堆上,并有一个或者多个指针指向它.如下代码及其关系图所示: NSObject *obj1 = [[NSObject alloc] init]; NSObject ...
- Windows下jupyter notebook 修改打开的浏览器
1. 打开cmd,输入jupyter notebook --generate-config 2. 根据返回的路径打开 C:\Users\Administrator\.jupyter\jupyter_n ...
- 解决 在Android开发上使用KSOAP2上传大图片到服务器经常报错的问题
原文首发我的主力博客 http://anforen.com/wp/2017/04/android_ksoap2_unexpected_type_position_end_document_null_j ...
- decorator, async/await, generator
////////////decorator////////// function aopFunc (target, key, descriptor) { console.log('aopFunc') ...
- zookeepeer使用zkCli.sh命令
一.连接服务器端 [root@sxl132 zookeepeer]# ./bin/zkCli. Connecting to -- ::, [myid:] - INFO [main:Environmen ...
- python中和生成器协程相关yield from之最详最强解释,一看就懂(二)
一. 从列表中yield 语法形式:yield from <可迭代的对象实例> python中的列表是可迭代的, 如果想构造一个生成器逐一产生list中元素,按之前的yield语法,是在 ...
- 你应该学会的接口调试神器——Postman高级用法
postman这个神器相信大家都用过,程序员作为非专业的测试人员,非常需要这么一款简单轻量级的restful测试工具,但是不知道你是否知道,postman的强大之处不只是测试一下接口,还有其他非常赞的 ...
- Ionic 1 & 2 开发常见问题 Q&A
原文发表于我的技术博客 本文分享了在 Ionic 1 & 2 版本开发过程中常见问题的一些 Q&A,供慕课网同学或其他朋友参考. 原文发表于我的技术博客 1. 版本的问题 Ionic ...
- 第三次作业 (一)----------------------Visual Studio 2015的安装及单元测试
这是第三周的第一个作业,Visual Studio 2015的安装及单元测试. 我的电脑之前安装过Visual Studio 2015,但是在安装过程中我从来没有留意过各种注意事项,所集正好借此作业的 ...
- github使用心得和链接
在本次使用github过程中,刚打开github主界面的时候,吓了一跳,满眼的英文加上各种没用过的命令,真是一个头两个大,废话不多说,下面我就说一下我在使用github过程中遇到的两个问题.: 问题一 ...