本文介绍: 只有当readyState属性为4,并且响应头部的Content-Type的MIME类型指定为XML(text/xml或者application/xml)时,该属性才会有值并且被解析一个XML文档,否则该属性nullresponseText属性包含客服端接收到的HTTP响应文本内容,当readyState属性为0、1或2时,responseText属性包含一个字符串:当readyState属性值为3时,响应包含客服端还没完成的响应信息;AJAX 是一种用于创建快速动态网页技术

一直以来都听别人说Ajax,今天终于接触到了。。。。。。。。。。

一.什么是Ajax?

答:

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用网页开发技术

AJAX = 异步 JavaScriptXML标准通用标记语言子集)。

AJAX 是一种用于创建快速动态网页技术

通过后台服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新

传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面

二.Ajax的关键元素

Ajax不是单一的技术,而是四种技术集合

三.接下来我们讲解XMLHttpRequest对象

讲解之前先来熟悉一下它有哪些属性和方法传统的有何差异?

下面的图解更直观的解释

XMLHttpRequest一些常用属性:

一个XMLHttpRequest对象被创立后,readyState属性标示了当前对象处于什么状态,可以通过对该属性的访问,来判读此次请求状态然后做出相应的操作

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文档结构不良或者未完成响应回传,该属性也会为nullresponseXML属性用来描述被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“&gt;

     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&amp;&amp;xhr.status==200){

            //获取回传数据

             var result=xhr.responseText;

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

         }

      }

  </script&gt;

(2)  <body&gt;

     用户名:<input id=”uname” οnblur=”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>

           <servletclass>cn.servlet.AjaxServlet</servletclass>

    </servlet>

    <servletmapping>

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

           <urlpattern>/ajaxServlet</urlpattern>

    </servletmapping>

原文地址:https://blog.csdn.net/omygodvv/article/details/134469758

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_29816.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注