zoukankan      html  css  js  c++  java
  • ajax基础知识

    ajax技术(JavaScriptXML的综合)


    全称:Asynchronous(异步) JavaScript And XML (异步的JavaScript和XML)。

    1. ajax是一种用来改善用户体验的技术,其实质是利用浏览器内置的一个特殊的对象(XMLHttpRequest一般称之为ajax对象),异步地(当ajax对象发请求时,浏览器不会销毁当前页面,用户任然可以对当前页面做其的操作)向服务器发送请求,服务器送回部分数据(不是完整的页面),利用这些数据更新当前页面。整个过程,页面无刷新,不打断用户的操作。

    2. ajax对象是BOM模型里的,几乎所有的浏览器都有这个对象。

    3. Ajax技术是若干技术的综合应用,主要涵盖JavaScript,XMLHttpRequest(发请求接收响应信息),XML,HTML,CSS.(这些技术融合在一起就是Ajax)。

    ajax技术的优点


    1. 页面无刷新,不打断用户的操作。

    2. 浏览器与服务器之间可以按照需要获取数据,不需要再传送一个完整的页面。也就是说,浏览器与服务器之间数据传输量大大减少。(性能有所提高)

    3. 是一种标准化的技术,不需要浏览器额外去下载一些插件。

    作用:用于客户端和服务器端交互的一项技术.主要用于页面的局部刷新,不需要刷新整个页面,提升用户的体验度

    原有交互主要基于提交表单,采用点超连接方式,这种方式主要有以下一些弊端:

    a. 请求发出后,如果响应速度慢,客户需要等待,而且是茫然的等待

    b. 请求响应回来需要刷新整个页面,如果页面中有需要频繁更新的数据,会造成整个页面的频繁刷新.(而实际:只有某个区域需要刷新,不需要整个页面刷新.)

    采用Ajax技术之后,可以解决以上问题.提升用户的体验度

    Ajax技术原理


    Ajax技术使用时,需要编写客户端脚本和服务器端处理程序。原理如下:

    1. 首先客户端利用JavaScript创建一个XMLHttpRequest对象

    2. 利用XMLHttpRequest对象(ajax引擎),创建和发送一个请求

    3. 请求到达服务器,调用Servlet组件处理,处理完毕后,返回响应数据,数据可以采用字符串或XML格式返回。

    4. XMLHttpRequest接收到服务器返回的数据,调用客户端的回调函数,将数据更新到页面

    如何获得XMLHttpRequest对象?


    因为XMLHttpRequest没有标准化,要区分浏览器来获得这个对象:

    function getXhr(){
        var xhr=null;
        if(window.XMLHttpRequest){
            //非IE浏览器
            xhr = new XMLHttpRequest();
        }else{
            //IE浏览器
            xhr = new ActiveXObject(‘Microsoft.XMLHttp’);
        }
        return xhr;
    }    

    XMLHttpRequest对象的使用


    该对象是由浏览器提供的,在IE中该对象以ActiveXobject组件形式存在,在其他浏览器中以XMLHttpRequest形式存在。

    XMLHttpRequest对象主要的函数和属性

    open(param1,param2,param3)函数

    创建一个请求,与服务器之间建立连接。

    param1:用于指定请求类型,可以是"get","post"。get请求必须将请求参数添加到请求资源路径的后面。

    param2:用于指定请求URL地址

    param3:用于指定请求发出方式:true异步(默认的),false表示同步。

    异步请求:发请求时,浏览器不会销毁当前页面,用户可以对当前页面做其他操作

    同步请求:发请求时,浏览器不会销毁当前页面,浏览器会锁定当前页面,用户不能对当前页面做其他操作,只有请求处理完成返回时,用户才可以继续做其他操作。

    同步:(请求1-响应1)(请求2-响应2)必须要在第一个请求得到响应后在能发第二次请求

    同步模式:请求1-->响应1回调执行-->请求2

    异步:(请求1,请求2,) (响应1,响应2,) 不需要第一个请求得到响应后再发第二次请求

    异步模式:请求1-->请求2-->响应1回调执行

    send(param1)函数

    发送一个请求,把open的请求发出去。

    param1:用于指定请求发送时提交的数据。如果是get请求,param1指定为null。如果是post请求,需要指定为"key=value&key=value"

    onreadystatechange事件

    用于指定注册的回调函数.指定函数名不需要()。该事件在readyState属性值发生改变时触发该事件。当ajax对象的readyState属性值发生了改变(比如从0变成了1),则会产生readystatechange事件。

    readyState属性

    readyState有5个值,分别是0,1,2,3,4,表示ajax对象与服务器进行通信时的状态。比如,值为4时表示ajax对象已经成功德获得了服务器返回的所有的数据。只有当readyState的值等于4时,才能使用responseText等属性获得服务器返回的数据。           

    0          请求未初始化(对象已建立,但是尚未初始化)        open函数未调用

    1          请求已初始化                 open调用,send未调用

    2          请求已发送                     send方法已调用

    3          请求正在处理中

    4          请求处理完毕

    状态会自动改变。每次状态改变时都会触发onreadystatechange事件.即会调用一次回调函数

    status属性

    用于获取请求处理的状态码。例如:404 500 200等  404:找不到处理资源  500:找到资源,执行出错  200:执行成功

    responseText属性

    用于获取服务器处理返回的字符串信息。需要在readyState==4&&status==200执行,才可以获取正常数据

    responseXML属性

    用于获取服务器处理返回的XML结果对象。很少使用,因为解析XML文件比较慢,XML文件也比较大。

    Ajax程序的编写步骤


    step1、获得XMLHttpRequest对象,var xhr=getXhr();

    step2、发送请求(get请求,post请求)

    step3、编写服务器端的处理程序,一般服务器只需返回部分的数据。

    step4、编写事件处理函数

    示例:焦点移开,检查用户名非空和唯一性

    my.js

    function getXhr(){
        var xhr=null;
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiveXObject('Microsoft.XMLHttp');
        }
        return xhr;
    }

    regist.jsp

    <html>
        <head>
        <script type="text/javascript" src="<%=request.getContextPath() %>/js/my.js"></script>
        <script type="text/javascript" src="<%=request.getContextPath() %>/js/prototype-1.6.0.3.js"></script>
        <script type="text/javascript">
            function check_username(){
                var username=$F('username');
                if(username==""){
                    $("span_username").innerHTML="用户名不能为空。。";
                }else{
                    var xhr=getXhr();
                    xhr.open("get","checkUsername.do?username="+username,true);
                    xhr.onreadystatechange = function(){
                        if(xhr.readyState==4){
                            if(xhr.status==200){
                                var txt=xhr.responseText;
                                $("span_username").innerHTML=txt;
                            }else{
                                $("span_username").innerHTML="系统异常,稍后重试...";
                            }
    
                        }
                    };
                    $("span_username").innerHTML="正在检查。。。。";
                    xhr.send(null);    
                }
            }
        </script>
    </head>
    <body>
        <fieldset>
            <legend>注册</legend>
            <form action="regist.do" method="post">
                 用户名:<input type="text" name="username" onblur="check_username();" id="username"/><span style="color:red;" id="span_username">${regist_error }</span><br>
                密码:<input type="password" name="pwd" onblur="check_pwd();"/><br>
                <input type="submit" value="注册" />
            </form>
        </fieldset>
    </body>
    </html>

    ActionServlet

    public class ActionServlet extends HttpServlet{
      protected void service(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out=response.getWriter();
        String uri=request.getRequestURI();
        String action=uri.substring(uri.lastIndexOf('/'),uri.lastIndexOf('.'));
        if(action.equals("/checkUsername")){
          Thread.sleep(5000);
          String username=request.getParameter("username");
          if("张三".equals(username)){
            out.println(
    "用户名已经存在");       }else{         out.println("可以使用"); }     }else if(action.equals("/regist")){       //任然要检查用户是否存在
          
    String username=request.getParameter("username");       if("zs".equals(username)){         request.setAttribute("regist_error", "用户名被占用");         request.getRequestDispatcher("/regist.jsp").forward(request,response);       }else{         System.out.println("注册");       }
       }   } }

    prototype.js的简单使用


    $(id);相当于document.getElementById(id);

    $F(id);相当于 $(id).value

    $(id1,id2..)依据id1,id2..查找对应的节点,然后将这些节点放到一个数组里面返回。

    strip()除掉字符串两端的空格

    evalJSON()将符合json语法格式的字符串转换成一个javascript对象。

    发送post请求


    xhr.open("post",url,true);

    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//设置一个消息头。发送post请求,要求浏览器发送一个Content-Type消息头。默认情况下,ajax对象(xhr)不会添加content-type消息头,所以调用setRequestHeader方法来添加这个消息头。

    xhr.send("username="+name);

    提示:有中文信息提交建议采用Post方式

    ajax应用当中的编码问题


    发送get请求

    产生乱码的原因

    IE内置的ajax对象会使用“gbk”对中文进行编码,其他浏览器内置的ajax对象会使用“utf-8”对中文进行编码;服务器默认情况下,对于get请求发送过来的数据,会使“ISO-8859-1”进行解码。

    解决方式

    step1、让服务器使用指定的编码格式进行解码。比如:可以修改tomcat的配置文件conf/server.xml,添加URIEncoding="utf-8"

     <Connector connectionTimeout="20000" port="8088" protocol="HTTP/1.1" redirectPort="8443" URIEncoding="utf-8"/>

    step2、使用全局函数encodeURI函数对请求地址进行编码

    xhr.open("get",encodeURI("check_username.do?username='张三'"),true);

    发送post请求

    xhr.open(‘post’,’check_username.do’,’true’);

    乱码产生的原因

    采用post请求方式,浏览器内置的ajax对象,对中文参数都使用”utf-8”进行编码。服务器端:如果是火狐发送请求,服务器端采用utf-8解码。其他浏览器是is0-8859-1解码。

    因为发送的content-type消息头

    火狐:Content-Type        application/x-www-form-urlencoded; charset=UTF-8

    其他:Content-Type: application/x-www-form-urlencoded;

    火狐带有utf-8。这样服务器端采用utf-8解码,而不是iso-8859-1去解码

    解决方式

    服务器端:request.setCharacterEncoding="utf-8";

    缓存问题


    1. 什么是缓存问题?

    在使用IE浏览器时,如果使用get方式发送请求,浏览器会将数据缓存起来。这样,当再次发送请求时,如果请求地址不变,IE不会真正地向服务器发请求,而是将之前缓存的数据显示给用户。只有IE浏览器才会有缓存问题

    2. 解决方式:

    a. 使用post方式(post请求不会缓存)

    b. 为了避免缓存问题,可以在URL后面追加一组参数,该参数值可以使用随机值或者时间戳。随机值:Math.random()  时间戳:new Date().getTime()

    同步问题


    浏览器是单线程的,设置成同步之后,发送请求就一直等待服务器的处理结果、浏览器没有其他的线程来处理其他事。 一般数据验证的时候用同步请求。要等服务器返回数据后,才可以做其他事。

  • 相关阅读:
    thinkphp5 tp5 命名空间 报错 Namespace declaration statement has to be the very first statement in the script
    开启 php 错误 提示 php-fpm 重启 nginx 500错误 解决办法 wdlinux lnmp 一键包 php脚本无法解析执行
    js 设置 cookie 定时 弹出层 提示层 下次访问 不再显示 弹窗 getCookie setCookie setTimeout
    php 二维数组 转字符串 implode 方便 mysql in 查询
    nginx 重启 ps -ef|grep nginx kill -HUP 主进程号
    jquery bootstrap help-block input 表单 提示 帮助 信息
    jquery 倒计时 60秒 短信 验证码 js ajax 获取
    jQuery如何获取同一个类标签的所有的值 遍历
    linux下C语言文件操作相关函数
    gcc,gdb用法
  • 原文地址:https://www.cnblogs.com/qin-derella/p/6746968.html
Copyright © 2011-2022 走看看