一、向服務器發送請求。
1.通過Ext.Ajax.request向服務器發送請求。
2.通過url屬性來指定發送請求的地址。
3.通過params屬性來設置請求參數。（參數的格式是核心）
4.callback屬性來指定回調函數。
示例一：發送請求。//這個格式就非常的簡單了，但是實際中這樣用的並不多
|
Ext.Ajax.request({ url:"loginServer.jsp", params:{ username:"lifengxing", password:"123" }, callback:function(options,success,response){ if(success){ alert(response.responseText) } } }) |
請求頁面loginServet.jsp。
|
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% String username = request.getParameter("username"); String password = request.getParameter("password"); String msg = ""; if(username.equals("lifengxing") && password.equals("123")){ msg = "登陸成功"; }else{ msg = "登陸失敗"; } response.getWriter().write(msg); %> |
示例二：異步提交表單。（參數相當於是一個表單了）
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Request</title> <script type="text/javascript" src="../Ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../Ext/ext-all-debug.js"></script> <link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css"></link> <script type="text/javascript" src="TestRequest2.js"></script> </head>
<body> <form id="loginForm"> 用戶名:<input type="text" name="username"/><br /> 密碼:<input type="password" name="password"/><br /> <input type="button" value="登陸" onclick="login()" /> </form> </body> </html>
|
|
function login() { Ext.Ajax.request({ url:"loginServer.jsp", form:"loginForm", callback:function(options,success,response){ if(success){ alert(response.responseText) } } }) }
|
二、向服務器發送XML數據。
|
function login() { Ext.Ajax.request({ url:"loginServerXML.jsp", xmlData:createXML(), callback:function(options,success,response){ if(success){ alert(response.responseText) } } }) }
function createXML(){ //獲得表單值 var uname = document.forms["loginForm"].username.value; var pw = document.forms["loginForm"].password.value; //創建XML文檔對象 var dom = new ActiveXObject("msxml2.DOMDocument"); //頭部聲明 var header = dom.createProcessingInstruction("xml", "version='1.0'"); dom.appendChild(header); var root = dom.createElement("userinfo"); var username = dom.createElement("username"); username.text = uname; var password = dom.createElement("password"); password.text = pw; root.appendChild(username); root.appendChild(password); dom.appendChild(root); return dom; }
|
服務器解析XML數據。
|
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ page import="org.dom4j.*"%> <%@ page import="org.dom4j.io.*"%> <% SAXReader sax = new SAXReader(); Document document = sax.read(request.getInputStream()); Element root = document.getRootElement(); String username = root.element("username").getStringValue(); String password = root.element("password").getStringValue(); String msg = ""; if(username.equals("lifengxing") && password.equals("123")){ msg = "登陸成功"; }else{ msg = "登陸失敗"; } response.getWriter().write(msg); %> |
注意：需要導入dom4j這個JAR包
三、向服務器發送Json數據。
|
function login() { Ext.Ajax.request({ url:"loginServerJson.jsp", jsonData:createJson(), callback:function(options,success,response){ if(success){ alert(response.responseText) } } }) }
function createJson() { var uname = document.forms["loginForm"].username.value; var pw = document.forms["loginForm"].password.value; var jsonObject = { username : uname, password : pw } return jsonObject; } |
服務器解析Json數據。
|
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ page import="net.sf.json.*"%> <%@page import="java.io.BufferedReader;"%> <% BufferedReader in = request.getReader(); StringBuffer jsonStr = new StringBuffer(); String str = ""; while((str = in.readLine()) != null) { jsonStr.append(str); }
JSONObject jsonObject = JSONObject.fromObject(jsonStr.toString());
String username = jsonObject.getString("username"); String password = jsonObject.getString("password"); String msg = ""; if(username.equals("lifengxing") && password.equals("123")){ msg = "登陸成功"; }else{ msg = "登陸失敗"; } response.getWriter().write(msg); %> |
注意：需要導入如下幾個JAR包。
commons-beanutils.jar
commons-lang.jar
ezmorph-1.0.6.jar
json-lib-1.1-jdk15.jar
commons-logging-1.1.jar
commons-collections-3.1.jar