原生ajax分享
最近被大佬问了一个很有趣的问题,你还能手打出一个ajax吗?,我当时的想法是有现成的为什么要自己打,后来我反思了一下(只有靠自己才是强者),在这里给大家分享一个我自己打的ajax,也是自己的一个知识点的记录。
//后台交互ajax方法
//参数1 集合 代表和后台交互的所有数据
function ajax(obj) {
obj.type = obj.type || "get"; //指定提交方式的默认值
obj.data = obj.data || null; //设置数据的默认值
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); // 创建XMLHttpRequest对象
var callback = function (xhr) {
if (xhr.readyState == 4) {//判断状态码为4时,表示请求完毕可执行内容。
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {//如果状态值为200在300之间,或者是读取缓存中的内容成功时,执行内容。
//这里必须要try catch。即使这里mysql报错,也不会影响到程序的使用。
try {
obj.success && obj.success(eval(xhr.responseText));
}
catch (e) {//如果错误,把错误输出到控制台。
console.log(xhr.responseText);
}
} else {//如果状态值不是200到300之间,或者不是304表示请求失败,执行失败的内容。
obj.error && obj.error();
}
}
}
var toData = function (obj) { //格式化参数
if (obj == null) {
return obj;
}
var arr = [];
for (var i in obj) {
var str = i + "=" + obj[i];
arr.push(str);
}
return arr.join("&");
}
if (obj.type == "post") {//判断是get还是post请求
xhr.open(obj.type, obj.url, obj.async);//打开连接,参数是:请求方式、请求地址、是否异步
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//如果是post请求,设置请求头信息。设置表单提交时的内容类型
var data = toData(obj.data);//格式化参数
xhr.send(data);//发送请求
obj.async == false && callback(xhr);
} else{ //get test.php?xx=xx&aa=xx
var url = obj.url + "?" + toData(obj.data);//格式化yrl参数
xhr.open(obj.type, url, obj.async);//打开链接
xhr.send();//发送请求,因为是get请求,所以send()不填参数
}
xhr.onreadystatechange = function () {//每次状态改变时执行的函数
callback(xhr);
}
}
原生ajax分享的更多相关文章
- 手写原生ajax
关于手写原生ajax重要不重要,各位道友自己揣摩吧, 本着学习才能进步,分享大家共同受益,自己也在自己博客里写一下 function createXMLHTTPRequest() { //1.创建XM ...
- js原生Ajax 的封装和原理
原理及概念 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术. 动态网页:是指可以通过服务器语言结合数 ...
- JS原生ajax
原文链接:http://caibaojian.com/ajax-jsonp.html 一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRe ...
- 学习笔记:IDEA、原生ajax的三道练习题、Markdown
前言 该从何说起呢?想写博客好久了,正好这个学期课很少(大三),可以静下心来写点东西(虽然事情依旧很多),总感觉记录和分享是一件很酷的事情.第一篇博客,第一次使用Markdown写博客,第一次使用ID ...
- javascript实现原生ajax
自从javascript有了各种框架之后,比如jquery,使用ajax已经变的相当简单了.但有时候为了追求简洁,可能项目中不需要加载jquery这种庞大的js插件.但又要使用到ajax这种功能该如何 ...
- javascript实现原生ajax的几种方法介绍
自从javascript有了各种框架之后,比如jquery,使用ajax已经变的相当简单了.但有时候为了追求简洁,可能项目中不需要加载jquery这种庞大的js插件.但又要使用到ajax这种功能该如何 ...
- 原生Ajax
使用原生Ajax 验证用户名是否被注册 创建出注册信息: <h1>注册信息</h1><input type="text" name="txt ...
- JS原生ajax与Jquery插件ajax深入学习
序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...
- 原生Ajax 和Jq Ajax
前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开.服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的 ...
随机推荐
- 多任务-python实现-多进程文件拷贝器(2.1.10)
@ 目录 1.需求 2.代码 1.需求 当去拷贝一个文件夹的所有文件时,使用多任务拷贝 假如一个文件使用一个进程处理 10000个文件就额可以使用最大值为10的进程池处理(当然max取值看具体主机性能 ...
- 使用php进行微信小程序图片安全验证
想用到微信公众平台的图片识别系统,结果报错{"errcode":41005,"errmsg":"media data missing hint: [x ...
- 实验题目:python面向对象程序设计
1.定义并实现一个矩形类Rectangle,其私有实例成员为矩形的左下角与右上角两个点的坐标,能设置左下角和右上角两个点的位置,能根据左下角与右上角两个点的坐标计算矩形的长.宽.周长和面积,另外根据需 ...
- CCNP之二层技术
二层技术 ---数据链路层 核心功能:介质访问控制功能,控制物理层 网络类型: 1)MA:multiple access 多路访问(指在一条链路上有多个访问点,区别于点到点或点到多点的网络) BMA: ...
- JavaEE在职加薪课好客租房项目实战视频教程
JavaEE在职加薪课好客租房项目实战视频教程课程介绍: 本课程采用SOA架构思想进行设计,基于目前主流后端技术框架SpringBoot.SpringMVC.Mybaits.Dubbo等来 ...
- Next.js+React聊天室|Next仿微信桌面端|next.js聊天实例
一.项目介绍 next-webchat 基于Next.js+React.js+Redux+Antd+RScroll+RLayer等技术构建的PC桌面端仿微信聊天项目.实现了消息/表情发送.图片/视频预 ...
- 小团队产品研发管理V0.0.1
序言 之前做研发的时候非常鄙视管理,觉得管理的那些人就知道搞政治,后来做了开发主管,以及到部门经理之后,管的人多了发现管理真是门大学问,真的应该每个人都要学习一些基本管理知识,特别是刚入社会的打工人. ...
- 当layui与分页相遇--bootstrap何去何从
用了一段时间,感觉layui比bootstrap 方便了很多.在js操作上比bootstrap减少了许多的代码量. 今天遇到需要前台分页.当然,不是表格,如果是表格的话.使用yalui table和b ...
- C++作用域限定符:private/public与protected
C++的作用域限定符其实涉及到了C++特性中的封装和继承. public/private:涉及类的封装特性.对于一个类需要对外展示的部分,我们可以将其声明为public,对于不希望对外展示的,我们将其 ...
- Java基础经典案例
案例列表 01减肥计划switch版本 02减肥计划if版本 03逢七跳过 04不死神兔 05百钱白鸡 06数组元素求和 07判断两个数组是否相同 08查找元素在数组中的索引 09数组元素反转 10评 ...