基于考虑jquery太大了,其中ajax部分也占了不少体积的原因,所以还是自己来写个简单的类库,今天花了点时间,加上实现ajax请求模块,实现简单get、post提交、form表单提交功能:
// ajax--start
/**
* 实例化XmlHttpRequest的方法<br />
*
* 返回对象具有如下属性:<br />
* responseBody 将回应信息正文以unsigned byte数组形式返回.只读<br />
* responseStream 以Ado Stream对象的形式返回响应信息.只读<br />
* responseText 将响应信息作为字符串返回.只读<br />
* responseXML 将响应信息格式化为Xml Document对象并返回,只读<br />
* status 返回当前请求的http状态码.只读<br />
* statusText 返回当前请求的响应行状态,只读<br />
*
* 返回对象具有如下方法:<br />
* abort 取消当前请求<br />
* getAllResponseHeaders 获取响应的所有http头<br />
* getResponseHeader 从响应信息中获取指定的http头<br />
* open 创建一个新的http请求,并指定此请求的方法、URL以及验证信息(用户名/密码)<br />
* send 发送请求到http服务器并接收回应<br />
* setRequestHeader 单独指定请求的某个http头
*/
var initXmlHttpRequest = window.ActiveXObject ?
/*
* Microsoft failed to properly implement the XMLHttpRequest in IE7 (can't
* request local files), so we use the ActiveXObject when it is available
* Additionally XMLHttpRequest can be disabled in IE7/IE8 so we need a
* fallback.
*/
function() {
if (window.location.protocol !== "file:") {
try {
return new window.XMLHttpRequest();
} catch (xhrError) {
}
}
try {
return new window.ActiveXObject("MSXML2.XMLHTTP");// Msxml2.XMLHTTP是高版本,受msxml3.dll+支持
} catch (activeError_MSXML2_XMLHTTP) {
try {
return new window.ActiveXObject("Microsoft.XMLHTTP");// Microsoft.XMLHTTP是低本,一般是msxml2.6以下版本使用
} catch (activeError_Microsoft_XMLHTTP) {
}
}
} :
// 其他所有浏览器, 使用标准XMLHttpRequest对象
function() {
return new window.XMLHttpRequest();
};
var doAjax = function(url, method, callbacks, async) {
var xhr = false;
xhr = initXmlHttpRequest();
if (!xhr)
return false;
if (!method || !url || !async)
return false;
xhr.open(method, url, async);
if (method == "POST")
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
/**
* readyState 返回当前请求的状态,只读。定义如下:<br />
* 0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)<br />
* 1 (初始化) 对象已建立,尚未调用send方法<br />
* 2 (发送数据) send方法已调用,但是当前的状态及http头未知<br />
* 3 (数据传送中)已接收部分数据,因为响应及http头不全,
* 这时通过responseBody和responseText获取部分数据会出现错误<br />
* 4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据<br />
*/
if (xhr.readyState == 1) {// onLoadingInternal
if (callbacks.onLoading != null)
callbacks.onLoading();
}
if (xhr.readyState == 2) {// onLoadedInternal
if (callbacks.onLoaded != null)
callbacks.onLoaded();
}
if (xhr.readyState == 3) {// onInteractiveInternal
if (callbacks.onInteractive != null)
callbacks.onInteractive();
}
if (xhr.readyState == 4) {// onCompleteInternal
if (callbacks.onComplete != null)
callbacks.onComplete();
if (xhr.status == 200) {
if (callbacks.onSuccess != null)
callbacks.onSuccess(xhr.responseText);
}
}
}
if (method == "POST")
xhr.send(this.content);
else
xhr.send(null);
};
// 把form表单格式化为url格式
var serializeForm = function(form) {
var els = form.elements;
var len = els.length;
var queryString = "";
this.addField = function(name, value) {
if (queryString.length > 0) {
queryString += "&";
}
queryString += encodeURIComponent(name) + "=" + encodeURIComponent(value);
};
for ( var i = 0; i < len; i++) {
var el = els[i];
if (!el.disabled) {
switch (el.type) {
case 'text':
case 'password':
case 'hidden':
case 'textarea':
this.addField(el.name, el.value);
break;
case 'select-one':
if (el.selectedIndex >= 0) {
this.addField(el.name, el.options[el.selectedIndex].value);
}
break;
case 'select-multiple':
for ( var j = 0; j < el.options.length; j++) {
if (el.options[j].selected) {
this.addField(el.name, el.options[j].value);
}
}
break;
case 'checkbox':
case 'radio':
if (el.checked) {
this.addField(el.name, el.value);
}
break;
}
}
}
return queryString;
};
jMeteor.extend( { ajax : function(options) {
var ajaxSettings = {};
for (name in options) {
ajaxSettings[name] = options[name];
}
if (options["form"] != null) {
var theform = options["form"];
if (ajaxSettings.url == null)// 如果只定义form,没定义url
ajaxSettings.url = theform.action + "?" + serializeForm(theform);
else {// 如果form和url同时定义,则已url为准//如果form和url同时定义,则已url为准
var s = (ajaxSettings.url.indexOf("?") == -1) ? "?" : "&";
ajaxSettings.url = ajaxSettings.url + s + serializeForm(theform);
}
if (ajaxSettings.type == null)// 如果form和type同时定义,则已url为准//如果form和type同时定义,则已type为准
ajaxSettings.type = theform.method.toUpperCase();
}
ajaxSettings.callbacks = {};
ajaxSettings.callbacks.onLoading = options['onLoading'];
ajaxSettings.callbacks.onLoaded = options['onLoaded'];
ajaxSettings.callbacks.onInteractive = options['onInteractive'];
ajaxSettings.callbacks.onComplete = options['onComplete'];
ajaxSettings.callbacks.onSuccess = options['onSuccess'];
doAjax(ajaxSettings.url, ajaxSettings.type, ajaxSettings.callbacks, true);
},
get : function(url, callbacks) {
return doAjax(url, "GET", callbacks, true);
},
post : function(url, callbacks) {
return doAjax(url, "POST", callbacks, true);
},
form : function(form, callbacks) {
var options = {};
options["form"] = form;
for (name in callbacks) {
options[name] = callbacks[name];
}
return jMeteor.ajax(options);
} });
// ajax--end
调用方法:
function doAjaxGet() {
$.get('http://localhost/test/testAjax.do',
{onSuccess:function(d) { alert("Success:"+d); }});
}
function doAjaxPost() {
$.post('http://localhost/test/testAjax.do',
{onSuccess:function(d) { alert("Success:"+d); }});
}
function doAjaxForm() {
$.form(document.searchFrm,
{onSuccess:function(d) { alert("Success:"+d); }});
}
function doAjaxAjax() {
$.ajax({
type: "GET",
url: "http://localhost/test/testAjax.do",
onLoading:function() { alert("Loading"); },
onLoaded:function() { alert("Loaded"); },
onInteractive:function() { alert("Interactive"); },
onComplete:function() { alert("Complete"); },
onSuccess:function(d) { alert("Success:"+d); }
});
}
// 如果form和url同时定义,则已url为准//如果form和url同时定义,则已url为准
// 如果form和type同时定义,则已url为准//如果form和type同时定义,则已type为准
function doAjaxAjaxForm() {
$.ajax({
type: "GET",
url: "http://localhost/test/testAjax.do?a=3",
form : document.searchFrm,
onLoading:function() { alert("Loading"); },
onLoaded:function() { alert("Loaded"); },
onInteractive:function() { alert("Interactive"); },
onComplete:function() { alert("Complete"); },
onSuccess:function(d) { alert("Success:"+d); }
});
}
现在只是实现一些简单功能,以后再改进改进。
分享到:
相关推荐
原生javascript实现ajax发送pos请求,这样可以脱离jquery框架,
但是对于h5的ajax请求并没有提供干涉的接口,这意味着我们不能在webview中干涉javascript发起的http请求,而有时候我们确实需要能够截获ajax请求并实现一些功能如:统一的网络请求管理、cookie同步、证书校验、访问...
所以接下来便用原生JavaScrpit实现一个简单的Ajax请求,并说明ajax请求中的跨域访问问题,以及多个ajax请求的数据同步问题。 JavaScript实现Ajax异步请求 简单的ajax请求实现 Ajax请求的原理是创建一个...
javascript发送ajax请求,获取返回值res,async 同步/异步 var res = sendRequest({ url : "1.php", //necessary method : "post", params : { param1 : "123", param2 : "234" }, async : false });
打包好的Ajax代码,实现了对象化,使用时直接调用就可以了,调用时需要重构三个方法,如下: <script type="text/javascript"> function onerror() //错误处理方法 { alert("error"); } function getInfo() //...
Js 拦截全局ajax请求
javascript ajax请求,和接收服务器返回数据
jQuery与JavaScript各自实现AJAX异步请求验证[整理].pdf
jQuery与JavaScript各自实现AJAX异步请求验证[借鉴].pdf
今天在使用 ajax 向后台请求数据时出现错误,提示状态码为 0 ,后台采用的是 spring mvc 架构。 状态码为0是什么意思呢?查找了下,原来它意味着 (未初始化)即没有调用到send()方法,我原来代码如下 : $.ajax...
一个对AJAX的封装 //url就是请求的地址 //successFunc就是一个请求返回成功之后的一个function,有一个参数,参数就是服务器返回的报文体 function ajax(url,successFunc) { var xhr = window.XMLHttpRequest ? ...
使用JavaScript和Ajax 发出异步请求
extjs ajax同步请求所需js extjs ajax同步请求所需js
掌握 Ajax第 2 部分-使用 JavaScript 和 Ajax 发出异步请求
Ajax基本对象的属性和方法:动态创建内容时所用的W3C DOM属性和方法。用于遍历XML的DOM元素方法。用于处理XML的DOM元素属性。标准XMLHttpRequest操作
本文实例讲述了jquery实现Ajax请求的几种常见方式。分享给大家供大家参考,具体如下: 用原生的javascript开发ajax有着许多重复的代码,当然你也可以封装成可以复用的js代码,但却不一定那么通用。但jquery 提供的...
主要介绍了Javascript原生ajax请求代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
主要介绍了原生JavaScript实现Ajax的几种方法,感兴趣的小伙伴们可以参考一下
AJAX即“Asynchronous JavaScript and XML”(异步的JavaScript与XML技术),指的是一套综合了多项技术的浏览器端网页开发技术。