ajax简单入门

     今天用ajax做了个小例子。总结一下。

      ajax全称是Asynchronous Javascript And XML（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。也就是局部刷新。

     使用ajax不用导入jar包或js库什么的，除非你用插件。

使用ajax：

//根据不同的浏览器创建不同的XMLHttpRequest对象

function createXmlHttp(){
       var xmlHttp;
       try{ // Firefox, Opera 8.0+, Safari
            xmlHttp=new XMLHttpRequest();
        }
        catch (e){
        try{// Internet Explorer
              xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
           }
         catch (e){
           try{
              xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
           }
           catch (e){}
           }
        }

     return xmlHttp;
     }

 

使用ajax分四个步骤：1.创建异步对象  2.设置监听  3.打开链接  4.发送

function showDetail(sid){
    var but = document.getElementById("but"+sid);
    var div1 = document.getElementById("div"+sid);
    if(but.value == "品牌详情"){
     // 1.创建异步对象
     var xhr = createXmlHttp();
     // 2.设置监听
     xhr.onreadystatechange = function(){
      if(xhr.readyState == 4){
       if(xhr.status == 200){
        
        div1.innerHTML = xhr.responseText;
       }
      }
     }
     // 3.打开连接
     xhr.open("GET","<%=basePath%>showbrand?sid="+sid+"&time="+new Date().getTime(),true);
     // 4.发送
     xhr.send(null);
     but.value = "关闭";
    }else{
     div1.innerHTML = "";
     but.value="品牌详情";
    }
    
   }

          这个例子是显示品牌详情，点击显示详情，实现了局部刷新，再点击就不显示，通过action得到数据显示在JSP中，然后将JSP显示在ajax的innerHTML中。

       

后台通信是javascript能做的所有功能中的一个功能，有人专门写了这方面的所有方法，各种与后台通信的操作都写了，然后放在一块，就成了Ajax了，叫做异步的java  and  xml 技术。其实就是javascript了！ 

应用中比说价格的计算，或者数量的添加减少等都用到ajax技术，不会影响其它内容，还是有输入用户名和密码的时候用到的校验都是用到了ajax技术，不会影响其它已输入内容的，如果不用ajax技术，那么就必须全页面刷新，其它数据又没有保存，就会丢失的！