• 初学Ajax


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

    AJAX = 异步 JavaScriptXML标准通用标记语言的子集)。
    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对象

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

    下面的图解更直观的解释:

    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文档结构不良或者未完成响应回传,该属性也会为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>
  • 相关阅读:
    pyhon学习日记第八天tkinter模块6
    python学习日记第八天tkinter模块5
    python学习日记第七天tkinter模块4
    python学习日记第七天tkinter模块3
    python学习日记第六天tkinter模块2
    python学习日记第六天tkinter模块学习1
    python学习日记第五天(飞机大战)
    python学习日记第四天
    python学习日记第三天(实例)
    Demo Nec
  • 原文地址:https://www.cnblogs.com/yangsongxiao/p/6580260.html
Copyright © 2020-2023  润新知