使用原生js写ajax
// 使用原生js 封装ajax
// 兼容xhr对象
function createXHR(){
if(typeof XMLHttpRequest != "undefined"){ // 非IE6浏览器
return new XMLHttpRequest();
}else if(typeof ActiveXObject != "undefined"){ // IE6浏览器
var version = [
"MSXML2.XMLHttp.6.0",
"MSXML2.XMLHttp.3.0",
"MSXML2.XMLHttp",
];
for(var i = 0; i < version.length; i++){
try{
return new ActiveXObject(version[i]);
}catch(e){
//跳过
}
}
}else{
throw new Error("您的系统或浏览器不支持XHR对象!");
}
}
// 转义字符
function params(data){
var arr = [];
for(var i in data){
arr.push(encodeURIComponent(i) + "=" + encodeURIComponent(data[i]));
}
return arr.join("&");
}
// 封装ajax
function ga_ajax(obj){
var xhr = createXHR();
obj.url = obj.url + "?rand=" + Math.random(); // 清除缓存
obj.data = params(obj.data); // 转义字符串
if(obj.method === "get"){ // 判断使用的是否是get方式发送
obj.url += obj.url.indexOf("?") == "-1" ? "?" + obj.data : "&" + obj.data;
}
// 异步
if(obj.async === true){
// 异步的时候需要触发onreadystatechange事件
xhr.onreadystatechange = function(){
// 执行完成
if(xhr.readyState == 4){
callBack();
}
}
}
xhr.open(obj.method,obj.url,obj.async); // false是同步 true是异步 // "demo.php?rand="+Math.random()+"&name=ga&ga",
if(obj.method === "post"){
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(obj.data);
}else{
xhr.send(null);
}
// xhr.abort(); // 取消异步请求
// 同步
if(obj.async === false){
callBack();
}
// 返回数据
function callBack(){
// 判断是否返回正确
if(xhr.status == 200){
obj.success(xhr.responseText);
}else{
obj.Error("获取数据失败,错误代号为:"+xhr.status+"错误信息为:"+xhr.statusText);
}
}
} var html = document.getElementsByTagName("html")[0];
html.onclick = function(){
ga_ajax({
"method" : "post",
"url" : "dem0o.php",
"data" : {
"name" : "gaga",
"age" : 10000000,
"num" : "12346&598"
},
"success" : function(data){
alert(data);
},
"Error" : function(text){
alert(text);
},
"async" : false
});
}
使用原生js写ajax的更多相关文章
- 原生js写Ajax
//原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.挺对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...
- 原生JS写Ajax的请求函数
一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...
- 原生js写ajax请求(复习)
今天本地想测试一个接口,不想用框架想用js快速完成,突然发现,我居然忘了这个最基本的代码.好吧,只能复习一波. 在框架泛滥的今天,用惯$.ajax(),axios,superAgent等框架的你们,还 ...
- 用原生JavaScript写AJAX
//原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.听对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...
- 原生JS写的ajax函数
参照JQuery中的ajax功能,用原生JS写了一个ajax,功能相对JQuery要少很多,不过基本功能都有,包括JSONP. 调用的方式分为两种: 1. ajax(url, {}); 2. ajax ...
- 表单验证--通过原生js模仿ajax的异步交互
今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...
- 原生js中用Ajax进行get传参
原生js中用Ajax进行get传参 案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
- 原生JS封装ajax方法
http://blog.sucaijiayuan.com/article/89 jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只 ...
- 原生js实现ajax与jquery的ajax库,及json
这是一篇笔记博客, Ajax: 和服务器进行数据交换(异步) 用js实现复杂的原理:用于发送请求的对象在不同的浏览器中是不同的 同源策略:ajax发送请求的url地址与服务器地址必须是同一域名,协议, ...
随机推荐
- 利用phpmyadmin设置mysql主从同步(或者备份)
一.实现同步的原理: 在主数据库与 从数据库 之间的实现整个复制过程主要由三个线程来完成,其中两个线程(Sql线程和IO线程)在 从数据库 端,另外一个线程(IO线程)在 主数据库 端. 注意: 1. ...
- 第二个Sprint冲刺第三天
讨论地点:宿舍 讨论成员:邵家文.李新.朱浩龙.陈俊金 燃尽图: 待解决的问题: 需要将主界面重新布局,下面的是原始主界面: 想实现一个统计的功能,今天就完成了一个基本的布局: 开发感悟:爱在何方
- Ubuntu12.04更新openssl使用源码
下载openssl新版本源码和编译安装 wget ftp://ftp.openssl.org/source/openssl-1.0.2f.tar.gz tar zxf ./openssl-1.0.2f ...
- Oracle 触发器,事物
触发器:自动执行,可以实现表的约束. 1.行级触发器: CREATE OR REPLACE TRIGGER del_deptid AFTER DELETE ON deptment --触发器条件 DE ...
- log4j 分类输出
一个log4j的问题也是折磨了我两天了. 终于算是实现了个符合需求的小demo.然而,我必须吧log4j搞定,这个乐塞. 需求描述: 用xml配置文件,将debug.info.warn.error分类 ...
- vmware上的Linux获取uuid
在挂载asm硬盘时需要硬盘的UUID 虚拟机配置中需要增加对UUID的支持. 在配置文件vmx文件中增加如下内容 disk.locking="FALSE" disk.EnableU ...
- iOS学习笔记---oc语言第七天
类的扩展 NSDate是Cocoa中用于处理日期和时间的基础类,封装了某一给定的时刻,具体的日期 时间和时区 使用+date方法获取当前日期和时间 NSDate *date = [NSDate dat ...
- Java-->分割文件
--> 通过IO 流将一个文件分割成多份 package com.dragon.java.splitfile; import java.io.File; import java.io.FileI ...
- tools/build.c
/* * linux/tools/build.c * * Copyright (C) 1991, 1992 Linus Torvalds */ /* * This file builds a d ...
- AndroidStudio导入Android-PullToRefresh
方法已经写到我的微信公众号中,公众号二维码在下面 本人联系方式: 更多精彩分享,可关注我的微信公众号: 若想给予我分享更多知识的动力,请扫描下面的微信打赏二维码,谢谢!: 微信号:WeixinJung ...