首页 > 代码库 > 学习笔记:ajax使用规则讲解

学习笔记:ajax使用规则讲解

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="http://www.mamicode.com/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>