用原生js实现ajax
// 通过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的更多相关文章
- 原生js实现Ajax
一般来说,大家可能都会习惯用JQuery提供的Ajax方法,但是用原生的js怎么去实现Ajax方法呢? JQuery提供的Ajax方法: $.ajax({ url: , type: '', dataT ...
- 使用原生js写ajax
// 使用原生js 封装ajax // 兼容xhr对象 function createXHR(){ if(typeof XMLHttpRequest != "undefined") ...
- 表单验证--通过原生js模仿ajax的异步交互
今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...
- 原生JS实现Ajax及Ajax的跨域请求
前 言 如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...
- 原生JS的Ajax技术
1.同步和异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待 卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随意做其他事情,不会被卡 ...
- 原生js中用Ajax进行get传参
原生js中用Ajax进行get传参 案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
- 原生js实现ajax与jquery的ajax库,及json
这是一篇笔记博客, Ajax: 和服务器进行数据交换(异步) 用js实现复杂的原理:用于发送请求的对象在不同的浏览器中是不同的 同源策略:ajax发送请求的url地址与服务器地址必须是同一域名,协议, ...
- 用原生js实现ajax、jsonp
转载: http://www.cnblogs.com/yangheng/p/6065910.html 一.原生js实现ajax $.ajax({ url: '', type: 'post', data ...
- 原生JS实现ajax 发送post请求
1. [代码]原生JS实现ajax 发送post请求 <script> var oStr = ''; var postData = {}; var oAjax = null; //post ...
- 原生js写Ajax
//原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.挺对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...
随机推荐
- vue,react,angular本地配置nginx 环境单页面应用
一.起因:项目使用VUE,和react.构建单页面应用.在nginx的环境下只有一个index.html入口.这时候默认能够访问到vue,和react 路由 配置中的首页.内部连接也能够跳转但是不能给 ...
- [转帖]PG里面的Citus简介----找时间学习一下.
1. Citus是什么 是PostgreSQL的扩展,可以同PG一同安装,之后通过SQL命令加入到数据库中. [相关操作] ? 1 2 #创建Citus扩展: CREATE EXTENSION cit ...
- Yii 框架的Rbac [权限控制]
转载自 xmlife 的博客 : http://blog.csdn.net/xmlife/article/details/50733451 1.首先我们要在配置文件的组件(component)里面配置 ...
- postman 学习网址
postman使用详解: http://gold.xitu.io/entry/57597a62a341310061337885 https://www.getpostman.com/docs/writ ...
- Influxdb安装部署
1.下载Influxdb并解压 2.下载上图中的nssm(辅助性工具) 3. 在安装目录执行cmd 输入 nssm install influxdb,其中Path选择安装文件中的influxd,Ar ...
- Before NOIP2017
明天就比赛了呢! 说起来,这是我第二次,可能也是最后一次正式参加提高组的比赛了. 虽然是从初中就有参加信息学的学习,但是认真学习信息竞赛还是去年七月开始的.NOIP2016 中,我凭着两天的简单题和一 ...
- hdu 1540 Tunnel Warfare (线段树 区间合并)
Tunnel Warfare Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)To ...
- Flume自定义Source、Sink和Interceptor(简单功能实现)
1.Event event是flume传输的最小对象,从source获取数据后会先封装成event,然后将event发送到channel,sink从channel拿event消费. event由头he ...
- noip2018 d2t3 保卫王国 解题报告
保卫王国 电脑卡懒得把题面挪过来了. 朴素 \[ dp_{i,0}=\sum dp_{s,1}\\ dp_{i,1}=\sum \min(dp_{s,0},dp_{s,1})+p_i \] 然后直接动 ...
- 【bzoj1040】 ZJOI2008—骑士
http://www.lydsy.com/JudgeOnline/problem.php?id=1040 (题目链接) 题意 一个基环森林,从中选出不相邻的若干个点使得这些点的点权和最大. Solut ...