ajax: 局部数据更新：
1.ajax 由 html css Dhtml js xml json dom 的一种结合.
ajax 是一种技术，它是一种解决方案。 具有一些互动性的不需要页面刷新，减少用户的心理等待时间，并能够及时响应数据的一种解决方案
2.ajax 的特点：
ajax 是基于标准的html css xml的构造
使用dom对象动态的显示和交互数据
它的数据交互格式 文本格式 xml json
使用基于浏览器的xmlHTTPRquest 对象进行数据同步的
使用js 进行任意的绑定数据
3.不能使用ajax 的地方： 数据及时性的部分 大量的文本替换 导航部分
4.对不同浏览器的调用方法
new XMLHttpRequest(); ie8以上 Firefox等其他符合w3c标准浏览器的xmlhttpRequest对象
new ActiveXObject("Msxml2.XMLHTTP"); ie7 ie6
产生ajax所需的xmlhttp 对象
var xmlhttp;
function ajax(){
try{
xmlhttp=new XMLHttpRequest()
}catch(e){
try{
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch(e){
alert("你的浏览器是骨灰级，请升级");
return false;
}
}
}
5. xmlhttp.open("数据传递方式",url,true);打开一个异步数据传送
如果需要服务器返回数据那么调用xmlhttp的onreadystatechange设置一个回调函数.
xmlhttp.onreadystatechange=回调函数;
xmlhttp.send()； 发送
如果数据传递方式 是 get send(null)
post send(数据)
get较为简单 post较为复杂
6.xmlhttp实现ajax数据异步传输的5种状态
0---创建 xmlhttpRequest 对象
1---调用open 方法
2. ---发送send
3.---服务器正在接受和处理但是没有完成
4.--服务器处理完成，客户端完成整个流程
所以我们在处理回调函数的时候需要判断 当前的xmlhttRequest 对象是否已经完成了它的5种状态.
xmlhttp.readState==4
7.xmlhttp.status 表示当前浏览器状态 http 协议规定 浏览器状态是 200
xmlhttp.status==200
xmlhttp.responseText 以文本的方式接收服务器端的返回.
401 未授权
403 禁止访问
404 访问的文件未找到
500 服务器内部发生错误
8. encodeURIComponent()//对所传字符串进行编码！防止乱码！
_________________________________________
<script type="text/javascript">
// var xmlhttp=new XMLHttpRequest();
function getVal(){
ajax();
var url=‘11.php?username=zhangsan&‘+Math.random();
xmlhttp.open(‘GET‘,url,true);
xmlhttp.onreadystatechange=test;
xmlhttp.send(null);
}
function test(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
// alert(xmlhttp.responseText);
var myspan=document.getElementById(‘myspan‘);
var text=xmlhttp.responseText;
if(text==‘1‘){
myspan.innerHTML=‘请重新换一个用户名，该用户名已经被注册‘;
}else{
myspan.innerHTML=‘该用户名允许注册‘;
}
}
</script>
-----------------------------------------
9.post方式
<script type="text/javascript">
function dj(id){
ajax();
var data="id="+id+"&type=x";
var url=‘12.php‘;
xmlhttp.open("POST",url,true);
xmlhttp.onreadystatechange=callback;
// 告诉浏览器当前数据发送长度 以及类型 header
xmlhttp.setRequestHeader("content-length",data.length);
xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
xmlhttp.send(data);
}
function callback(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
alert(xmlhttp.responseText);
}
}
</script>
学习笔记：ajax使用规则讲解,布布扣,bubuko.com