精华内容
下载资源
问答
  • Ajax实现局部刷新

    万次阅读 多人点赞 2021-03-01 23:30:13
    ajax的两种请求方式前言一、 Ajax是什么?二、实现方式:1.原生的JS实现方式(了解)2.JQeury实现方式 前言 最近复习了一下jQuery的一些内容,特此整理一下一些能用的得到的知识点,以前才学jQuery的时候压根就没有...


    前言

    最近复习了一下jQuery的一些内容,特此整理一下一些能用的得到的知识点,以前才学jQuery的时候压根就没有注意到那么多的细节,另外最近一直都在整理前端的一些工作中学到的小经验,大概还会有十篇左右的内容,就会慢慢开始整理后端,框架,以及数据库的一些小知识点


    一、 Ajax是什么?

    概念: ASynchronous JavaScript And XML 异步的JavaScript 和 XML

    1. 异步和同步:客户端和服务器端相互通信的基础上
           -> 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
           ->客户端不需要等待服务器端的响应。在服务器处理请求的过程中,客户端可以进行其他的操作

    2. Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
           ->通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
           -> 传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。

    二、实现方式:

    1.原生的JS实现方式(了解)

    javascript代码如下(示例):

    	//javascript代码
            var xmlhttp;//1.创建核心对象
            if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {// code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //2. 建立连接
            /*  参数:
                    1. 请求方式:GET、POST
                        * get方式,请求参数在URL后边拼接。send方法为空参
                        * post方式,请求参数在send方法中定义
                    2. 请求的URL:
                    3. 同步或异步请求:true(异步)或 false(同步)
             */
             //将URL改成你自己的地址
            xmlhttp.open("GET", "<%=request.getContextPath()%>/testDemo?name=zhangsan", true);
            //3、将请求发送到服务器。
            xmlhttp.send();
            //4.接受并处理来自服务器的响应结果
            //获取方式 :xmlhttp.responseText
            //当xmlhttp对象的就绪状态改变时,触发事件onreadystatechange。
            //接收服务器端的响应(readyState=4表示请求已完成且响应已就绪    status=200表示请求响应一切正常)
            xmlhttp.onreadystatechange = function () {
                //判断readyState就绪状态是否为4,判断status响应状态码是否为200
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    //获取服务器的响应结果
                    var responseText = xmlhttp.responseText;
                    alert(responseText);
                }
            }
    

    java后端接收代码如下(示例):

    		//.取得参数,
            String name=request.getParameter("name");
            System.out.println(name);//打印输出取得的参数
            //将数据信息回写给ajax
            response.getWriter().write("hello");
    

    2.JQeury实现方式

    代码如下(示例):

    1. $.ajax()

        -> 语法:$.ajax({键值对});

    代码如下(示例):

     //使用$.ajax()发送异步请求
            $.ajax({
                url: "<%=request.getContextPath()%>/testDemo", // 请求路径
                type: "POST", //请求方式
                data: {"name": "zhangsan"},//请求参数
                dataType: "JSON", //设置接受到的响应数据的格式,还有很多格式,如:text
                //async:false,//默认是true(异步),false(同步)
                success: function (data) {//响应成功后的回调函数
                    alert(data);
                },
                error: function () {
                    alert("出错啦...");
                },
            });
    
                
    	//java代码和上述java代码一样即可
    

    2. $.get():发送get请求(ajax的简化)

    -> 语法:$.get(url, [data], [callback], [type])
        * url:请求路径
        * data:请求参数
        * callback:回调函数
        * type:响应结果的类型

    代码如下(示例):

     $.get("<%=request.getContextPath()%>/testDemo",{name:"zhangsan"},function (data) {
                    alert(data);
                },"text");
    

    3. $.post():发送post请求(ajax的简化)

    ->语法:$.post(url, [data], [callback], [type])
        * url:请求路径
        * data:请求参数
        * callback:回调函数
        * type:响应结果的类型
    代码如下(示例):

      $.post("<%=request.getContextPath()%>/testDemo",{name:"zhangsan"},function(data) {
                    alert(data);
                },"text");
    
    

    小栗子

    jsp页面:

    <%--
      Created by IntelliJ IDEA.
      User: ASUS
      Date: 2021/3/2
      Time: 22:20
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Title</title>
        <title>ajax局部刷新</title>
        <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.11.0.js"></script>
        <style type="text/css">
            input {
                width: 260px;
                height: 25px;
            }
    
            input:focus {//按钮点击后改变颜色
                background: #10a0e9;
            }
    
    
        </style>
    </head>
    <body style="text-align:center;">
    <input type="button" value="btn1" onclick="btnfun1()">
    <input type="button" value="btn2" onclick="btnfun2()">
    <input type="button" value="btn3" onclick="btnfun3()">
    <br>
    <span>你好啊!!我叫:</span>
    <div id="div1">
    </div>
    </body>
    
    <script type="text/javascript">
        function btnfun1() {
            $.ajax({
                url: "<%=request.getContextPath()%>/ajaxServlet",	//上传URL
                type: "POST", //请求方式
                data: {"flag": "one"}, //需要上传的数据
                dataType: "text", //设置接受到的响应数据的格式
                success: function (data) {	//请求成功
                    console.log(data);
                    $("#div1").html(data);
                },
                error: function () {
                    alert("出错啦...");
                },//表示如果请求响应出现错误,会执行的回调函数
            });
        }
    
        function btnfun2() {
            $.ajax({
                url: "<%=request.getContextPath()%>/ajaxServlet",	//上传URL
                type: "POST", //请求方式
                data: {"flag": "two"}, //需要上传的数据
                dataType: "text", //设置接受到的响应数据的格式
                success: function (data) {	//请求成功
                    console.log(data);
                    $("#div1").html(data);
                },
                error: function () {
                    alert("出错啦...");
                },//表示如果请求响应出现错误,会执行的回调函数
            });
        }
    
        function btnfun3() {
            $.ajax({
                url: "<%=request.getContextPath()%>/ajaxServlet",	//上传URL
                type: "POST", //请求方式
                data: {"flag": "three"}, //需要上传的数据
                dataType: "text", //设置接受到的响应数据的格式
                success: function (data) {	//请求成功
                    console.log(data);
                    $("#div1").html(data);
                },
                error: function () {
                    alert("出错啦...");
                },//表示如果请求响应出现错误,会执行的回调函数
            });
        }
    </script>
    
    </html>
    

    java代码

    package test3_2.ajax;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    
    @WebServlet("/ajaxServlet")
    public class AjaxServlet extends HttpServlet {
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            request.setCharacterEncoding("UTF-8");
            response.setContentType("text/html; charset=UTF-8");
            response.setCharacterEncoding("UTF-8");
            //1、获取ajax传递过来的参数信息
            String flag = request.getParameter("flag");
            System.out.println(flag);
            //2、需要返回的数据信息
            String data = " ";
            if("one".equals(flag)){//流行歌曲
                data = "张三";
            }else if("two".equals(flag)){//经典歌曲
                data = "李四";
            }else if("three".equals(flag)){//摇滚歌曲
                data = "老王";
            }
            //3、将数据信息回写给ajax
            response.getWriter().write(data);
    
        }
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            doPost(request,response);
        }
    }
    
    

    截图:
    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

    你可能会感兴趣~~《Ajax传输数组与后端接收》

    创作不易,如果这篇文章能够帮助到你,希望能关注或收藏一下博主,如果文章内容有问题也可留言讨论,我们一起学习,一起进步!!

    展开全文
  • ajax实现局部刷新

    2010-06-21 17:14:54
    jsp中用ajax实现局部刷新,这样你的页面就不会全部刷新,这样主要用在视频播放评论中的时候
  • AJAX实现局部刷新

    万次阅读 2017-01-12 21:23:30
    AJAX大家耳濡目染,它是个非常强大...1、 AJAX主要应用到的是局部刷新。也就是当页面上的摸一个标签内容需要刷新,为了不引起整个页面的回发,通常利用AJAX来解决。 2、获取其他网页的内容。当本页内容基于其他网站

    AJAX大家耳濡目染,它是个非常强大的东西。今天我就在这里写一些比较实在的东西,希望能够帮助到一些人~~~

     

    虽然AJAX是very strong的,但是呢,它也是有使用范围的,我这里交代一下:

    1、  AJAX主要应用到的是局部刷新。也就是当页面上的摸一个标签内容需要刷新,为了不引起整个页面的回发,通常利用AJAX来解决。

    2、获取其他网页的内容。当本页内容基于其他网站时(例如天气预报),通常也使用AJAX+正则表达式的方法,从外网截获自己需要的内容。

    3、需要异步读取的地方。这个最明显的例子,非Google map莫属了,因为地图占据的数据资源太大,当用户移动的时候,使用异步读取方式可以缩短数据抓取时间,同时AJAX技术对于影像网站异步读取数据也有很大的帮助的

    4、最新的桌面应用模式。这中桌面应用模式可能算是AJAX扩大应用的一种,在以前的程序中,CS是桌面,BS是web,而使用AJAx可以将网络上的东西,显示在桌面上,表面就是和浏览器脱离了关系,但是这样应用AJAx则需一个底层框架如Bindows等

     

    一、局部刷新:(我用一个例子来说明,实现下拉列表框的级联)

        局部刷新有三种方法可以完成:

              1,、比较传统的JavaScript模式:

                        这种模式实现无刷新:前台定义脚本方法FillData(strcity),接收的参数就是城市用来添加下拉列表框。后台应用到RegisterClientScriptBlock方法注册一个脚本字符串。这个脚本字符串用来根据不同城市来筛选出在此城市下的区县。这样就ok了(此处不详解,如果不明白想了解的话给我留言~~~)

             2、使用框架模式:

                        这种模式也是一种比较常见的模式。利用iframe,或frameset框架来实现局部刷新。很容易理解的,不详解~~~

             3、AJAX实现:

                    此方法我用我最近一直在用的说明:我的项目有页面时记录的列表,然后再列表中的操作有通过点击一个按钮图片,展开挂在此条记录下的子记录,以此类推,可多层展示;这样需要页面无刷新的显示:

                   注意:起始页面我用DataList展示父级记录

                   具体操作是:在页面按钮处例如:<input type ="button" value="展开子集" οnclick="ExpChild(<%#Eval("ID")%>)">,按钮添加一个js函数,此函数通过id可获得父级记录的子集,并返回字符串;然后再页面处,每行父级记录下隐藏一个div,或者如果你用table布局可隐藏一个<tr>.重点来了~~~~ExpChild函数的写法,直接例子(应用的AJAX是集成在jQuery中的):

    function ExpProcess(id){

    //此处通过ajax访问一个页面页面调用方法然后给前台response.write()一段子集字符串,此处的Data就可以接受的到
         var urls = "Ajax.aspx?act=getProcess&id=" + id;
       // document.write(urls);
        $.ajax({
            type:"GET",
            cache:false,
            url:urls,
            success:function(data){
             $("#ProcessDiv_" + id).attr("innerHTML",data);//此处用来填充隐藏的子集div,已获得子集数据
            }
        });

    //此处是利用JQuery的toggle()方法自动控制隐藏部分显隐
         $("#ProcessTr_" + id).toggle();
        $("#DairyTr_"+id).hide();
        $("#Tr_"+id).hide();
    }

    展开全文
  • AJAx实现局部刷新

    千次阅读 2017-10-23 18:31:28
    AJAX示例  window.onload= function() {  varxhr;  if(window.XMLHttpRequest) {  //IE7+, Fir

    AJAX示例

    <scripttype="text/javascript">

                       window.οnlοad= function() {

                                varxhr;

                                if(window.XMLHttpRequest) {

                                         //IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

                                         xhr= new XMLHttpRequest();

                                }else {

                                         //IE6, IE5 浏览器执行代码

                                         xhr= new ActiveXObject("Microsoft.XMLHTTP");

                                }

                                xhr.open("get","testAjax.txt");

                                alert(xhr.readyState);

                                xhr.send();

                                xhr.onreadystatechange= function() {

                                         alert(xhr.readyState);

                                         if(xhr.readyState == 4 && xhr.status == 200) { //返回完整,请求成功

                                                   var res =xhr.responseText; //获取返回值

                                                   //拿到返回值后可对dom操作,局部刷新页面

                                                   alert(res);

                                         }

                                }

                       }

             </script>

    展开全文
  • jQuery+ajax实现局部刷新

    千次阅读 2018-10-10 18:36:40
  • AJAX实现局部刷新

    2010-06-05 02:05:32
    之前上传过一个随机验证码ASP.NET,但没有用AJAX实现局部刷新得验证码--所以这里改进文档上传下
  • 使用AJAX实现局部刷新

    2011-12-16 10:14:25
    提交表单时,使用AJAX实现局部刷新,就不用每次都重新提交整个页面,效率大大提高了。
  • 在项目中,经常会用到ajax,比如实现局部刷新,比如需要前后端交互等,这里呢分享局部刷新的两种方法,主要用的是ajax里面的.load()。感兴趣的朋友一起看看吧
  • 基于ASP NETWeb应用开发单元8任务2利用AJAX实现局部刷新.ppt
  • struts-ajax实现局部刷新分页

    千次阅读 2015-07-29 23:06:01
    struts-ajax实现局部刷新分页
  • php ajax 实现局部刷新简单例子(超简单化)
  • Thymeleaf+Ajax实现局部刷新

    千次阅读 2020-09-20 17:10:19
    通过使用thymeleaf+ajax实现:页面在搜索后的局部刷新
  • ajax实现局部刷新

    千次阅读 2018-03-31 18:04:34
    点击左侧二级栏目,局部刷新右侧内容。 &lt;div class="list fl"&gt; &lt;ul class="one"&gt; &lt;c:forEach items="${category2s }" var="...
  • 请问“网页局部刷新”除了用AJAX之外还有什么技术可我现在做的是ASP+ACCESS的动态网页,现在想点“首页”按钮,下面的内容就实现web页面的局部刷新 服务器的回传会引发整个页面的刷新,怎么样只让它刷新局部呢,前...
  • 通过C#开发语言工具,实现网页局部刷新与安全认证管理过程,密码加密用DES加密方法

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,179
精华内容 10,871
关键字:

ajax实现局部刷新