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),是一种用于创建快速动态网页的技术. 动态网页:是指可以通过服务器语言结合数 ...
随机推荐
- Linux下DHCP服务安装配置
简介 安装配置 一.简介 DHCP (Dynamic Host Configuration Protocol,动态主机管理协议)是一种基于UDP协议且仅限用于局域网的网络协议,主要用途是为局域网内部设 ...
- android 工具大集合
http://www.androiddevtools.cn/ http://www.sourcetreeapp.com/
- keystone系列一:keystone基础
一 什么是keystone keystone是OpenStack的身份服务,暂且可以理解为一个'与权限有关'的组件. 二 为何要有keystone Keystone项目的主要目的是为访问opensta ...
- NOIP2002-2017普及组题解
虽然普及组一般都是暴力省一,但是有一些题目还是挺难的qwq个人觉得能进TG的题目会在前面打上'*' NOIP2002(clear) #include<bits/stdc++.h> usin ...
- bitcoin 源码解析 - 交易 Transaction(二) - 原理篇
这篇文章我断断续续写了呃···· 应该快三个星期了? 所以前后的风格可能差别相当大.真是十分的怠惰啊··· 最近实在是不够努力.用python重写bitcoin的项目也卡在网络编程部分(这方面真是我的 ...
- Spring Zuul 性能调优,如何提升平均响应时间200% ?
最近负责公司的 Gateway 项目,我们用 Spring Zuul 来做 HTTP 转发,但是发现请求多的时候,AWS 的健康检查就失败了,但是实际上程序还在跑,在日志上也没有任何东西错误打印出来出 ...
- Canary机制的绕过
目标程序下载 提取码:8ypi 1.检查程序开启了哪些安全保护机制 Canary与NX开启了 Canary机制简介 64位的canary机制,会在函数头部添加: mov rax,QWORD PTR f ...
- kvm虚拟机日常操作命令梳理
KVM虚拟机的管理主要是通过virsh命令对虚拟机进行管理.废话不多说,下面列出kvm日常管理中的命令 1)查看KVM虚拟机配置文件及运行状态 KVM虚拟机默认配置文件位置: /etc/libvirt ...
- windows如何查看电脑开关机记录
如何查看电脑开关机记录 (一)如果你只是想查看一下,从昨天关机到今天开机之间有没有人使用我的计算机,在“开始”菜单的运行”中输入“eventvwr.msc”,或者是按下"开始菜单" ...
- Node 系列之url模块
引入 url: const url = require("url"); 用于URL解析.处理等操作的解决方案 1.url.parse(urlStr[, parseQueryStri ...