Ajax基础、中级

Ajax基础

·  调用Ajax读取txt文本的信息

<script src="new_ajax.js"></script>
<script type="text/javascript">
window.οnlοad=function ()
{
	var oBtn = document.getElementById('btn1');


	oBtn.οnclick=function ()
	{
		ajax('a.txt', function (str){
			alert(str);
		});
	};
};
</script>

·  阻止缓存

<script src="new_ajax.js"></script>
<script type="text/javascript">
window.οnlοad=function ()
{
	var oBtn = document.getElementById('btn1');

	oBtn.οnclick=function ()
	{
		//阻止缓存：缓存根据域名进行，在文件名后面加上?t='=new data().getTime()'
		ajax('aaa.txt?t='+new Date().getTime(),function (str){
			//eval：把存在txt的数组、json解析
			var arr=eval(str);
			alert(arr[0].a);
		}, function (){
			alert('失败');
		});
	};
};
</script>

·  编写Ajax，封装

function ajax(url, fnSucc, fnFaild)
{
		//1.创建Ajax对象
		//非IE6
		if(window.XMLHttpRequest)
		{
			var oAjax = new XMLHttpRequest();
		}
		//IE6
		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);
				}
			}
		};
};

·  Ajax实现页面无刷新更新数据（把定义好的TXT添加到页面）

<script src="new_ajax.js"></script>
<script type="text/javascript">
window.οnlοad=function ()
{
	var oBtn = document.getElementById('btn1');
	var oUl = document.getElementById('ul1');

	oBtn.οnclick=function ()
	{
		//阻止缓存：缓存根据域名进行，在文件名后面加上?t='=new data().getTime()'
		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>

笔记：

这一课的代码存放于phpstudy/www目录之下


Ajax基础


·Ajax基础-1
1.什么是服务器-网页存放的地方；
如何配置自己的服务器程序：
装一个服务器程序如wamp，在www目录下保存文件例如aaa.html，打开浏览器直接在地址输入localhost/aaa.html或者127.0.0.1/aaa.html就可以打开文件。放在服务器下的文件不能用中文命名
2.什么是Ajax
可以实现无刷新数据读取，例如用户注册、在线聊天室、异步同步


·Ajax基础-2
使用Ajax，请求并显示静态txt文件
1.所有字符集编码要相同
2.缓存：数据重复加载速度快 但是在Ajax里不能快速显示最新的数据，ie缓存最严重
3.阻止缓存：缓存根据域名进行，在文件名后面加上?t='=new data().getTime()
4.动态数据
eval的使用：把存在txt的数组、json解析
读取并创建元素


·Ajax原理
1.HTTP请求方法
get方式 放入url里 通过网址 容量小 安全性差 有缓存  （获取数据：如浏览帖子）
post方式 不通过网址 容量大（2G）安全性好一点 没有缓存 （上传数据：如用户注册）


Ajax中级
1.编写Ajax-1
创建Ajax对象、连接到服务器、发送请求、接收返回值
（1）创建Ajax对象
非IE6
var oAjax=new XMLHttpRequest(); 
IE6
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");


用没有定义的变量--报错
用没有定义的属性--undefined


（2）连接服务器
open（方法，文件名,异步传输）
oAjax.open('GET','',true)


JS里面：
同步：一件一件来
异步：多件事一起来
oAjax天生用异步


（3）发送请求
oAjax.send()


（4）接收返回
oAjax.onreadystatechange=fucntion()
{
 //oAjax.readyState//浏览器进行到哪一步了
 if(oAjax.readyState==4)//读取完成
 {
if(oAjax.status==200)
{
alert('成功：'+oAjax.responseText);
//从服务器发送回来的文本
}
else
{
alert('失败');
}
  }
}
2.封装Ajax


·Ajax数据
现在js里面几乎都用json