优点：使用ajax读取数据文件，不需要刷新页面就能取出文件数据
目 录
1.0 基于ajax请求的理论支持
1.1 js 实现jquray中 ajax请求功能
基于ajax请求的理论支持
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function ajax(url, fnSucc, fnFaild) {
//1.创建Ajax对象
if (window.XMLHttpRequest) {
var oAjax = new XMLHttpRequest();
}
else {
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.连接服务器
//open(方法, 文件名, 异步传输)
oAjax.open('GET', url, true);
//3.发送请求
oAjax.send();
//4.接收返回
oAjax.onreadystatechange = function () {
//oAjax.readyState //浏览器和服务器，进行到哪一步了
if (oAjax.readyState == 4) //读取完成
{
if (oAjax.status == 200) //成功
{
fnSucc(oAjax.responseText);
}
else {
if (fnFaild) {
fnFaild(oAjax.status);
}
//alert('失败:'+oAjax.status);
}
}
};
}
window.onload = function () {
var oBtn = document.getElementById('myDiv');
oBtn.onclick = function () {
ajax('test1.txt?t='+new Date().getTime(),
function (str) {
//?t='+new Date().getTime() 可以控制缓存，即每次改变 test1.txt文件不需要刷新页面既可读取文件改变后的值
var oTxt = document.getElementById('txt');
oTxt.value = str;
}
);
};
};
</script>
</head>
<body>
<input type="button" id="myDiv" value="读取"/><br />
用户名: <input type="text" id="txt" />
<input type="text" id="Text1" />
</body>
</html>
js 实现jquray中 ajax请求功能
下面是根据W3C上的解析，自己写的一个小小的ajax请求 框架是 ASP.NET MVC
<input type="button" id="btn_nowTime1" onclick="Myajax()" value="请求" />
var createAjax = function () {
var xhr = null;
try {
//IE系列浏览器
xhr = new ActiveXObject("microsoft.xmlhttp");
} catch (e1) {
try {
//非IE浏览器
xhr = new XMLHttpRequest();
} catch (e2) {
window.alert("您的浏览器不支持ajax，请更换！");
}
}
return xhr;
};
var ajax = function (conf) {
// 初始化
//type参数,可选
var type = conf.type;
//url参数，必填
var url = conf.url;
//data参数可选，只有在post请求时需要
var data = conf.data;
//datatype参数可选
var dataType = conf.dataType;
//回调函数可选
var success = conf.success;
if (type == null) {
//type参数可选，默认为get
type = "get";
}
if (dataType == null) {
//dataType参数可选，默认为text
dataType = "text";
}
// 创建ajax引擎对象
var xhr = createAjax();
// 打开
xhr.open(type, url, true);
// 发送
if (type == "GET" || type == "get") {
xhr.send(null);
} else if (type == "POST" || type == "post") {
xhr.setRequestHeader("content-type",
"application/x-www-form-urlencoded");
xhr.send(data);
}
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
if (dataType == "text" || dataType == "TEXT") {
if (success != null) {
//普通文本
success(xhr.responseText);
}
} else if (dataType == "xml" || dataType == "XML") {
if (success != null) {
//接收xml文档
success(xhr.responseXML);
}
} else if (dataType == "json" || dataType == "JSON") {
if (success != null) {
//将json字符串转换为js对象
success(eval("(" + xhr.responseText + ")"));
}
}
}
};
};
调用：
function Myajax() {
ajax({
url: '/home/index',
success: function (data) {
alert(data);
}
})
}
开始对XMLHttpRequest 这个对象很模糊，最详解的也摸过于 W3C 上的解析，现在想来这也许就是开发中该用的API 是行业标准了吧！
发现几篇好的文章，就把链接给拿来了