使用原生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地址与服务器地址必须是同一域名,协议, ...
随机推荐
- C/C++学习之路----volatile
因为经常看见volatile这个关键词,想想自己对这个volatile也不是很清楚,仅仅知道它表明变量是易于变化的和防止编译器优化.所以就在网上找了一些其他道友对于volatile的理解,仔仔细细看了 ...
- 第二个Sprint冲刺第七天
讨论地点:宿舍 讨论成员:邵家文.李新.朱浩龙.陈俊金 讨论:整理已完成的功能
- HDU 1005 Number Sequence(AC代码)
#include <stdio.h> #include <string.h> int main() { int a,b,n; int i; ]={}; f[]=; f[]=; ...
- CSS 实现:元素相对于文档水平垂直居中
[要求]:如何用 CSS 实现水平/垂直居中一个元素(相对于文档) <body> <div class="content"></div> < ...
- 【转】eclipse 安装插件
eclipse安装插件或许没有什么多的可讲,但对于刚刚接触eclipse这款IDE的新手来说,可能还是会有点棘手! eclipse安装插件大致三种方法: 方法一:自身安装器 使用eclipse的Sof ...
- UVa 1388 - Graveyard
题意:有一个周长为10000的圆上等距分布着n个雕塑,现在又加入m个雕塑,位置随意,希望n+m个雕塑仍然均匀分布.这就要移动其中一些雕像,求移动的最小距离. 这个题的方法很巧妙,首先将整个圆分成(m+ ...
- java如何获取当前机器ip和容器port
获取当前机器ip: private static String getIpAddress() throws UnknownHostException { InetAddress address = I ...
- html---文本框样式;
一.一个单行文本框的例子 <form name="form1" action="mailto:3400982550@qq.com" method=&quo ...
- c#部分---好题--顺便练练“类的知识”
练习:判断邮箱格式是否正确 //1.有且只能有一个@ //2.不能以@开头 //3.@之后至少有一个. //4.@和.不能靠在一起 //5.不能以.结尾
- leetcode 91 Decode Ways ----- java
A message containing letters from A-Z is being encoded to numbers using the following mapping: 'A' - ...