精华内容
下载资源
问答
  • 访问现在很火的google plus,细心的用户也许会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变。并且能够很好的支持浏览器的前进和后退。不禁让人想问,是什么有这么强大的功能呢? HTML5里...
  • 使用javascript向服务器提出请求并处理响应而不阻塞用户!核心对象XMLHTTPRequest。通过这个对象,您的 JavaScript 可不重载页面的情况与Web服务器交换数据。AJAX 浏览器与 Web 服务器之间使用异步数据传输...

    AJAX不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。使用javascript向服务器提出请求并处理响应而不阻塞用户!核心对象XMLHTTPRequest。通过这个对象,您的 JavaScript 可在不重载页面的情况与Web服务器交换数据。AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。

    说白了其实ajax就是通过JavaScript中得核心对象XMLHTTPRequest来实现的功能,下面我的实现时基于jquery的实现。

    jsp页面部分如下:

    <s:form action="/user/register.do" method="post" enctype="multipart/form-data">
        		<h3 style="display: inline;">
    			用户名:<input type="text" name="username" id="username" size="25" maxlength="20" />
    		</h3>
        		<h5 style="display: inline;" id="message"></h5><br>
        		<h5 style="color: red;">(大小不要超过20个字符)</h5>
        		
        		<h3 style="display: inline;">
    			密 码:<input type="password" name="password" id="password" size="25" maxlength="20"/>
    		</h3><br>
        		<h5 style="color: red;">(大小不要超过20个字符)</h5>
        		
           		<h3 style="display: inline;">
    			用户图像:<s:file name="userimage" id="userimage" size="25" οnblur="imagecheck()"/>
    		</h3>
           		<h3 style="display: inline;" id="image"></h3><br/></br></br>
           		
        		<h3 style="display: inline;">
    			用户等级:<input style="background-color: silver;" type="text" name="userlevel" size="25"  readonly="true" value="普通用户"/>
    		</h3><br>
        		<h5 style="color: red;">(默认为普通会员,会员评级方式点<a href="/book_shops/introduceOfUserLevel.jsp"><font color="blue">这里</font></a>)</h5>
        		
    		<h3 style="display: inline;">
    			用户账户:<input style="background-color: silver;;" type="text" name="useraccount" size="25"  readonly="true" value="1"/>
    		</h3>
    		<h5 style="color: red;">(请注册后去个人中心充值)</h5>
    			
            	<s:submit value="提交"  οnclick="return registercheck()" ></s:submit>
            	<span style=word-spacing:25px>  </span>
    		<s:reset value="重置"></s:reset><br/>
        	</s:form>

    同时定义的JavaScript的有关代码如下:

    *通过ajax来验证用户名的js 
     */
    $(window).load(function(){
            var url="/book_shops/user/ajaxregister.do";
            $("#username").blur(function(){
            	if($("#username").val().length==0){
            		$("#message").css("color","red");
            		$("#message").html("(请输入用户名)");
                    $("#message").focus();
            	}else{
            		  var name=$("#username").val();
                      //alert(name);
                      var param={userName:name};
                      //alert(param.userName);
                      //alert(param);
                      $.post(url,param,function(data){
                          //alert(data);data的值是{type:'yes',show:'(该用户名已被使用)'}
                          eval("json="+data);//运行后json={type:'yes',show:'(该用户名已被使用)'},所以json是自己定义的。
                          //alert(json.type);
                              if(json.type=='no'){
                                      $("#message").css("color","green");
                                      $("#message").html(json.show);
                              }
                              if(json.type=='yes'){
                            	  	  $("#message").css("color","red");
                                      $("#message").html(json.show);
                                      $("#message").focus();
                              }
                       
                      });
            	}
                        
            });
    });
    同时后台的action如下:
    package edu.rxb.action.user;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.util.ArrayList;
    import java.util.List;
    
    import javax.servlet.http.HttpServletResponse;
    import org.apache.struts2.ServletActionContext;
    
    import com.opensymphony.xwork2.ActionSupport;
    
    import edu.rxb.dao.user.UserInfoDao;
    import edu.rxb.dao.user.UserLoginDao;
    import edu.rxb.model.Users;
    
    public class AjaxRegister extends ActionSupport {
    	private String userName = null;
    	private String message = null;
    	/* (non-Javadoc)
    	 * @see com.opensymphony.xwork2.ActionSupport#execute()
    	 */
    	@Override
    	public String execute() throws Exception {
    		// TO/DO Auto-generated method stub
    		userName = ('u'+ServletActionContext.getRequest().getParameter("userName")).trim();
    		//System.out.println(userName);
    		UserLoginDao userLoginDao = new UserLoginDao();
    		if(userLoginDao.check_name(userName)){
    			//System.out.println("已注册");
    			//message="{\"type\":\"yes\", \"show\":\"(用户名不可用)\"}";
    			message = "{type:'yes',show:'(该用户名已被使用)'}";
    			
    		}else{
    			//System.out.println("可用");
    			//message="{\"type\":\"no\", \"show\":\"(用户名可用)\"}";
    			message = "{type:'no',show:'(该用户名可以使用)'}";
    		}
    		PrintWriter writer;
    		HttpServletResponse httpServletResponse = ServletActionContext.getResponse();
            try {
            	httpServletResponse.setContentType("text/html;charset=UTF-8");
                writer = httpServletResponse.getWriter();
                writer.write(message);
                writer.flush();
                writer.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
    		
    		return "checkname";
    	}
    
    	public String getMessge() {
    		return message;
    	}
    
    	public void setMessge(String message) {
    		this.message = message;
    	}
    
    	public String getUserName() {
    		return userName;
    	}
    
    	public void setUserName(String userName) {
    		this.userName = userName;
    	}
    
    	public String getMessage() {
    		return message;
    	}
    
    	public void setMessage(String message) {
    		this.message = message;
    	}
    	
    }
    
    操作访问数据的dao就没写了,就是简单的操作数据库。

    这些就实现了简单的在注册时查看用户名是否已注册,并在页面提示。




    展开全文
  • 以往我们做ajax,都要借助于一般处理程序(.ashx)或web服务(.asmx),并且每一个请求都要建一个这样的文件.这样建一大堆ashx文件,比较麻烦,多了看起来也不爽. 现在我们可以借助webMethod方法来使ajax实现起来更加...
  • 每次Ajax请求之后都使用history.pushState(replaceState)将携带参数的记录压入历史记录栈(Ajax请求不刷新页面,也不会自动加入到history) 通过监听window的onPopstate事件,下次用户进行前进、后退操作根据...

    实现步骤:

    1. 每次Ajax请求之后都使用history.pushState(replaceState)将携带参数的记录压入历史记录栈(Ajax请求不刷新页面,也不会自动加入到history)
    2. 通过监听window的onPopstate事件,在下次用户进行前进、后退操作时根据state中我们放置的参数做相应的处理以达到跳转的目的
    // Demo
    
    Service.getData()
    .then(result => {
        // 此处修改页面数据
    
        history.pushState({
            pageId: this.currentPage
        }, '')
    })
    
    window.addEventListener('popstate', event => {
        if(!_.isUndefined(event.state.pageId)) {
        // 做相应修改页面操作
    
        }
    })

     

    欢迎关注、点赞

    展开全文
  • JQuery插件 Ajaxupload实现文件上传功能无需创建form表单,就可以通过ajax的方式实现文件上传,功能丰富,可以设置上传之前、上传之后的...使用Ajaxupload,需要下载jquery及Ajaxupload,然后html页面中引入jque...

    JQuery插件 Ajaxupload实现文件上传功能时无需创建form表单,就可以通过ajax的方式实现文件上传,功能丰富,可以设置上传之前、上传之后的动作,方便做一些处理工作。Ajaxupload可以实现上传文件时页面无刷新,当选择一个文件之后,就开始了上传动作,不会刷新或跳转页面。

     

    使用Ajaxupload,需要下载jquery及Ajaxupload,然后在html页面中引入jquery及Ajaxupload。

     

    下面通过一个例子说明Ajaxupload的使用方法。

     

    首先创建一个html页面,然后创建div元素用来显示需要上传的文件输入区域,这里创建2个分别上传图片和zip文件,

     

    <div id="upload-pic">

           <label>图片:</label>    

           <input type="button" id="uploadImgBtn" name="uploadImgBtn" value="上传图片"/>

           <label>请保证图片符合以下条件:1、小于2M 2、JPG、JPEG格式。</label>

    </div>

       

    <div id="upload-file">  

           <label> zip文件:</label>

           <input type="button" id="uploadZipBtn" name="uploadZipBtn" value="上传zip文件"/>

           <label>请保证文件符合以下条件:1、小于50M 2、zip格式。</label>

    </div>

     

    在js代码里设置上传方法:

    var uploadBtn= $("#uploadImgBtn");         

    if(uploadBtn){   

            /* 上传图片 */

            new AjaxUpload(uploadBtn, {

                action: '/admin/app/photo',

                data : {

                   'key1' : "key1",

                   'key2' : "key2",

                   'key3' : "key3"

                },

                name: 'mypic',

                onSubmit : function(file , ext){

                   if (ext && /^(jpg|jpeg)$/.test(ext)){                      

                       uploadBtn.attr('value','上传中...');                  

                   } else {

                      alert("只允许上传图片(jpg格式)");

                      return false;           

                   }

                },

                onComplete : function(fileName, data){

                        var rst = data.success;                

                        if(rst=='true'){

                            uploadBtn.attr('value','上传成功');                    

                        }else{                     

                            uploadBtn.attr('value','上传失败');

                        }               

                 }     

           });

    }

    action是提交到服务器端的地址,data中设置传到服务器端的属性值,name属性设置服务器端收到的文件名字,onSubmit是文件上传之前的操作,可以判断图片文件的格式,如果不符合要求,停止上传,onComplete是文件上传之后的操作,根据返回值可以判断文件上传成功与否,然后在页面上显示相应信息。

    服务器端用java实现,结合springmvc框架,如下:

    @RequestMapping(value = "photo", method = { RequestMethod.POST })
    @ResponseBody
    public String savePhoto(@RequestParam("mypic") MultipartFile file, @RequestParam("key1") String key1, 

      @RequestParam("key2") String key2, @RequestParam("key3") String key3) throws Exception {
      JSONObject result = new JSONObject();
      try {
        if (file == null || file.isEmpty()) {
          result.put("status", "empty_file");
        } else {
          if (file.getSize() > Constants.MAX_PIC_SIZE) {
            result.put("status", "error");
            result.put("message", "您上传的图片太大");
            return result.toString();
          }
          //将文件保存到本地文件系统


          logger.info("上传图片成功,保存到");
          result.put("success", "true");

          return result.toString();

        }
      
      } catch (Exception e) {
        result.put("status", "error");
        logger.error(e, e);
        return result.toString();
      }
    }

    在服务器端可以进一步检查文件类型、大小等,符合要求可以保存到本地,返回成功标准,否则返回失败。

    转载于:https://www.cnblogs.com/7mile/p/3156942.html

    展开全文
  • 原生js使用xmlhttpRequest实现ajax请求

    千次阅读 2014-10-02 01:45:23
    XMLHttpRequest是Ajax的核心,通过调用XMLHttpRequest对象的属性和方法可以实现客户端和浏览器之间进行数据的异步传输,从而实现页面的无刷新效果。   XMLHttpRequest对象的常用属性:    ...

    XMLHttpRequest是Ajax的核心,通过调用XMLHttpRequest对象的属性和方法可以实现在客户端和浏览器之间进行数据的异步传输,从而实现页面的无刷新效果。

     

    XMLHttpRequest对象的常用属性:

     

          onreadystatechange:指定当readyState属性值改变时的事件处理句柄(只写);

          readyState:返回当前请求的状态(只读);

          responseText:将相应信息作为字符串返回(只读);

     

    XMLHttpRequest对象的常用方法:

     

          open():创建一个新的HTTP请求,并制定此请求的方法,URL以及验证信息(用户名/密码);

          send():发送请求到HTTP服务器并接受回应。

     

    XMLHttpRequest对象的使用需要四个步骤:

     

    (1) 初始化XMLHttpRequest对象

    (2) 指定响应处理函数

    (3) 发送HTTP请求

    (4) 处理服务器返回的信息

     

    一、初始化XMLHttpRequest对象

     

          在使用XMLHttpRequest对象之前需要将XMLHttpRequest对象实例化,因为各个浏览器对这个实例化过程的实现不同,所以针对不同的浏览器实例化XMLHttpRequest对象的方式也不尽相同。

          针对微软IE浏览器:

    Js代码  收藏代码
    1. var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  

          针对其他的浏览器:

    Js代码  收藏代码
    1. var xmlHttp = new XMLHttpRequest();  

          所以,综合了这两种实例化XMLHttpRequest的形式,就可以提取出一个实例化的公共方法,代码如下:

    Js代码  收藏代码
    1. //实例化XMLHttpRequest对象  
    2. function createXMLHttpRequest(){  
    3.     if(window.XMLHttpRequest){  
    4.         xmlHttp = new XMLHttpRequest();   
    5.     }else if(window.ActiveXObject){  
    6.         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
    7.     }  
    8. }  

     

    二、指定响应处理函数

     

          接下来就要指定当服务器返回信息时客户端的处理方式。只需将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性即可,比如:

    Js代码  收藏代码
    1. xmlHttp.onreadystatechange = callBack;  

          需要说明的是,这个函数名称不加括号,不带参数;也可以使用JavaScript即时定义函数的方式定义响应函数,比如:

    Js代码  收藏代码
    1. xmlHttp.onreadystatechange = function(){  
    2.          // Do something...  
    3. }  

     

    三、发送HTTP请求

     

          指定响应处理函数后,就可以向服务器发出HTTP请求了。这需要调用XMLHttpRequest对象的open()和send()方法。

     

    Js代码  收藏代码
    1. xmlHttp.open("get/Post","URL",true/false);  
    2. xmlHttp.send(null);  

     

          3.1 open()方法详解 

     

    Js代码  收藏代码
    1. //XMLHttpRequest对象的open()方法原型  
    2. void open(string method, string URL , boolean asynch, string username, string password);  

          open()方法表示会建立对服务器的调用,这是初始化一个请求的纯脚本方法。

          它有2个必要的参数,还有3个可选的参数。method表示向服务器发送信息的方式,可以为Get或Post;URL表示所调用的服务器资源的URL;asynch是一个布尔值,指示这个调用时异步还是同步,默认为true;usernamepassword允许我们指定一个特定的用户名和口令。 一般使用时只取前三个参数即可。

     

          3.2 send()方法详解

     

    Js代码  收藏代码
    1. //XMLHttpRequest对象的send()方法原型  
    2. void send(content);  

          send()方法具体向服务器发送请求。如果请求声明为异步的,这个方法就会立即返回,否则它会等待,知道接收到响应为止。参数content是可选的,可以是一个DOM对象的实例、一个输入流或一个串。传入的内容会作为请求体的一部分发送。

     

    四、处理服务器返回的信息

     

          在第二部中我们为XMLHttpRequest指定了响应处理函数,响应处理函数检查XMLHttpRequest对象的readyState属性值的变化,如果readyState值为4时,代表服务器已经传回所有信息,可以开始处理信息并更新页面内容了。

    Js代码  收藏代码
    1. function callBack(){  
    2.         if(xmlHttp.readyState==4){  
    3.     if(xmlHttp.status==200){  
    4.             //do something with xmlHttp.responseText;  
    5.             xmlHttp.responseText;  
    6.     }     
    7.         }  
    8. }  

     

          4.1 readyState属性详解

     

          readyState属性用来表示请求的状态,有5个可取值,分别是:

          “0”:表示未初始化,即对象已经建立,但是尚未初始化(尚未调用open()方法);

          “1”:表示正在加载,此时对象已建立,尚未调用send()方法;

          “2”:表示请求已发送,即send()方法已调用;

          “3”:表示请求处理中;

          “4”:表示请求已完成,即数据接收完毕。

     

          4.2 status、statusText属性详解

         

          status:返回当前请求的HTTP状态码(只读);

          statusText:返回当前请求的响应行状态(只读)。

     

          4.3 responseText、responseXML属性详解

     

          responseText属性表示服务器的文本响应,其处理结果以字符串形式返回。

          responseXML属性表示服务器响应,其结果将格式化为XML Document对象。

     

          上述四个步骤,就是XMLHttpRequest对象在Ajax程序中的运行周期,即初始化、指定响应函数、发送请求、处理响应。

     

          下面是本示例的完整代码

     

    Js代码  收藏代码
    1. var xmlHttp;  
    2.   
    3. function AjaxFunction(){  
    4.         createXMLHttpRequest();  
    5.         if(xmlHttp!=null){  
    6.     xmlHttp.onreadystatechange = callBack;  
    7.     xmlHttp.open("get/Post","URL",true/false);  
    8.     xmlHttp.send(null);  
    9.         }     
    10. }     
    11.   
    12. //实例化XMLHttpRequest对象  
    13. function createXMLHttpRequest(){  
    14.         if(window.XMLHttpRequest){  
    15.     xmlHttp = new XMLHttpRequest();   
    16.         }else if(window.ActiveXObject){  
    17.     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
    18.         }  
    19. }  
    20.   
    21. //指定响应函数  
    22. function callBack(){  
    23.         if(xmlHttp.readyState==4){  
    24.                 if(xmlHttp.status==200){  
    25.             //do something with xmlHttp.responseText;  
    26.             xmlHttp.responseText;  
    27.                 }     
    28.         }  
    29. }  
    展开全文
  • 浏览器向服务器发送一个请求,必须等待响应结束,才能发送第二个请求,服务器处理期间,浏览器不能干别的事,通常刷新整个页面 异步: 浏览器向服务器发送一个请求,无须等待响应结束,就能发送第二个请求,...
  • ajax请求中用window.open()打开请求返回url(例如实现下载功能),可能会因为跨域问题导致浏览器拦截 解决办法是:请求前,打开一个窗口,请求成功后将返回的url直接赋值给该窗口的href,如下 downPkg...
  • XMLHttpRequest是Ajax的核心,通过调用XMLHttpRequest对象的属性和方法可以实现客户端和浏览器之间进行数据的异步传输,从而实现页面的无刷新效果。   XMLHttpRequest对象的常用属性:    ...
  • 于是自力更生,用以下代码实现母版页,使用Ajax环境下的滚动条PostBack后仍原位的问题: 在页面上加上这段JS: <script type="text/javascript">  var disPostion = 0;  function ...
  • JS实现AJAX文档上传显示loading效果

    千次阅读 2018-08-20 19:15:38
    在使用AJAX上传文档,经常会碰到一些较大的文件。如果不进行处理,在点击上传之后,页面没有任何的提示,会误导使用者去点击更多次。如果系统没有做过防止重复提交的处理的话,就会出现问题;且几遍做了方重复提交...
  • 实现dojo中ajax方法跳转页面--xhrPost

    千次阅读 2011-11-30 11:08:04
    在使用dojo的过程中,有些页面时dialog形式显示,但有时候需要将这些dialog直接作为页面跳转,而又不想再写相关页面,直接使用xhrPost方式来将这些写好Action的页面直接在页面显示,使用button关联相关时间,这里...
  • javaweb在使用前后台数据交互,常常用到Ajax的异步传输来减少数据传输量,让页面局部刷新,而不影响整体页面。json作为一种简单的轻量级的数据交换格式,大量用于前后台数据交换的格式,类似于map,也是键值关系的...
  • 声明:创建的是一个普通的JavaWeb项目,没有使用maven,使用的是jQuery(原因是ajax实现较为简单),并且将集合对象转换为json类型的数据。 导入的jar包: 项目组成介绍: index.jsp页面:包含html和jQuery的代码部分。...
  • 为实现用户离开页面时,自动注销功能,需要web页面的onbeforeunload事件处理函数中发送注销命令。这个地方大多用Ajax实现。有时还涉及到跨域访问的问题。这个地方就存在浏览器的兼容性问题。 浏览器在处理这个...
  • 本文纯属自己平时编代码的总结,一来以便自己使用,二来和大家交流交流 后端controller代码 JsonMessage jsonMessage = new JsonMessage(); //经过一些处理将数据存储map中 MapString,Object> map = new ...
  • 今天发现,当使用Ajax请求,如果后台进行重定向到其他页面时是无法成功的,只能浏览器地址栏输入才能够实现重定向。Ajax默认就是不支持重定向的,它是局部刷新,不重新加载页面。需要实现的功能是,后台网关拦截...
  • Ajax的基础使用详解

    2020-08-25 21:47:19
    Ajax的新特性 对于传统的JSP页面,访问后台...Ajax可以利用异步传输的特性实现页面的局部刷新。一个典型的应用是用户提交注册申请之前检测用户名的可用性: Ajax的基本使用方式 本文以上述经典应用为切入点,详解
  • ajax 可以实现异步请求,一个web页面不同步刷新的情况下,对服务器发送请求获取到资源,动态展示在页面。 而为了让前端去识别服务器发送的数据,我们需要将数据转换成.json 格式的 发送。使用到的注解: @...
  • 前言今天发现,当使用Ajax请求,如果后台进行重定向到其他页面时是无法成功的,只能浏览器地址栏输入才能够实现重定向。Ajax默认就是不支持重定向的,它是局部刷新,不重新加载页面。需要实现的功能是,后台网关...
  • 今天发现,当使用Ajax请求,如果后台进行重定向到其他页面时是无法成功的,只能浏览器地址栏输入才能够实现重定向。 Ajax默认就是不支持重定向的,它是局部刷新,不重新加载页面。 需要实现的功能是,后台网关...
  • 今天发现,当使用Ajax请求,如果后台进行重定向到其他页面时是无法成功的,只能浏览器地址栏输入才能够实现重定向。 Ajax默认就是不支持重定向的,它是局部刷新,不重新加载页面。 需要实现的功能是,后台网关...
  • Spring中使用拦截器,有时候会拦截ajax请求,此时我们可能会根据权限等因素对ajax数据进行个性化返回,比如跳转到其他页面或者进行alert提示等,从response对象中是无法直接进行这些操作的,需经过前端页面的...
  • 通过AJAX实现无刷新提交功能

    千次阅读 2007-09-08 16:26:00
    这次通过XMLHttpRequest,JS和DIV浮动层来完成无刷新提交功能,功能效果类似于我们在使用新浪BLOG登录的效果。Test.asp是当前页面,你点击按钮弹出一个div窗口用于填写信息,再通过XMLHttpRequest进行异步处理,将...
  • session超时,处理ajax请求

    千次阅读 2015-06-12 16:07:34
    项目使用的是spring-security安全框架,当session超时,如果不是ajax请求,很简单就能实现跳到指定的页面。但是ajax请求就会有问题。session超时的时候,点击到ajax请求就会弹出一些页面源码文件。  由于一直...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 381
精华内容 152
关键字:

在使用ajax实现页面处理时