Ext Js 3.2中Ext.ajax.request方法详解

原创

ccna_zhang 2022-09-26 11:29:47 博主文章分类：Ext Js ©著作权

文章标签 ext xmlhttprequest string ajax button 文章分类 后端开发

©著作权归作者所有：来自51CTO博客作者ccna_zhang的原创作品，请联系作者获取转载授权，否则将追究法律责任

1：Ext.Ajax.request([Object options]):Number

options中的一些属性和含义如下：

url：指定请求的服务端url

params：指定要传递的参数，可以是一个包含参数名称及值的对象，也可以是类似于name=xx&birthday=1978-1-1的url编码字符串，或者是一个能返回上述两种内容

的函数

method：指定发送Ajax请求使用的method，可以是GET或者POST方式，默认情况下，如果请求中没有传递任何参数，则使用GET，否则使用POST

callback：指定Ajax请求的回调函数，该函数不管是调用成功还是失败，都会执行。传递给回调函数的参数有三个，第一个参数options表示执行request方法时的

参数，第二个参数表示success请求是否成功，第三个参数表示response用来执行Ajax请求的XMLHttpRequest对象

success：指定当Ajax请求执行成功后返回的回调函数，传递给回调函数两个参数，第一个参数response表示执行Ajax请求的XMLHttpRequest对象，第二个参数

表示执行request方法时的options对象

failure：指定当请求出现错误时执行的回调函数，传递给回调函数两个参数，第一个参数response表示执行Ajax请求的XMLHttpRequest对象，第二个参数表示执行request

方法时的options对象

scope：指定回调函数的作用域，默认为浏览器Window

form：指定要提交的表单id或者表单数据对象

isUpload：指定要提交的表单是否是文件上传表单，默认情况下会自动检查。

headers：指定要请求的Header信息

xmlData：指定用于发送给服务器的xml文档，如果指定了该属性，则其他地方设置的参数将无效

jsonData：指定需要发送给服务器端的JSON数据，如果指定了该属性，则其他地方设置的要发送的参数值将无效

disableCaching：表示是否禁止cache

2：实例代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>Ext.Ajax.request实例</title>
    
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">    
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="This is my page">
  
  <link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link>
  <script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="ext3.2/ext-all.js"></script>
  <script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script>
  
  <script type="text/javascript">
       function login() {
         var reqeustConfig = {
           url: 'login.action',
           form: 'loginForm',
           callback: function(options, success, response) {
                var msg = ['请求是否成功:', success, '\n', '服务器返回值：', response.responseText];
                    alert(msg.join(''));
           }
         };
         Ext.Ajax.request(reqeustConfig);
       }
  </script>
  </head>
  <body>
     <form id="loginForm" method="post">
                   用户名:<input name="username" type="text" /><br/>
                        密码:<input name="password" type="password"/><br/>
         <input type="button" name="button" id="button" value="提交" οnclick="login();"/>
         <input type="reset" name="button" value="重置"/>
     </form>
  </body>
</html>

LoginAction接收的方法login为：

package com.capinfotech.action;

import java.io.IOException;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.interceptor.ServletRequestAware;
import org.apache.struts2.interceptor.ServletResponseAware;

import com.opensymphony.xwork2.ActionSupport;

public class LoginAction extends ActionSupport implements ServletRequestAware,
    ServletResponseAware {

  private static final long serialVersionUID = -2251501394276835795L;
  
  private HttpServletRequest request;
  private HttpServletResponse response;

  private String username;
  private String password;

  public String getUsername() {
    return username;
  }

  public void setUsername(String username) {
    this.username = username;
  }

  public String getPassword() {
    return password;
  }

  public void setPassword(String password) {
    this.password = password;
  }

  public void setServletRequest(HttpServletRequest request) {
    this.request = request;
  }

  public void setServletResponse(HttpServletResponse response) {
    this.response = response;
  }

  public void login() {
    String msg = " ";
    if (username != null && username.equals("admin") && password != null
        && password.equals("admin")) {
      msg = "恭喜你登录成功！";
    } else {
      msg = "登录失败";
    }

    try {
      response.getWriter().write(msg);
      response.getWriter().flush();
    } catch (IOException e) {
      
    }
  }
}