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方法封装的更多相关文章

  1. AJAX原理解析与兼容方法封装

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

  2. 原生Ajax XMLHttpRequest对象

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

  3. python_way day21 Django文件上传Form方式提交,原生Ajax提交字符处啊,Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式,Django验证码,抽屉示例,

    python_way day21 1.Django文件上传至Form方式 2.原生Ajax文件上传提交表单 使用原生Ajax好处:不依赖jquery,在发送一个很小的文件或者字符串的时候就可以用原生A ...

  4. ajax和原生ajax、文件的上传

    ajax理解: ajax发送的请求是异步处理的.也就是说如下形式: function f1(){ $.ajax( { ....... success:function(){ a= return a } ...

  5. 原生ajax与封装的ajax使用方法

    当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...

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

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

  7. js 封装原生ajax

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

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

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

  9. 使用原生ajax及其简单封装

    原生ajax配置详解 // 原生ajax // 1. 创建ajax对象 if(window.XMLHttpRequest){ // // IE7+, Firefox, Chrome, Opera, S ...

随机推荐

  1. PHP tools for Visual Studio 2013 安装、破解、配置教程

    安装 首先,必须要安装vs2013.本人安装的是社区版,免费的同时功能又全面. 然后,去http://download.csdn.net/detail/liangzehong007/9076855 或 ...

  2. hdu5326 Work

    题目链接:点击打开链接 题目大意:有n个人.各自管理不同的人,问有多少人管理k个人. 思路:先记录每一个人的直接上级.然后模拟路径压缩的过程进行计数求和. #include<stdio.h> ...

  3. POJ 3628 Bookshelf 2 题解

    本题解法非常多,由于给出的数据特殊性故此能够使用DFS和BFS,也能够使用01背包DP思想来解. 由于一般大家都使用DFS,这里使用非常少人使用的BFS.缺点是比DFS更加耗内存,只是长处是速度比DF ...

  4. 【cl】Unable to find executable for: taskkill

    十二月 02, 2015 5:16:56 下午 org.openqa.selenium.os.ProcessUtils killWinProcess警告: Process refused to die ...

  5. 【cocos2d-x 3.7 飞机大战】 决战南海I (十二) 游戏结束场景

    游戏结束的时候,要显示分数.还要可以选择是返回主场景还是退出游戏 // 退出游戏 void menuCloseCallback(cocos2d::Ref* pSender); // 返回主界面 voi ...

  6. cocos2d-x 是怎样渲染的

    要知道 是怎样渲染的:要先选中 就可以 谁知道: c ocos2d-x 是怎样渲染的 ? 每一个CCNODE自己有draw 北京-菜菜: :: draw draw负重渲染 ************** ...

  7. Centos安装FastDFS+Nginx

    一.安装环境: gcc:安装nginx需要先将官网下载的源码进行编译,编译依赖gcc环境,如果没有gcc环境,需要安装gcc: yum install gcc-c++ PCRE:PCRE(Perl C ...

  8. Android+Jquery Mobile学习系列(1)-开发环境

    开发环境是老生常谈的问题了,网上有很多关于Android环境安装的文章,我这里也就简单说明一下,不做过多分析. 想了解详细的安装说明,可以参见[百度经验] Java环境安装直接跳过,说一下Androi ...

  9. Python 字典(dict)操作(update)

    1. get 注意以下两种形式的细微差别,差别在返回值的类型上: d.get(value, '') d.get(value, ['']) >> d = {} >> d.get( ...

  10. CharSequence源码分析

    CharSequence是一个接口,表示一个char值的可读序列,此接口为多种char序列提供统一的.只读的通道.既然是接口,就不能通过new来进行赋值,只能通过以下方式赋值: CharSequenc ...