Ajax基础2

什么是服务器

网页浏览过程的分析

如何配置自己的服务器程序（AMP）

什么是Ajax

无刷新数据读取

异步，同步

Ajax基础(2)

使用Ajax

基础请求显示txt的文件

字符集编码

缓存，阻止缓存

动态数据，请求js或（json）文件

eval的使用

DOM创建元素

局部刷新，请求并显示部分网页文件

Ajax原理

http请求方法

function ajax(url, fnSucc, fnFaild)
{//1.创建Ajax对象var oAjax=null;if(window.XMLHttpRequest){oAjax=new XMLHttpRequest();}else{oAjax=new ActiveXObject("Microsoft.XMLHTTP");}//2.连接服务器oAjax.open('GET', url, true);//3.发送请求
    oAjax.send();//4.接收服务器的返回oAjax.onreadystatechange=function (){if(oAjax.readyState==4)    //完成
        {if(oAjax.status==200)    //成功
            {fnSucc(oAjax.responseText);}else{if(fnFaild)fnFaild(oAjax.status);}}};
}

简单ajax

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="ajax.js"></script>
<script>
window.onload=function ()
{var oBtn=document.getElementById('btn1');oBtn.onclick=function (){ajax('data.txt', function (str){//str->'[1,2,3,4]'//alert(str);var arr=eval(str);alert(arr[3]);});};
};
</script>
</head><body>
请求服务器上的文件，这个文件放了一个数组<br />

请求文件放置数组里面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="ajax.js"></script>
<script>
window.onload=function ()
{var oUl=document.getElementById('ul1');var aBtn=document.getElementsByTagName('a');var i=0;for(i=0;i<aBtn.length;i++){aBtn[i].index=i;aBtn[i].onclick=function (){ajax('page'+(this.index+1)+'.txt', function (str){var aData=eval(str);oUl.innerHTML='';for(i=0;i<aData.length;i++){var oLi=document.createElement('li');oLi.innerHTML='<strong>'+aData[i].user+'</strong><i>'+aData[i].pass+'</i>';oUl.appendChild(oLi);}});};}
};
</script>
</head><body>
<ul id="ul1">
</ul>
<a href="javascript:;">1</a>
<a href="javascript:;">2</a>
<a href="javascript:;">3</a>
</body>
</html>