原生js实现Ajax请求,包含get和post
现在web从服务器请求数据,很多用到Ajax,不过都是用的JQuery封装好的,之前做项目,由于无法引用JQuery,所以就只能用原生了,话不多说,请看代码。
/*-------------------Ajax start--------------------*/
function ajax(options) {
options = options || {};
options.type = (options.type || "GET").toUpperCase();
options.dataType = options.dataType || "json";
var params = formatParams(options.data);
var xhr;
//创建 - 第一步
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if(window.ActiveObject) { //IE6及以下
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//连接 和 发送 - 第二步
if (options.type == "GET") {
xhr.open("GET", options.url + "?" + params, true);
xhr.send(null);
} else if (options.type == "POST") {
xhr.open("POST", options.url, true);
//设置表单提交时的内容类型
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(params);
}
//接收 - 第三步
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var status = xhr.status;
if (status >= 200 && status < 300 || status == 304) {
options.success && options.success(xhr.responseText, xhr.responseXML);
} else {
options.error && options.error(status);
}
}
}
}
//格式化参数
function formatParams(data){
var arr = [];
for (var name in data) {
arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
}
arr.push(("v=" + Math.random()).replace(".",""));
return arr.join("&");
}
/*-------------------Ajax end-------------------*/
自己封装Ajax,主要分三步:
第一步:创建需要的对象,这里主要用到的是XMLHttpRequest,注意需要考虑早期的IE;
第二步:连接和发送;
第三步:接收;
这里为了格式化请求参数,封装了一个formatParams(data)函数。
原生js实现Ajax请求,包含get和post的更多相关文章
- 原生js发送ajax请求
堕落了一阵子了,今天打开博客,发现连登录的用户名和密码都不记得了.2016年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...
- 原生JS发送Ajax请求、JSONP
一.JS原生Ajax Ajax=异步Javascript+XML: ajax是一种数据请求的方式,不需要刷新整个页面.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ajax的核心 ...
- 原生js实现Ajax请求
总的来说,Ajax是与服务器交换数据并更新部分网页的艺术,在不重新加载整个网页的情况下,异步请求数据并刷新页面.举一个小的例子:Goole搜索页面.当用户在输入框输入关键字的时候,JavaScript ...
- 原生js写ajax请求(复习)
今天本地想测试一个接口,不想用框架想用js快速完成,突然发现,我居然忘了这个最基本的代码.好吧,只能复习一波. 在框架泛滥的今天,用惯$.ajax(),axios,superAgent等框架的你们,还 ...
- 原生js的ajax请求
传统方法的缺点: 传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次 ...
- 原生js版ajax请求
function getXMLHttpRequest() { var xhr; if(window.ActiveXObject) { xhr= new ActiveXObject("Micr ...
- 原生js实现ajax封装
一.什么是ajax? 定义:Ajax(Asynchronous Java and XML的缩写)是一种异步请求数据的web开发技术,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并 ...
- 原生JS实现Ajax及Ajax的跨域请求
前 言 如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...
- 原生JS实现ajax 发送post请求
1. [代码]原生JS实现ajax 发送post请求 <script> var oStr = ''; var postData = {}; var oAjax = null; //post ...
随机推荐
- 配置文件 "G:\虚拟机列表\Linux001.vmx" 由产品 VMware 创建, 其版本 VMware Workstation 不兼容并且不能使用.
解析: 报这种错误一般是虚拟机文件里声明的VMware版本和真实的VMware版本不一致导致.我们可以手动更改真实VMware版本,或者更改虚拟机文件里声明的VMware版本.以下我们通过更该虚拟机文 ...
- mobile/immobile species的区别
在地下水反应运移模型中: “mobile species” 涉及运移和反应过程(transport+reaction) “immobile” species 只涉及反应过程 (reaction)
- 应用安全 - 工具 - Jmeter - 漏洞 - 汇总
CVE-2018-1297 Date 类型 rmi 反序列化导致远程代码执行 影响范围
- C学习笔记-指针
指针的概念 指针也是一个变量,指针变量的值是另一个变量的地址 换句话说就是,指针存放的是一个内存地址,该地址指向另一块内存空间 指针变量的定义 指向一个变量的变量 int *p = NULL; p = ...
- 纯前端表格控件SpreadJS V12.1 隆重登场,专注易用性,提升用户体验
一款优秀的开发工具,在更新迭代中,除了要满足不同场景的业务需求,也需不断优化已有功能,尤其是细节方面,要能为用户带来使用体验和开发效率的提升. 作为一款备受业界专家和开发者认可的纯前端类Excel ...
- Tomcat解析XML和反射创建对象原理
Tomcat解析XML和反射创建对象原理 import java.lang.reflect.InvocationTargetException; import java.lang.reflect.Me ...
- Luogu P5221 Product
题目 注意一下空间限制. 令\(f(n)=\prod\limits_{i=1}^n\prod\limits_{j=1}^nij,g(n)=\prod\limits_{i=1}^n\prod\limit ...
- 微信小程序全局属性
通用全局属性:(前端也有) Infinity 代表正的无穷大的数值. NaN 指示某个值是不是数字值. undefined 指示未定义的值. 通用全局函数:(前端也有) decodeURI() 解码某 ...
- Git服务器搭建与配置管理
Git for Windows TortoiseGit:是一个开放的git版本控制系统的源客户端,支持Winxp/vista/win7.离不开真正的Git(Git for windows版本名字又叫M ...
- O002、虚拟化
参考https://www.cnblogs.com/CloudMan6/p/5233484.html OpenStack 是云操作系统,要学习 OpenStack,首先需要掌握一些虚拟化和云计算的 ...