原生Ajax封装随笔
XMLHttpRequest 对象用于和服务器交换数据。我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:
open(method,url,async)
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)
send(string)
string:仅用于 POST 请求
注:如果需要像 HTML 表单那样 POST 数据,需设置 setRequestHeader() 来添加 HTTP 头,然后在 send() 方法中规定您希望发送的数据:XMLHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");示例如下代码58行所示。
var Factory = {
create: function() {
return function() { this.init.apply(this, arguments); }
}
} var Ajax = Factory.create(); Ajax.prototype = {
init: function (successCallback, failureCallback) {
this.xhr = this.createXMLHttpRequest();
var xhrTemp = this.xhr;
var successFunc = null;
var failFunc = null; if (successCallback != null && typeof successCallback == "function") {
successFunc = successCallback;
} if (failureCallback != null && typeof failureCallback == "function") {
failFunc = failureCallback;
} this.get.apply(this, arguments);
this.post.apply(this, arguments); this.xhr.onreadystatechange = function () {
if (xhrTemp.readyState == ) {
if (xhrTemp.status == ) {
if (successFunc != null) {
successFunc(xhrTemp.responseText, xhrTemp.responseXML);
}
}
else {
if (failFunc != null) {
failFunc(xhrTemp.status);
}
}
}
}
},
get: function (url, async) {
this.xhr.open("GET", url, async);
this.xhr.send();
},
createXMLHttpRequest: function () {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
else {
return new ActiveXObject("Microsoft.XMLHTTP");
} throw new Error("Ajax is not supported by the browser!");
},
post: function (url, data, async) {
this.xhr.open("POST", url, async);
this.xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
this.xhr.send(data);
},
random: function (length) {
var array = new Array("", "", "", "", "", "", "", "", "");
var len = parseInt(length);
var key = ""; for (var i = ; i < len; i++) {
key += Math.floor(Math.random() * );
} return key;
}
}
对于GET与POST方法使用如下:
function get() {
var ajax = new Ajax(success,fail);
ajax.get("Scripts/Util.js", true);
} function post() {
var ajax = new Ajax(success, fail);
ajax.post("AjaxService.asmx/GetArgs","name=jasen", true);
} function success(responseText, responseXML) {
alert("result:" + responseText);
} function fail(status) {
alert("status:" + status);
}
以上仅为练习随笔,仅供参考....
原生Ajax封装随笔的更多相关文章
- 原生ajax封装,包含post、method方式
原生ajax封装,包含post.method方式 function ajax(method, url, data, success) { var xhr = null; try { xhr = new ...
- 原生 Ajax 封装 和 Axios 二次 封装
AJAX 异步的JavaScript与XML技术( Asynchronous JavaScript and XML ) Ajax 不需要任何浏览器插件,能在不更新整个页面的前提下维护数据,但需要用户允 ...
- 原生ajax封装及用法
/* 封装ajax函数 * @param {string}opt.type http连接的方式,包括POST和GET两种方式 * @param {string}opt.url 发送请求的url * @ ...
- 原生AJAX封装
var ajaxHelper = { /*1.0 浏览器兼容的方式创建异步对象*/ makeXHR: function () { //声明异步对象变量 var xmlHttp = false; //声 ...
- 原生ajax封装,数据初始化,
var ajaxTool = { setting : { method : 'get', url : location.href, data : '', callback : function(){a ...
- 原生js封装ajax:传json,str,excel文件上传表单提交
由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(u ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 原生javascript封装ajax和jsonp
在我们请求数据时,完成页面跨域,利用原生JS封装的ajax和jsonp: <!DOCTYPE html> <html lang="en"> <head ...
- js原生Ajax的封装与使用
一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR: function() { return new XMLHttpRequest ...
随机推荐
- android端,webview内url跳转到app本地
这是和一个前端同事沟通. app内嵌入他的web页,要通过web页内的url跳转到app的详细内容. 他的android同事,没有思路. 其实嵌入web页,用的webview控件,只要能找到webvi ...
- 打造 html5 文件上传组件,实现进度显示及拖拽上传,支持秒传+分片上传+断点续传,兼容IE6+及其它标准浏览器
老早就注册了博客园帐号,昨天才发现,连博客都没开,Github也是一样,深觉惭愧,赶紧潜个水压压惊`(*∩_∩*)′ 言归正传.大概许多人都会用到文件上传的功能,上传的库貌似也不少,比如(jQuery ...
- 查看Oracle中是否有锁表的sql
1.查看是否有锁表的sql 代码如下: select 'blocker('||lb.sid||':'||sb.username||')-sql:'|| qb.sql_text blockers, 'w ...
- Office组件之Spire.XLS的DotNet操作
Overview 在项目中,我们经常需要将程序中获得的大量数据导出到Excel表格中,打印报表:进一步,还可能生成其折线图,对数据的变化趋势进行分析,从而更好地开展项目工作. 最近,我发现了一个对于D ...
- Docker学习<一>--初体验Windows环境下安装
背景 今天想试用spring boot与jwt协议的实现,配套就需要使用redis,但redis似乎windows环境版本部署起来不是那么舒心,果断尝试使用docker. 下载 下载地址: 稳定版:h ...
- Futoshiki求解
Futoshiki求解 Futoshiki是对于一个n的方阵,需要满足如下条件: ·每一行和每一列的元素都不能重复,即每一行和每一列1到n,n个数字都出现,且只出现一次. ·同一行或同一列中相邻两个元 ...
- Spring 4 官方文档学习 Spring与Java EE技术的集成
本部分覆盖了以下内容: Chapter 28, Remoting and web services using Spring -- 使用Spring进行远程和web服务 Chapter 29, Ent ...
- RHEL7学习之crontab无法执行ntpdate
1,"/etc/crontab"文件 [root@localhost ~]# more /etc/crontab SHELL=/bin/bash PATH=/sbin:/bin:/ ...
- JSON的一点:
目录一:把 JSON 文本转换为 JavaScript 对象二:JSON 实例 - 来自字符串的对象 一.把 JSON 文本转换为 JavaScript 对象JSON 最常见的用法之一,是从 web ...
- 关于myeclipse的破解的问题
myeclipse的破解的问题,也是在网上down 了一下,发现并不需要找到什么注册的软件都可以自动完成的哦! 博客地址:http://blog.csdn.net/fuxiaohui/article/ ...