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. Android学习之基础知识四-Activity活动2讲

    一.在活动(activity)中添加Toast显示: 1.Toast作用:Android系统提供的一种非常好的提醒方式,将一些短小的信息提供给用户,这些信息会在一段时间后自动消失,不会占用任何屏幕空间 ...

  2. 重度使用示波器进行优化分析——一个DSDA项目回顾

    这是若干年前一个项目,最近有时间整理一下.回忆起来,印象最深刻的就是重度使用示波器辅助分析,进行优化. 项目背景是在原有项目3G+项目基础上,增加一颗2G+ Modem,使支持DSDA功能. 在介绍D ...

  3. Java多线程编程模式实战指南一:Active Object模式(上)

    Active Object模式简介 Active Object模式是一种异步编程模式.它通过对方法的调用与方法的执行进行解耦来提高并发性.若以任务的概念来说,Active Object模式的核心则是它 ...

  4. [01] Collection和Map

    0.写在前面的话 集合是Java的API中非常重要的概念,用来存储多个数据,并实现了不同的数据结构. Java集合框架中常见的有三大接口: Collection Map Iterator   1.Co ...

  5. UOJ224 NOI2016 旷野大计算 构造、造计算机

    传送门——UOJ 传送门——Luogu 这段时间请不要找Itst聊天,Itst已经做疯了 事实证明大模拟题不可做 query 1 送分,加起来一起乘即可 I I + < - O query 2 ...

  6. C# LINQ 详解 From Where Select Group Into OrderBy Let Join

    目录 1. 概述 2. from子句 3. where子句 4. select子句 5. group子句 6. into子句 7. 排序子句 8. let子句 9. join子句 10. 小结 1. ...

  7. Python 学习 第四篇:动态类型模型

    Python的变量不用声明,赋值之后就可以直接使用,类型是在运行过程中自动确定的,这就是动态类型模型.该模型把变量和对象设计成两个不同的实体,对象是存储数据的地方,对象的类型是由初始值自动决定的,而变 ...

  8. Quartz.Net分布式任务管理平台(第二版)

    前言:在Quartz.Net项目发布第一版后,有挺多园友去下载使用,我们通过QQ去探讨,其中项目中还是存在一定的不完善.所以有了现在这个版本.这个版本的编写完成其实有段时间了一直没有放上去.现在已经同 ...

  9. ExtJS初探:在项目中使用ExtJS

    注意:本文写作时间是 2013 年,所讲的 ExtJS 如今早已过时,请勿学习! -------------------------------- 今天ExtJS官网发布了ExtJS最新正式版4.2. ...

  10. 使用IntelliJ IDEA开发SpringMVC网站(二)框架配置

    原文:使用IntelliJ IDEA开发SpringMVC网站(二)框架配置 摘要 讲解如何配置SpringMVC框架xml,以及如何在Tomcat中运行 目录[-] 文章已针对IDEA 15做了一定 ...