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