js与jQuery实现的兼容多浏览器Ajax请求实例
程序员文章站
2023-11-14 19:52:04
ajax我们经常会用到的,但网上找到的大部份ajax兼容性都不强,下面自己改了一个不错的兼容性很强的ajax函数,同时后面介绍的jquery ajax 兼容性也很强。
一...
ajax我们经常会用到的,但网上找到的大部份ajax兼容性都不强,下面自己改了一个不错的兼容性很强的ajax函数,同时后面介绍的jquery ajax 兼容性也很强。
一、纯js实现的ajax实例:
复制代码 代码如下:
var ajax = function() {};
ajax.prototype = {
request: function(method, url, callback, postvars) {
var xhr = this.createxhrobject();
xhr.onreadystatechange = function() {
if (xhr.readystate !== 4) return;
(xhr.status === 200) ?
callback.success(xhr.responsetext, xhr.responsexml) :
callback.failure(xhr,status);
};
if (method !== "post") {
url += "?" + jsonstringify(postvars);
postvars = null;
}
xhr.open(method, url, true);
xhr.send(postvars);
},
createxhrobject: function() {
var methods = [
function() { return new xmlhttprequest(); },
function() { return new activexobject("msxml2.xmlhttp"); },
function() { return new activexobject("microsoft.xmlhttp"); }
],
i = 0,
len = methods.length;
for (; i < len; i++) {
try {
methods[i];
} catch(e) {
continue;
}
this.createxhrobject = methods[i];
return methods[i];
}
throw new error("ajax created failure");
},
jsonstringify: function(obj) {
return json.stringify(obj).replace(/"|{|}/g, "")
.replace(/b:b/g, "=")
.replace(/b,b/g, "&");
}
};
ajax.prototype = {
request: function(method, url, callback, postvars) {
var xhr = this.createxhrobject();
xhr.onreadystatechange = function() {
if (xhr.readystate !== 4) return;
(xhr.status === 200) ?
callback.success(xhr.responsetext, xhr.responsexml) :
callback.failure(xhr,status);
};
if (method !== "post") {
url += "?" + jsonstringify(postvars);
postvars = null;
}
xhr.open(method, url, true);
xhr.send(postvars);
},
createxhrobject: function() {
var methods = [
function() { return new xmlhttprequest(); },
function() { return new activexobject("msxml2.xmlhttp"); },
function() { return new activexobject("microsoft.xmlhttp"); }
],
i = 0,
len = methods.length;
for (; i < len; i++) {
try {
methods[i];
} catch(e) {
continue;
}
this.createxhrobject = methods[i];
return methods[i];
}
throw new error("ajax created failure");
},
jsonstringify: function(obj) {
return json.stringify(obj).replace(/"|{|}/g, "")
.replace(/b:b/g, "=")
.replace(/b,b/g, "&");
}
};
二、jquery $.ajax概述
出现jquery后,使ajax变得更加容易实现。
jquery中,ajax的高层实现主要有$.get(),$.post()等,下面详细介绍一下$.ajax()的使用方法
1、请求页面ajax.aspx
js代码如下:
复制代码 代码如下:
<script type="text/javascript">
function text_ajax()
{
$.ajax(
{
type:"get",//通常会用到两种:get,post。默认是:get
url:"responsetext.aspx",//(默认: 当前页地址) 发送请求的地址
datatype:"html",//预期服务器返回的数据类型。
beforesend:beforesend, //发送请求
success:callback, //请求成功
error:error,//请求出错
complete:complete//请求完成
});
}
function error(xmlhttprequest, textstatus, errorthrown)
{
// 通常情况下textstatus和errorthown只有其中一个有值
$("#showresult").append("<div>请求出错啦!</div>");
}
function complete(xmlhttprequest, textstatus)
{
$("#showresult").append("<div>请求完成</div>");
}
function beforesend(xmlhttprequest)
{
$("#showresult").append("<div>发送请求…..<div>");
}
function callback(msg)
{
$("#showresult").append("<div>请求成功,回传数:"+msg+"<div>");
}
</script>
function text_ajax()
{
$.ajax(
{
type:"get",//通常会用到两种:get,post。默认是:get
url:"responsetext.aspx",//(默认: 当前页地址) 发送请求的地址
datatype:"html",//预期服务器返回的数据类型。
beforesend:beforesend, //发送请求
success:callback, //请求成功
error:error,//请求出错
complete:complete//请求完成
});
}
function error(xmlhttprequest, textstatus, errorthrown)
{
// 通常情况下textstatus和errorthown只有其中一个有值
$("#showresult").append("<div>请求出错啦!</div>");
}
function complete(xmlhttprequest, textstatus)
{
$("#showresult").append("<div>请求完成</div>");
}
function beforesend(xmlhttprequest)
{
$("#showresult").append("<div>发送请求…..<div>");
}
function callback(msg)
{
$("#showresult").append("<div>请求成功,回传数:"+msg+"<div>");
}
</script>
html代码如下:
复制代码 代码如下:
<input value="text_ajax函数" type="button" onclick="text_ajax()"/>
<div id="showresult">
</div>
<div id="showresult">
</div>
响应页面jqueryajax.aspx
后台代码:
复制代码 代码如下:
protected void page_load(object sender, eventargs e)
{
response.write("呵呵!测试成功啦!");
}
{
response.write("呵呵!测试成功啦!");
}
三、关于jquery ajax中文乱码问题
方法一:提交前采用encodeuri两次编码,记住一定是两次
1.修改以下代码
复制代码 代码如下:
data:{id:1, type:encodeuri(encodeuri('商品'))}
2.在后台action里要对取得的字符串进行decode
复制代码 代码如下:
string type = request.getparameter("type");
type = urldecoder.decode(type, "utf-8");
type = urldecoder.decode(type, "utf-8");
方法二:ajax配置contenttype属性,加上charset=utf-8
在ajax方法中加入以下参数
复制代码 代码如下:
contenttype: "application/x-www-form-urlencoded; charset=utf-8″
使用其它js框架或者xhr都是差不多,设置header中contenttype即可,
这里关键是charset=utf-8,如果没有这个,是不行的,默认jquery里的contenttype是没有的.
此外还需要补充一下jquery里对参数已经进行了一次encodeuricomponent的处理。
相比较而言,方法二在action里不需要进行decode,所以推荐使用此方法.
希望本文所述对大家的ajax程序设计有所帮助。
上一篇: MySQL上机实习报告(一)
下一篇: vuex 项目结构目录及一些简单配置介绍