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技术，那么就必须全页面刷新，其它数据又没有保存，就会丢失的！