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. MySQL 基础一 安装

    1.下载安装包 2.安装MySQL 3.安装操作工具SQLyog 一 下载安装包 地址:百度软件中心MySQL安装包 下载安装操作工具安装包:SQLyog 安装教程地址:http://blog.csd ...

  2. Android学习之基础知识八—Android广播机制

    一.广播机制简介 Android提供了一套完整的API,允许应用程序自由的发送和接受广播,发送广播借助于我们之前学过的:Intent,而接收广播需要借助于广播接收器(Broadcast Receive ...

  3. Spring @Scheduled定时任务的fixedRate,fixedDelay,cron执行差异

    import java.text.DateFormat; import java.text.SimpleDateFormat; import java.util.Date; import org.sp ...

  4. BZOJ4856 JSOI2016 病毒感染 区间DP

    传送门 原Word文档 题意:太长不给 这种题目一看就是区间DP 设$f_i$表示治愈了前$i$个村子的时候最少死了多少村民,又设前缀和为$sum_i$,通过枚举折返时最后经过的村子$j$,并且提前计 ...

  5. Vue-条件渲染v-if与v-show

    一.共同点 根据数据值来判断是否显示DOM元素 二.区别 代码: <!DOCTYPE html> <html lang="en"> <head> ...

  6. odoo 10.0部署shell

    环境ubuntu16+nginx+python2.7.12+postgresql9.5+odoo 10.0 community #!/bin/bash #author:guoyihot@outlook ...

  7. ASP.NET Core 登录失败。该登录名来自不受信任的域,不能与集成身份验证一起使用。

    原文:ASP.NET Core 登录失败.该登录名来自不受信任的域,不能与集成身份验证一起使用. 当进行数据迁移的时候提示 修改appsettings配置连接串的Trusted_Connection ...

  8. 在Ubuntu18.04下将应用程序添加到启动器

    # 在启动器里面给应用程序添加一个快捷方式 在linux(ubuntu)平台下,很多小伙伴发现,自己去官网下载解压的软件不能自动添加到启动器,每次启动的时候需要再次进入软件目录输入命令,非常不方便.本 ...

  9. websocket(三)——基于node sockit.io的即时通讯

    通过前面的学习发现,常见的websocket虽然可以很好地实现服务端和客户端的信息传递,但二者之间传递的数据只是简单的字符串,这对事物的描述,信息的传递是非常不友好的,下面将引入socket.io,来 ...

  10. B. Heaters Div3

    链接 [http://codeforces.com/contest/1066/problem/B] 分析 具体看代码,贪就完事了 代码 #include<bits/stdc++.h> us ...