原生ajax的post方法,原生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原理解析与兼容方法封装

AJAX常用参数 AJAX对象兼容 AJAX对象方法与属性 AJAX封装兼容方法源码 AJAX全称Asynchronous JavaScript and XML(异步的JavaScript与XML), ...

原生Ajax XMLHttpRequest对象

一.Ajax请求 - 现在常见的前后端分离项目中,一般都是服务器返回静态页面后浏览器加载完页面,运行script中的js代码,通过ajax向后端api发送异步请求获取数据,然后调用回调函数,将数据添加 ...

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 ...

随机推荐

外接Hdmi没有声音怎么设置

参考 http://www.3lian.com/edu/2013/07-16/81152.html 在小喇叭图标上右键->播放设备->禁用HDMI

C#组合查询小Demo

namespace WindowsFormsApplication1 { public partial class Form1 : Form { string Sql = "select * ...

克隆复制可使用原型( Prototype)设计模式

今天有学习设计模式的原型(Prototype)http://www.cnblogs.com/insus/p/4152773.html .为了加 ...

CSS样式表与格式布局

样式表 CSS(Cascading Style Sheets  层叠样式表),作用是美化HTML网页. 内联样式表: 例:

创建性能监视器(logman)

在本地计算机上抓取性能信息 Logman.exe create counter Perf-1Second -f bincirc -max 500 -c "\Processor(*)\% Pr ...

linux下安装Sublime Text3并将它的快捷方式放进启动器中

Sublime Text是一个代码编辑器,我主要是用它来编辑python.下面就来简单说明下它在linux的安装过程吧! 1.添加sublime text3的仓库 首先按下快捷键ctrl+alt+t打 ...

linux清空文件内容的几种方式与区别

虽然linux清空文件内容的方式有很多种,但是他们之间有着细微的差别.通过实践我将他们分为两类: 将文件清空,文件大小为0k $ : > filename  $ > filename  $ ...

Idea使用说明

快捷键 ctrl + alt + b : 查找接口的实现类 ctrl + h : 查找类或接口的继承关系 double shift : 搜索任何地方 ctrl + shift + n : 查找文件 c ...

TensorFlow实现梯度下降

# -*- coding: utf-8 -*- """ Created on Mon Oct 15 17:38:39 2018 @author: zhen "& ...

Work Management Service application in SharePoint 2016

最近开始弄SharePoint 2016的Workflow,遇到问题发现没有了Work Management Service application,然后用PowerShell命令创建也不行,bing ...