什么是服务器
网页浏览过程的分析
如何配置自己的服务器程序（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); } } }; }
<!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>
GET---用于获取数据（浏览帖子）；
POST--用于上传数据（如用户注册）
GET，POST的区别
get是在url的传数据，安全性，容量，
缓存
本节重点
什么是Ajax，同步和异步的区别
http请求方法中，get和post方式用什么区别