lindingyu 发表于 2013-1-23 01:50:02

AJAX学习总结

一,AJAX的概念
             AJAX是一种局部界面更新方式。简单的说,在B/S格式上给用户C/S的界面观感。AJAX的英文全称是AsynchronousJavaScript and XML,(异步JavaScript和XML技术)。这里稍微解释下:  异步是指浏览器向服务器发送请求是异步的,请求发送出去后,不必等得响应便可发送下一条请求(有些多线程的意思),   JS是AJAX的编程语言,异步JS是强调AJAX发送请求的方式。    XML的是指可扩展的标记语言(Extensible Markup Language),AJAX的响应返回都是XML格式的标记语言,方便在网页中操作。
             这里介绍下AJAX和普通Web在刷新页面上的区别,先说普通Web,Web向服务器发送一个请求,服务器接收并处理该请求,然后响应到一个新的网页。这是一个完整的请求—响应过程。如果前后两个页面的差别不大,Web中的过程就会浪费许多宽带。网页上只需一点点变动,都要刷新整个网页,这是没有必要的。与此不同,AJAX在这方面就优化了很多,AJAX只需向服务器发送并取回必要的任务,使用XML的Web Service接口,并在客户端用JS处理响应,客户端和服务器端的数据交换大大减少,也加快了响应速度。
 
 
 
二,AJAX的使用方法
             首先,创建XMLHttpRequest对象,XMLHttpRequest对象是AJAX的核心API,
XMLHttpRequest是浏览器内置的对象,用来发送异步请求和接收响应。
             如IE的是ActiveXObject对象,火狐的是XMLHttpRequest对象,没有配置该对象的浏览器就不可以使用AJAX。
 代码示例:         
            function getRequestObject(){      if(window.ActiveXObject){//IE浏览器                  request = new ActiveXObject("Microsoft.XMLHTTP");         }else if(window.XMLHttpRequest){//火狐浏览器                  request = new XMLHttpRequest();               }else {                     alert("您电脑的浏览器不支持AJAX");          }            }         
        然后,用XMLHttpRequest对象向服务器发送请求,这个步骤中,必须绑定回调方法。 这里解释下回调方法:在AJAX机制中,发送请求,服务器接收并作出响应后,响应会自动回调到客户端。  绑定回调方法是AJAX与普通Web最大的区别所在。回调机制类似监听机制,一旦服务器做出响应,回调方法就会自动捕获该响应,并按方法进行处理。
   代码示例:
           
function sendRequest(){//向服务器发送请求 getRequestObject();//取得XMLHttpRequest对象 //绑定回调方法(特别重要调用回调方法不用括号)   request.onreadystatechange = processResult; //发送请求,还可以用get方式发送   request.open("post",url,true);          //post必须添加的信息头处理   request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");            request.send("Count="+Count); //发送请求中的参数       }function processResult(){//回调方法,响应发出时自动调用该方法   if(request.readystate==4){//服务器处理完毕      if(request.status==200){//将状态做为数字返回200为OK         //取得服务器传送的响应内容,并操作Dom组建局部更新页面         document.getElementById("msgDisplay").inner =request.responseText;   }}   }  
再接上服务器Servlet的代码,用在发送请求后,响应回调前:
    
public void service(HttpServletRequest request,HttpServletResponse response)throws ServletException, IOException {      //设置响应输出的格式,此处是HTML格式的 (HTML是XML的一种)response.setContentType("text/html;charset=gbk");      //处理缓存response.setHeader("Cache-Control", "no-cache");      //取得客户端发送过来的参数      int count = Integer.parseInt(request.getParameter("Count"));      PrintWriter out = response.getWriter();      //发送相应给客户端    之后交由回调接方法收并处理      out.println("客户第"+count+"次发送消息,系统时间是:"+System.currentTimeMillis());out.flush();out.close();}      
 
         此处只是简单介绍了AJAX在JS中的编写方法,没有详细写入HTML中网页设计。但这些JS中的方法是AJAX最根本的东西,理解本质之后才能够在网页界面和服务器的数据交换以及请求—响应的操作中熟练运用。希望这篇文章能让大家对AJAX有进一步的了解。
 
                
 


 
 

 
 
 
 
 
 
页: [1]
查看完整版本: AJAX学习总结