读取服务器上的数据：
HTML：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="ajax.js"></script>
<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
var oUl=document.getElementById('ul1');
oBtn.onclick=function ()
{
ajax('data.txt?t='+new Date().getTime(), function (str){
var arr=eval(str);
for(var i=0;i<arr.length;i++)
{
var oLi=document.createElement('li');
oLi.innerHTML='用户名：<strong>'+arr[i].user+'</strong>密码：<span>'+arr[i].pass+'</span>';
oUl.appendChild(oLi);
}
}, function (){
alert('失败');
});
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="读取" />
<ul id="ul1">
</ul>
</body>
</html>
ajax，js：
function ajax(url, fnSucc, fnFaild)
{
//1.创建Ajax对象
if(window.XMLHttpRequest)
{
var oAjax=new XMLHttpRequest(); //非IE6浏览器
}
else
{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP"); //IE6浏览器
}
//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);
}
}
};
}
data.txt：
[{user: 'blue', pass: '123456'},{user: '张三', pass: '654321'},{user: '李四', pass: '789456'},{user: '王五', pass: '7777'}]
eg：
ajax.js：
function ajax(method, url, data, success) {
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
if (method == 'get' && data) {
url += '?' + data;
}
xhr.open(method, url, true);
if (method == 'get') {
xhr.send();
} else {
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send(data);
}
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
success && success(xhr.responseText);
} else {
alert('出错了,Err：' + xhr.status);
}
}
}
}
HTML：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<!--<script src="jquery.js"></script>-->
<script>
//$(function(){}) //阻塞 -> 同步
//非阻塞 - 异步
/*setTimeout(function() {
alert(1);
}, 2000);
alert(2);*/
window.onload = function () {
var oBtn = document.getElementById('btn');
oBtn.onclick = function () {
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
/*
1.缓存 在url？后面连接一个随机数，时间戳
2.乱码 编码encodeURI
*/
xhr.open('get', '2.get.php?username=' + encodeURI('刘伟') + '&age=30&' + new Date().getTime(), true);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
alert(xhr.responseText);
} else {
alert('出错了,Err：' + xhr.status);
}
}
}
}
}
</script>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
</body>
</html>
HTML（post）：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<!--<script src="jquery.js"></script>-->
<script>
//$(function(){}) //阻塞 -> 同步
//非阻塞 - 异步
/*setTimeout(function() {
alert(1);
}, 2000);
alert(2);*/
window.onload = function () {
var oBtn = document.getElementById('btn');
oBtn.onclick = function () {
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.open('post', '2.post.php', true);
//post方式，数据放在send()里面作为参数传递
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');//申明发送的数据类型
//post没有缓存问题
//无需编码
xhr.send('username=刘伟&age=30');
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
alert(xhr.responseText);
} else {
alert('出错了,Err：' + xhr.status);
}
}
}
}
}
</script>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
</body>
</html>