初学Ajax

AJAX即“A*synchronous Javascript And XML*”(异步JavaScript和XML),是负同一种植创建交互式网页用的网页开发技术。

AJAX =
异步 JavaScript和XML(业内通用标记语言的子集)。

AJAX 是一模一样种植用于创造快速动态网页的技能。

透过在后台与服务器进行少量数据交换,AJAX
可以要网页实现异步更新。这意味可以于不又加载整个网页的状态下,对网页的某片开展翻新。

俗的网页(不采取 AJAX)如果急需更新内容,必须重载整个网页页面。

二.Ajax的关键要素

Ajax不是单纯的技艺,而是四种技术的聚合

  • JavaScript                        JavaScript是通用的脚本语言,用来坐在某种应用被。Web浏览器被放到的JavaScript解释器允许用了程序与浏览器的累累舅修筑功能相互。Ajax应用程序是以JavaScript编写的。
  • CSS(层叠样式表)            
    CSS为Web页面元素供了同种而选用的可视化样式的定义方法。它提供了简易而以强的不二法门,以同等的不二法门定义及采用可视化样式。在Ajax应用中,用户界面的体可以通过CSS独立修改。
  • DOM(文档对象模型)        
    DOM以同等组好下JavaScript操作的不过编程对象展现出Web页面的结构。通过应用脚本修改DOM,Ajax应用程序可以运作时转用户界面,或者高速的重绘页面被的某某部分。
  • XMLHttpRequest对象         XMLHttpRequest对象允许Web程序员从Web服务器以后台活动的方式获取数据。数据格式通常是XML,但是也得很好的支持外依据文本的多寡格式(XMLHttpRequest这个名字获是以凡蛮不得当)。尽管XMLHttpRequest对于好这档子工作吧太灵活和通用的工具,但尚产生外措施呢得打服务器获取数据。

三.接下来我们上课XMLHttpRequest对象

任课之前先来熟悉一下它们发出什么性与法和人情的有何差别?

Ajax 1

下的图解更直观的讲:

Ajax 2

XMLHttpRequest一些常用属性:

当一个XMLHttpRequest对象为创造后,readyState属性标示了当前目标处于什么状态,可以透过对拖欠属性之顾,来判读此次请求的状态然后做出相应的操作

Ajax 3

Ajax 4

1.responseText属性
responseText属性包含客服端接收及的HTTP响应的文件内容,当readyState属性为0、1要2时不时,responseText属性包含一个空字符串:当readyState属性值为3时,响应中含客服端还没有到位的应信息;当readyState属性值卫4,responseText属性才含有圆的应信息。
2.responseXML属性
只有当readyState属性为4,并且响应头部的Content-Type的MIME类型被指定为XML(text/xml或者application/xml)时,该属性才会有值并且让解析成一个XML文档,否则该属性为null。如果是回传的XML文档结构不良或不就响应回传,该属性为会见为null。responseXML属性用来描述为XMLHttpRequest解析后底XML文档的性质。
3.status属性
status属性描述了HTTP状态代码,注意,仅当readyState属性值为3(正在承受着)或者4(已加载)时,才会对此属性进行走访。如果在readyState属性值小于3时,试图去读取status属性值,将引发一个不胜。
4.statusText属性
statusText属性描述了HTTP状态代码文本,并且只是当readyState属性为3要4才可用。当readyState属性为其他值时试图存取statusText属性将吸引一个要命。

吓了,接下便切入真实事例中吧!

(1)  index.jsp页面

  <script type=”text/javascript”>

     function checkUser(){

         //获取页面及的输入数据

        var value=document.getElementById(“uname”).value;

        //创建路径

       var url=”ajaxServlet?name=”+value;

       //创建XMLHttpRequest对象

       var xhr;

      //能力检测  判断是否是IE浏览器

      if(windown.XMLHttpRequest){

            //非IE浏览器

           xhr=new XMLHttpRequest();

      }else{

          //IE浏览器

          xhr=new ActiveObject(“Microsoft.XMLHTTP”);

       }

       //建立一个请求  (请求方式,url,是否异步(默认也false))

      xhr.open(“get”,url,true);

      //在状态有变动时发出

      xhr.onreadystatechange=function(){

        if(xhr.readystate==4&&xhr.status==200){

            //获取回传的数额

             var result=xhr.responseText;

            document.getElementById(“msg”).innerText(result);

         }

      }

  </script>

(2)  <body>

     用户名:<input id=”uname” onblur=”checkUser()” /><span
id=”msg”></span>

 </body>

(3)AjaxServlet书写

   public AjaxServlet extends HttpServlet{

        public void doGet(HttpServletRequest request,HttpServletResponse
response) throws ServletException,IOException

        {

               doPost(request,response);

         }

       public void doPost(HttpServletRequest request,HttpServletResponse
response) throws ServletException,IOException

        {

              String uname=request.getParamter(“name”);

              if(admin.equals(uname)){

                   //把信息回送给页面

                  response.getWriter().write(“已经注册”);

              }else{

                   response.getWriter().write(“可以登记”);

               }

         

         }

  }

(4)web.xml

    <servlet>

           <servlet-name>AjaxServlet</servlet-name>

           <servlet-class>cn.servlet.AjaxServlet</servlet-class>

    </servlet>

    <servlet-mapping>

           <servlet-name>AjaxServlet</servley-name>

           <url-pattern>/ajaxServlet</url-pattern>

    </servlet-mapping>

相关文章