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的更多相关文章

  1. js 封装原生ajax

    jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就 ...

  2. vue实践---vue结合 promise 封装原生ajax

    有时候不想使用axios这样的外部依赖,想自己封装ajax,这里有两种方法 方法一,在单个页面内使用 封装的代码如下: beforeCreate () { this.$http = (() => ...

  3. 原生ajax解析&封装原生ajax函数

    前沿:对于此篇随笔,完是简要写了几个重要的地方,具体实现细节完在提供的源码做了笔记 <一>ajax基本要点介绍--更好的介绍ajax 1. ajax对象中new XMLHttpReques ...

  4. 封装原生Ajax

    var Chef = { createAjax:function() { var xhr = null; try { //IE系列浏览器 xhr = new ActiveXObject("m ...

  5. ES6封装原生ajax请求

    http (data) { return new Promise((resolve, reject) => { var xhr = new XMLHttpRequest(); xhr.onrea ...

  6. 原生AJAX请求教程

    ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...

  7. js原生Ajax(十四)

    一.XMLHttpRequest    [使用XMLHttpRequest时,必须将html部署到web服务器中]1) 指定请求1.实例化eg: var http = new XMLHttpReque ...

  8. 原生 ajax 请求

    ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...

  9. js原生Ajax的封装与使用

    一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR: function() { return new XMLHttpRequest ...

  10. js原生Ajax 的封装和原理

    原理及概念 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术. 动态网页:是指可以通过服务器语言结合数 ...

随机推荐

  1. Linux下DHCP服务安装配置

    简介 安装配置 一.简介 DHCP (Dynamic Host Configuration Protocol,动态主机管理协议)是一种基于UDP协议且仅限用于局域网的网络协议,主要用途是为局域网内部设 ...

  2. android 工具大集合

    http://www.androiddevtools.cn/ http://www.sourcetreeapp.com/

  3. keystone系列一:keystone基础

    一 什么是keystone keystone是OpenStack的身份服务,暂且可以理解为一个'与权限有关'的组件. 二 为何要有keystone Keystone项目的主要目的是为访问opensta ...

  4. NOIP2002-2017普及组题解

    虽然普及组一般都是暴力省一,但是有一些题目还是挺难的qwq个人觉得能进TG的题目会在前面打上'*' NOIP2002(clear) #include<bits/stdc++.h> usin ...

  5. bitcoin 源码解析 - 交易 Transaction(二) - 原理篇

    这篇文章我断断续续写了呃···· 应该快三个星期了? 所以前后的风格可能差别相当大.真是十分的怠惰啊··· 最近实在是不够努力.用python重写bitcoin的项目也卡在网络编程部分(这方面真是我的 ...

  6. Spring Zuul 性能调优,如何提升平均响应时间200% ?

    最近负责公司的 Gateway 项目,我们用 Spring Zuul 来做 HTTP 转发,但是发现请求多的时候,AWS 的健康检查就失败了,但是实际上程序还在跑,在日志上也没有任何东西错误打印出来出 ...

  7. Canary机制的绕过

    目标程序下载 提取码:8ypi 1.检查程序开启了哪些安全保护机制 Canary与NX开启了 Canary机制简介 64位的canary机制,会在函数头部添加: mov rax,QWORD PTR f ...

  8. kvm虚拟机日常操作命令梳理

    KVM虚拟机的管理主要是通过virsh命令对虚拟机进行管理.废话不多说,下面列出kvm日常管理中的命令 1)查看KVM虚拟机配置文件及运行状态 KVM虚拟机默认配置文件位置: /etc/libvirt ...

  9. windows如何查看电脑开关机记录

    如何查看电脑开关机记录 (一)如果你只是想查看一下,从昨天关机到今天开机之间有没有人使用我的计算机,在“开始”菜单的运行”中输入“eventvwr.msc”,或者是按下"开始菜单" ...

  10. Node 系列之url模块

    引入 url: const url = require("url"); 用于URL解析.处理等操作的解决方案 1.url.parse(urlStr[, parseQueryStri ...