原生ajax的get和post方法封装
get 方法
function serialize (data) {
if (!data) {
return '';
}
var paris = [];
for (var key in data) {
if (!data.hasOwnProperty(key) || typeof data[key] === 'function') {
continue;
}
var name = encodeURIComponent(key);
var value = encodeURIComponent(data[key].toString());
paris.push(name + '=' + value);
}
return paris.join('&');
}
function get (url, options, callback) {
var req;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) { // 兼容IE7及以下版本
req = new ActiveXObject();
}
req.onreadystatechange = function () {
if (req.readyState === 4) {
if (req.status === 200) {
console.log('请求成功');
callback(req.response);
}
} else {
console.log('请求中...');
}
}
// 将传递的参数序列化
if (serialize(options) !== '') {
url = url + '?' + serialize(options);
}
req.open('get', url);
req.send(null);
}
post方法
function serialize (data) {
if (!data) {
return '';
}
var paris = [];
for (var key in data) {
if (!data.hasOwnProperty(key) || typeof data[key] === 'function') {
continue;
}
var name = encodeURIComponent(key);
var value = encodeURIComponent(data[key].toString());
paris.push(name + '=' + value);
}
return paris.join('&');
}
function post (url, options, callback) {
var req;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) { // 兼容IE7及以下版本
req = new ActiveXObject();
}
req.onreadystatechange = function () {
if (req.readyState === 4) {
if (req.status === 200) {
console.log('请求成功');
callback(req.response);
}
} else {
console.log('请求中...');
}
}
req.open('post', url);
req.send(serialize(options));
}
get与post方法结合
function serialize (data) {
if (!data) {
return '';
}
var paris = [];
for (var key in data) {
if (!data.hasOwnProperty(key) || typeof data[key] === 'function') {
continue;
}
var name = encodeURIComponent(key);
var value = encodeURIComponent(data[key].toString());
paris.push(name + '=' + value);
}
return paris.join('&');
}
function request (method, url, options, callback) {
var req;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) { // 兼容IE7及以下版本
req = new ActiveXObject();
}
req.onreadystatechange = function () {
if (req.readyState === 4) {
if (req.status === 200) {
console.log('请求成功');
callback(req.response);
}
} else {
console.log('请求中...');
}
}
url = method === 'get' && serialize(options) !== '' ? url + '?' + serialize(options) : url;
let sendParams = method === 'get' ? null : serialize(options);
req.open(method, url);
req.send(sendParams);
}
原生ajax的get和post方法封装的更多相关文章
- AJAX原理解析与兼容方法封装
AJAX常用参数 AJAX对象兼容 AJAX对象方法与属性 AJAX封装兼容方法源码 AJAX全称Asynchronous JavaScript and XML(异步的JavaScript与XML), ...
- 原生Ajax XMLHttpRequest对象
一.Ajax请求 - 现在常见的前后端分离项目中,一般都是服务器返回静态页面后浏览器加载完页面,运行script中的js代码,通过ajax向后端api发送异步请求获取数据,然后调用回调函数,将数据添加 ...
- python_way day21 Django文件上传Form方式提交,原生Ajax提交字符处啊,Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式,Django验证码,抽屉示例,
python_way day21 1.Django文件上传至Form方式 2.原生Ajax文件上传提交表单 使用原生Ajax好处:不依赖jquery,在发送一个很小的文件或者字符串的时候就可以用原生A ...
- ajax和原生ajax、文件的上传
ajax理解: ajax发送的请求是异步处理的.也就是说如下形式: function f1(){ $.ajax( { ....... success:function(){ a= return a } ...
- 原生ajax与封装的ajax使用方法
当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...
- js原生Ajax的封装与使用
一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR: function() { return new XMLHttpRequest ...
- js 封装原生ajax
jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就 ...
- js原生Ajax 的封装和原理
原理及概念 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术. 动态网页:是指可以通过服务器语言结合数 ...
- 使用原生ajax及其简单封装
原生ajax配置详解 // 原生ajax // 1. 创建ajax对象 if(window.XMLHttpRequest){ // // IE7+, Firefox, Chrome, Opera, S ...
随机推荐
- hdu 1716 深搜dfs
#include<stdio.h> #include<stdlib.h> #include<string.h> #define N 5 int f[N]; int ...
- MySQL必知必会面试题 基础
1.登录数据库 (1).单实例 mysql -uroot -poldboy (2).多实例 mysql -uroot -poldboy -S /data/3306/mysql.sock 2.查看数据库 ...
- UVa Problem 10051
这题有点类似LIS,由于颜色最多100种,所以只需建立一个100的数组,按对立面的关系以某种颜色为向上面的最大值就可以了. #include <iostream> #include & ...
- 逻辑斯蒂回归3 -- 最大熵模型之改进的迭代尺度法(IIS)
声明: 1,本篇为个人对<2012.李航.统计学习方法.pdf>的学习总结,不得用作商用.欢迎转载,但请注明出处(即:本帖地址). 2,因为本人在学习初始时有非常多数学知识都已忘记.所以为 ...
- BZOJ 3514 Codechef MARCH14 GERALD07加强版 Link-Cut-Tree+划分树
题目大意: 给定n个点m条边的无向图.求问当图中仅仅有[编号在[l,r]区间内]的边存在时图中的联通块个数 强制在线 注意联通块是指联通了就是同一块,不是Tarjan求的那种块 看到这题的那一刻我就想 ...
- STM32F4——GPIO基本应用及复用
IO基本应用 一.IO基本结构: 针对STM32F407有7组IO.分别为GPIOA~GPIOG,每组IO有16个IO口,则有112个IO口. 当中IO口的基本结构例如以下: 二.工作方式: ST ...
- XTU OJ 1207 Welcome to XTCPC (字符串签到题)
Problem Description Welcome to XTCPC! XTCPC start today, you are going to choose a slogan to celebra ...
- android性能測试systrace
一:简单介绍 systrace 是 Android4.1 引入的一套用于做性能分析的工具. 基于 Linux 内核的 ftrace 机制(用于跟踪 Linux 内核的函数调用), 能够输出各个线程当前 ...
- 安卓离线SDK Windows版 资源包下载地址全集
1.Tools https://dl-ssl.google.com/android/repository/platform-tools_r19.0.1-windows.zip https://d ...
- 安装visual studio 2013【转】
本文转载自:http://blog.csdn.net/tina_ttl/article/details/51544733#1下载-visual-studio-ultimate-2013安装包 微软已经 ...