// 通过createXHR()函数创建一个XHR对象
function createXHR() {
if(window.XMLHttpRequest) { // IE7、Firefox、Opera、Chrome和Safari
return new XMLHttpRequest();
}else if(window.ActiveXObject) { // IE6以下
var versions = ['MSXML2.XMLHttp','Microsoft.XMLHTTP'];
for (var i=,len = versions.length; i<len; i++){
try{
return new ActiveXObject(versions[i]);
break
} catch (e) {
console.log(e)
}
}
} else {
throw new Error('此浏览器不支持XHR对象')
}
} //封装ajax,参数为一个对象
function ajax(obj) {
var xhr = createXHR(); //创建XHR对象
// 通过使用随机字符串解决IE浏览器第二次默认获取缓存的问题
obj.url = obj.url + '?rand=' + Math.random();
obj.data = params(obj.data); //通过params()将名值对转换成字符串
//在使用XHR对象时,必须先调用open()方法
//它接收三个参数,:请求类型(get、post)、请求的URL和表示是否异步
xhr.open(obj.method,obj.url,obj.async) //打开和服务的链接
//若是get请求,则将数据加到url后面
if(obj.method === 'get'){
obj.url += obj.url.indexOf('?') === -? '?'+ obj.data : '&' + obj.data;
}
//如果是post请求
if (obj.method === 'post'){
//post需要自己设置http的请求头,来模仿表单提交
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(obj.data) //post方式将数据放在send()方法里 //send动作才是真正的给服务器按照上面open的url发送请求
} else {
xhr.send(null); //get方式则填null
} xhr.onreadystatechange = function () {
if (xhr.readyState == ){ //判断对象的状态是否完成
callback() //回调函数
}
} function callback() {
if (xhr.status == || xhr.status == ) { //判断http的交互是否成功,200表示成功
obj.success(xhr.responseText); //回调传递参数
} else {
alert('获取数据错误!错误代号:' + xhr.status + ',错误信息:' + xhr.statusText)
}
}
} //名值对转换为字符串
function params(data) {
var arr = [];
for (var i in data) {
//特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理
arr.push(encodeURIComponent(i)+ '=' + encodeURIComponent(data[i]))
}
return arr.join('&')
}

用原生js实现ajax的更多相关文章

  1. 原生js实现Ajax

    一般来说,大家可能都会习惯用JQuery提供的Ajax方法,但是用原生的js怎么去实现Ajax方法呢? JQuery提供的Ajax方法: $.ajax({ url: , type: '', dataT ...

  2. 使用原生js写ajax

    // 使用原生js 封装ajax // 兼容xhr对象 function createXHR(){ if(typeof XMLHttpRequest != "undefined") ...

  3. 表单验证--通过原生js模仿ajax的异步交互

    今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...

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

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

  5. 原生JS的Ajax技术

    1.同步和异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待  卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随意做其他事情,不会被卡 ...

  6. 原生js中用Ajax进行get传参

    原生js中用Ajax进行get传参 案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  7. 原生js实现ajax与jquery的ajax库,及json

    这是一篇笔记博客, Ajax: 和服务器进行数据交换(异步) 用js实现复杂的原理:用于发送请求的对象在不同的浏览器中是不同的 同源策略:ajax发送请求的url地址与服务器地址必须是同一域名,协议, ...

  8. 用原生js实现ajax、jsonp

    转载: http://www.cnblogs.com/yangheng/p/6065910.html 一.原生js实现ajax $.ajax({ url: '', type: 'post', data ...

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

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

  10. 原生js写Ajax

    //原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.挺对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...

随机推荐

  1. vue,react,angular本地配置nginx 环境单页面应用

    一.起因:项目使用VUE,和react.构建单页面应用.在nginx的环境下只有一个index.html入口.这时候默认能够访问到vue,和react 路由 配置中的首页.内部连接也能够跳转但是不能给 ...

  2. [转帖]PG里面的Citus简介----找时间学习一下.

    1. Citus是什么 是PostgreSQL的扩展,可以同PG一同安装,之后通过SQL命令加入到数据库中. [相关操作] ? 1 2 #创建Citus扩展: CREATE EXTENSION cit ...

  3. Yii 框架的Rbac [权限控制]

    转载自 xmlife 的博客 : http://blog.csdn.net/xmlife/article/details/50733451 1.首先我们要在配置文件的组件(component)里面配置 ...

  4. postman 学习网址

    postman使用详解: http://gold.xitu.io/entry/57597a62a341310061337885 https://www.getpostman.com/docs/writ ...

  5. Influxdb安装部署

    1.下载Influxdb并解压 2.下载上图中的nssm(辅助性工具) 3.  在安装目录执行cmd 输入 nssm install influxdb,其中Path选择安装文件中的influxd,Ar ...

  6. Before NOIP2017

    明天就比赛了呢! 说起来,这是我第二次,可能也是最后一次正式参加提高组的比赛了. 虽然是从初中就有参加信息学的学习,但是认真学习信息竞赛还是去年七月开始的.NOIP2016 中,我凭着两天的简单题和一 ...

  7. hdu 1540 Tunnel Warfare (线段树 区间合并)

    Tunnel Warfare Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...

  8. Flume自定义Source、Sink和Interceptor(简单功能实现)

    1.Event event是flume传输的最小对象,从source获取数据后会先封装成event,然后将event发送到channel,sink从channel拿event消费. event由头he ...

  9. noip2018 d2t3 保卫王国 解题报告

    保卫王国 电脑卡懒得把题面挪过来了. 朴素 \[ dp_{i,0}=\sum dp_{s,1}\\ dp_{i,1}=\sum \min(dp_{s,0},dp_{s,1})+p_i \] 然后直接动 ...

  10. 【bzoj1040】 ZJOI2008—骑士

    http://www.lydsy.com/JudgeOnline/problem.php?id=1040 (题目链接) 题意 一个基环森林,从中选出不相邻的若干个点使得这些点的点权和最大. Solut ...