现在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的更多相关文章

  1. 原生js发送ajax请求

    堕落了一阵子了,今天打开博客,发现连登录的用户名和密码都不记得了.2016年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...

  2. 原生JS发送Ajax请求、JSONP

    一.JS原生Ajax Ajax=异步Javascript+XML: ajax是一种数据请求的方式,不需要刷新整个页面.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ajax的核心 ...

  3. 原生js实现Ajax请求

    总的来说,Ajax是与服务器交换数据并更新部分网页的艺术,在不重新加载整个网页的情况下,异步请求数据并刷新页面.举一个小的例子:Goole搜索页面.当用户在输入框输入关键字的时候,JavaScript ...

  4. 原生js写ajax请求(复习)

    今天本地想测试一个接口,不想用框架想用js快速完成,突然发现,我居然忘了这个最基本的代码.好吧,只能复习一波. 在框架泛滥的今天,用惯$.ajax(),axios,superAgent等框架的你们,还 ...

  5. 原生js的ajax请求

    传统方法的缺点: 传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次 ...

  6. 原生js版ajax请求

    function getXMLHttpRequest() { var xhr; if(window.ActiveXObject) { xhr= new ActiveXObject("Micr ...

  7. 原生js实现ajax封装

    一.什么是ajax? 定义:Ajax(Asynchronous Java and XML的缩写)是一种异步请求数据的web开发技术,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并 ...

  8. 原生JS实现Ajax及Ajax的跨域请求

      前  言          如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...

  9. 原生JS实现ajax 发送post请求

    1. [代码]原生JS实现ajax 发送post请求 <script> var oStr = ''; var postData = {}; var oAjax = null; //post ...

随机推荐

  1. react中处理后台接口返回存在html标签的字符串

    render{ return( <div> <div>接下来是例子</div> <div dangerouslySetInnerHTML={{__html:& ...

  2. 【POJ - 3087】Shuffle'm Up(模拟)

    Shuffle'm Up 直接写中文了 Descriptions: 给定两个长度为len的字符串s1和s2, 接着给出一个长度为len*2的字符串s12. 将字符串s1和s2通过一定的变换变成s12, ...

  3. C++学习笔记-继承

    类之间可以建立联系,这就使得类可以有某种关系 类之间的关系 has-A:包含关系,一个类使用另一个已经定义好的类的数据 uses-A:使用关系,友元或者对象参数传递 is-A:是的关系,这就是继承,具 ...

  4. 第七次java实验报告

    Java实验报告 班级 计科二班 学号20188437 姓名 何磊 完成时间 2019/10/25 评分等级 实验四 类的继承 实验内容 )总票数1000张:(2)10个窗口同时开始卖票:(3)卖票过 ...

  5. pikachu-SQL注入

    参考网址: http://www.mamicode.com/info-detail-2795438.html

  6. 21天学通Python课后实验题4.6

    21天学通Python课后实验题4.6 1. 编程实现用户输入一门课程的两门子课程成绩,第一门子课程60分以上,则显示“通过”,第一门子课程不及格,则显示“未通过”,第一门子课程及格,而第二门子课程不 ...

  7. (5.12)mysql高可用系列——复制中的在线切换GTID模式/增加节点/删除节点

    目录 [0]需求 前提,已经假设好基于传统异步复制的主库和从库1. [0.1]传统异步切换成基于GTID的无损模式 [0.2]增加特殊要求的从库 [1]操作环境 [2]构建 复制->半同步复制 ...

  8. 自然语言处理工具pyhanlp分词与词性标注

    Pyhanlp分词与词性标注的相关内容记得此前是有分享过的.可能时间太久记不太清楚了.以下文章是分享自“baiziyu”所写(小部分内容有修改),供大家学习参考之用. 简介 pyhanlp是HanLP ...

  9. round函数——银行家舍入算法

    在处理四舍五入时,相信大部分人会使用math.round函数(不同的语言应该都有).有没有考虑过,这个函数是不是自己所需要的? po主碰到的问题是用来计算平均分.有个顶真的学生反映,明明是86.5,怎 ...

  10. 福建工程学院第十四届ACM校赛G题题解

    外传:编剧说了不玩游戏不行 题意: 有n个石堆,我每次只能从某一堆中取偶数个石子,你取奇数个,我先手,先不能操作的人输.问最后谁能赢. 思路: 这个题仔细想想,就发现,取奇数的人有巨大的优势,因为假设 ...