最近被大佬问了一个很有趣的问题,你还能手打出一个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分享的更多相关文章

  1. 手写原生ajax

    关于手写原生ajax重要不重要,各位道友自己揣摩吧, 本着学习才能进步,分享大家共同受益,自己也在自己博客里写一下 function createXMLHTTPRequest() { //1.创建XM ...

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

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

  3. JS原生ajax

    原文链接:http://caibaojian.com/ajax-jsonp.html 一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRe ...

  4. 学习笔记:IDEA、原生ajax的三道练习题、Markdown

    前言 该从何说起呢?想写博客好久了,正好这个学期课很少(大三),可以静下心来写点东西(虽然事情依旧很多),总感觉记录和分享是一件很酷的事情.第一篇博客,第一次使用Markdown写博客,第一次使用ID ...

  5. javascript实现原生ajax

    自从javascript有了各种框架之后,比如jquery,使用ajax已经变的相当简单了.但有时候为了追求简洁,可能项目中不需要加载jquery这种庞大的js插件.但又要使用到ajax这种功能该如何 ...

  6. javascript实现原生ajax的几种方法介绍

    自从javascript有了各种框架之后,比如jquery,使用ajax已经变的相当简单了.但有时候为了追求简洁,可能项目中不需要加载jquery这种庞大的js插件.但又要使用到ajax这种功能该如何 ...

  7. 原生Ajax

    使用原生Ajax 验证用户名是否被注册 创建出注册信息: <h1>注册信息</h1><input type="text" name="txt ...

  8. JS原生ajax与Jquery插件ajax深入学习

    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

  9. 原生Ajax 和Jq Ajax

    前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开.服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的 ...

随机推荐

  1. 基于excel实现接口自动化测试

    本文档介绍如何使用excel管理接口测试用例并一键执行的实现方式,其中包括 python 读写excel, request库的基本操作,接口用例的设计 接口用例设计 用例字段描述 被依赖表达式: 示例 ...

  2. eclipse中字体、XML字体设置

    [修改编辑区中文字体大小]: Window > Preferences > General > Appearance > Colors and Fonts > Java ...

  3. RabbiMQ重新安装会遇到的错误-SpiritMark

    这里只做安装过程中遇到错误的介绍,不喜勿喷,如果对您有帮助右上角关注一下,是对我最大的肯定 重新安装的注意事项: 先卸载RabbitMQ,后卸载Erlang RabbitMQ卸载,选择uninstal ...

  4. OSM地图本地发布-如何生成各省市矢量地图

    目录 1.缘起 2.问题 3.分析 4.生成自定义地区矢量瓦片 4.1.启动docker 4.2.启动postGIS容器 4.3.设置不清理上次的结果 4.4.删除默认切图范围 4.5.修改切图层级和 ...

  5. SQL语句中case,when,then的用法

    用法如下bai: 复制代码 SELECT s.s_id, s.s_name, s.s_sex, CASE WHENs.s_sex='1'THEN'男' WHENs.s_sex='2'THEN'女' E ...

  6. 白嫖JetBrains正版全家桶!

    使用自己的开源项目,是可以白嫖JetBrains正版全家桶的! 前言 之前在学Go的时候,想着要用什么编辑器,网上的大佬都讲,想省事直接用Goland,用VsCode配置会存在一些未知的使用体验问题, ...

  7. 「Elasticsearch」ES重建索引怎么才能做到数据无缝迁移呢?

    背景 众所周知,Elasticsearch是⼀个实时的分布式搜索引擎,为⽤户提供搜索服务.当我们决定存储某种数据,在创建索引的时候就需要将数据结构,即Mapping确定下来,于此同时索引的设定和很多固 ...

  8. Thymeleaf语法总结 | 笔记分享

    Thymeleaf语法总结 一.Thymeleaf介绍 Thymeleaf是Spring boot推荐使用的模版引擎,直接以html显示,前后端可以很好的分离.   二.Thymeleaf语法(Thy ...

  9. 浅入 .NET Core 中的内存和GC知识

    目录 托管代码 自动内存管理 参考资料: [1]https://docs.microsoft.com/zh-cn/dotnet/standard/managed-code [2]:https://do ...

  10. Java基础-数据类型及变量

    Java基本语法 1.标识符(zhi) 含义:名字 类名.对象名.方法名.变量名.常量名-- 一个合法的标识符的组成:数字.字母._和$ 注意事项: 不能重复 不能以数字开头 区分大小写 不能以关键字 ...