博客搬家了,欢迎大家关注,https://bobjin.com

js中XMLHttpRequest对象实现GET、POST异步传输

 /*
* 统一XHR接口
*/
function createXHR() {
// IE7+,Firefox, Opera, Chrome ,Safari
if(typeof XMLHttpRequest != "undefined") {
return new XMLHttpRequest();
}
// IE6-
else if(typeof ActiveXObject != "undefined"){
if(typeof arguments.callee.activeXString != "string") {
var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXMLHttp"],
i, len;
for(i = 0, len = versions.length; i < len; i++) {
try{
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
}catch(ex) {
alert("请升级浏览器版本");
}
}
}
return arguments.callee.activeXString;
}else {
throw new Error("XHR对象不可用");
}
} var xhr = createXHR();
// 定义xhr对象的请求响应事件
xhr.onreadystatechange = function() {
switch(xhr.readyState) {
case 0 :
//alert("请求未初始化");
break;
case 1 :
//alert("请求启动,尚未发送");
break;
case 2 :
//alert("请求发送,尚未得到响应");
break;
case 3 :
//alert("请求开始响应,收到部分数据");
break;
case 4 :
alert("请求响应完成得到全部数据");
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
var data = xhr.responseText;
alert(data);
}else {
alert("Request was unsuccessful : " + xhr.status + " " + xhr.statusText);
}
break;
}
};
/*
// get请求
// get请求添加查询参数
function urlParam(url, name, value) {
url += (url.indexOf('?') == -1 ) ? '?' : '&' ;
url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
return url;
} // get请求
url = urlParam("example.php","name","ccb");
url = urlParam(url,"pass","123");
xhr.open("get", url ,true);
xhr.send(null);*/ // post请求
// 格式化post 传递的数据
function postDataFormat(obj){
if(typeof obj != "object" ) {
alert("输入的参数必须是对象");
return;
} // 支持有FormData的浏览器(Firefox 4+ , Safari 5+, Chrome和Android 3+版的Webkit)
if(typeof FormData == "function") {
var data = new FormData();
for(var attr in obj) {
data.append(attr,obj[attr]);
}
return data;
}else {
// 不支持FormData的浏览器的处理
var arr = new Array();
var i = 0;
for(var attr in obj) {
arr[i] = encodeURIComponent(attr) + "=" + encodeURIComponent(obj[attr]);
i++;
}
return arr.join("&");
}
} // post请求
var data = {name : "ccb" , pass : "123"};
xhr.open("post", "example.php", true);
// 不支持FormData的浏览器的处理
if(typeof FormData == "undefined") {
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}
xhr.send(postDataFormat(data));
博客搬家了,欢迎大家关注,https://bobjin.com

js中XMLHttpRequest对象实现GET、POST异步传输的更多相关文章

  1. js中判断对象具体类型

    大家可能知道js中判断对象类型可以用typeof来判断.看下面的情况 <script> alert(typeof 1);//number alert(typeof "2" ...

  2. 浅解析js中的对象

    浅解析js中的对象 原文网址:http://www.cnblogs.com/foodoir/p/5971686.html,转载请注明出处. 前面的话: 说到对象,我首先想到的是每到过年过节见长辈的时候 ...

  3. JavaScript学习12 JS中定义对象的几种方式

    JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...

  4. js中推断对象详细类型

    大家可能知道js中推断对象类型能够用typeof来推断. 看以下的情况 <script> alert(typeof 1);//number alert(typeof "2&quo ...

  5. JavaScript学习12 JS中定义对象的几种方式【转】

    avaScript学习12 JS中定义对象的几种方式 转自:  http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象. ...

  6. JS中有关对象的继承以及实例化、浅拷贝深拷贝的奥秘

    一.属性的归属问题 JS对象中定义的属性和方法如果不是挂在原型链上的方法和属性(直接通过如类似x的方式进行定义)都只是在该对象上,对原型链上的没有影响.对于所有实例共用的方法可直接定义在原型链上这样实 ...

  7. JS中定义对象和集合

    在js中定义对象: 方式一: var obj = {}; obj['a']=1; obj['b']=2; 方式二: var obj=new Object(); obj.a=1; obj.b=2; 在j ...

  8. Js中Map对象的使用

    Js中Map对象的使用 1.定义 键/值对的集合. 2.语法 mapObj = new Map() 3.备注 集合中的键和值可以是任何类型.如果使用现有密钥向集合添加值,则新值会替换旧值. 4.属性 ...

  9. JS中的对象和方法简单剖析

    众所周知,在js中对象就是精髓,不理解对象就是不理解js. 那么什么事js中的对象呢? 在js中,几乎一切皆对象: Boolean ,String,Number可以是对象(或者说原生数据被认作对象): ...

随机推荐

  1. android-plugmgr源代码分析

    android-plugmgr是一个Android插件加载框架,它最大的特点就是对插件不需要进行任何约束.关于这个类库的介绍见作者博客,市面上也有一些插件加载框架,但是感觉没有这个好.在这篇文章中,我 ...

  2. 触摸java常量池

    java常量池是一个经久不衰的话题,也是面试官的最爱,题目花样百出,小菜早就对常量池有所耳闻,这次好好总结一下. 理论 小菜先拙劣的表达一下jvm虚拟内存分布:      程序计数器是jvm执行程序的 ...

  3. IOS SWIFT 启动流程学习

    其实和我们java.c一样通过一个main函数作为入口. main封装在了UIApplicationMain里面.所以后者变成启动入口. 他会扫描Info.plist,找到需要加载的入口storybo ...

  4. .net使用cefsharp开源库开发chrome浏览器(二)

    离上篇写介绍pc端的混合开发和为什么以cefsharp入手研究混合开发已经有好几天,一直忙,抽不出时间继续写怎么搭建cefsharp开发环境.其实没有时间是借口,一切都是懒,没有爱到深处. 今天继续写 ...

  5. 浏览器执行js代码的机制--对于我们深入了解js有很大的帮助,同时面试时候也都能用得到。

    前端小菜又来了,这些天每天工作,晚上学习太累了.趁星期天给自己放个假.写完这个博客就要出去high了.鸡冻.接下来进入正题啦, 你可能要问,我们学习这个有什么用啊?这样我先给大家来个小小的面试题. a ...

  6. WaitType:ASYNC_NETWORK_IO

    官方文档的定义,是指SQL Server 产生的结果集需要经过Network传递到Client,Network不能很快将结果集传输到Client,导致结果集仍然驻留在SQL Server的Sessio ...

  7. @Async in Spring--转

    原文地址:http://www.baeldung.com/spring-async 1. Overview In this article we’ll explore the asynchronous ...

  8. 趣谈unicode,ansi,utf-8,unicode big endian这些编码有什么区别(转载)

    从头讲讲编码的故事.那么就让我们找个草堆坐下,先抽口烟,看看夜晚天空上的银河,然后想一想要从哪里开始讲起.嗯,也许这样开始比较好…… 很久很久以前,有一群人,他们决定用8个可以开合的晶体管来组合成不同 ...

  9. 【jQuery小实例】---2自定义动画

    ---本系列文章所用使用js均可在本博客文件中找到 本节用jQuery完一个简易的动画效果,一个小驴跑跑的效果.和一个类似qq面板效果.大致也分为三步:添加jquery-1.8.3.js文件.这个是不 ...

  10. 1Z0-053 争议题目解析694

    1Z0-053 争议题目解析694 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 694.As part of archiving the historical data, you ...