无刷新数据读取
用户注册、在线聊天室
异步、同步
使用Ajax
基础：请求并显示静态TXT文件
字符集编码
缓存、阻止缓存
动态数据：请求JS（或json）文件（ajax得到的是字符串）
eval的使用（把一个语句内容解析为JS可以识别的）
DOM创建元素
局部刷新：请求并显示部分网页文件
Ajax原理
HTTP请求方法
GET----用于获取数据（如：浏览帖子）
POST----用于上传数据（如：用户注册）
GET、POST的区别
get:通过网址传递、网址长度有限 容量小（上传图片等不行，不适合传递大数据）、安全性差、有缓存
post:通过http Content(不通过网址)、可以到达2G、没有缓存（每一次都提取新的数据）
get是在url里传数据：安全性、容量（？名字=值&名字=值）
缓存
编写Ajax
1.创建Ajax对象
ActiveXObject("Microsoft.XMLHTTP")
XMLHttpRequest()
2.连接服务器
open(方法，文件名，异步传输)
同步和异步(多件事可以一起来做，请求的同时可以执行页面其他操作)
3.发送请求
send()
4.接收返回值
请求状态监控
onreadystatechange事件
readyState属性：请求状态
0（未初始化）还没有调用open()方法
1（载入）已调用send()方法，正在发送请求
2（载入完成）send()方法完成，已收到全部响应内容(可能加密或压缩过，自己做解码，解压)
3（解析）正在解析响应内容
4（完成）响应内容解析完成，可以在客户端调用了
status属性：请求结果
responseText
数据类型
什么叫数据类型--英语、中文
XML（同等数据量比Json大很多）、Json
字符集
所有文件字符集相同 （全统一为utf-8）
- function ajax(url,fnSucc,fnFaild)
- {
- var oBtn=document.getElementById("btn1");
- oBtn.onclick=function()
- {
- //1.创建Ajax对象
- //非IE6
- var oAjax;
- if(window.XMLHttpRequest)//不会报错，只会是undefined
- {oAjax=new XMLHttpRequest();}
- else
- //iE6 IE5
- {oAjax=new ActiveXObject("Microsoft.XMLHTTP");}
- //alert(oAjax);
- //2.连接服务器
- //open(方法,文件名,异步传输)
- oAjax.open("get",url+"?t="+new Date().getTime(),true);//制止缓存
- //3.发送请求
- oAjax.send();
- //4.接收返回值和服务器通讯的时候此事件发生
- oAjax.onreadystatechange=function()
- {
- //oAjax.readyState //浏览器和服务器，进行到哪一步了
- if(oAjax.readyState==4)//读取完成（可能文件不存在）
- {
- if(oAjax.status==200)//成功
- {
- fnSucc(oAjax.responseText);
- //alert("成功"+oAjax.responseText);
- }
- else
- if(fnFaild)//fnFaild传进来时
- {
- fnFaild(oAjax.status);
- }
- //alert("失败:"+oAjax.status);//status为404
- }
- }
- }
- }
- <script>
- window.onload=function(){
- var oBtn=document.getElementById("btn1");
- oBtn.onclick=function()
- ajax("a.txt",function(str){alert(str)})
- }
- </script
