DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> 發送請求參數
發送請求參數
編輯:AJAX詳解     
如果在請求時,要連帶發送相關參數,若是使用GET的方式發送參數,則將參數附加在URL上即可,例如:
var urlAndqueryString = "yourApp?name=justin&age=30";
XMLHttp.open("GET", urlAndqueryString);
XMLHttp.send(null);

如果發送請求時使用POST,那麼將要發送的資料塞到send()中即可,例如:
var url = "yourApp";
var queryString = "name=justin&age=30";
XMLHttp.open(“POST", url);
XMLHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
XMLHttp.send(queryString);

由於塞到POST本體中的資料有可能是表單的name/value,也有可能是XML、JSON 等格式,您必須告訴伺服端如何剖析表單本體內容,這可以設定Content-Type的header來告知,以name/value或JSON格式來說,就要設定Content-Type為application/x-www-form-urlencoded,如果是XML文件的話,則要設定text/XML。

以下以簡單的實例示範如何以GET及POST發送請求參數,假設您用以下的Servlet來處理請求:
  • GetPostServlet.Java
package onlyfun.caterpillar;

import Java.io.IOException;
import Java.io.PrintWriter;

import Javax.servlet.ServletException;
import Javax.servlet.http.HttpServletRequest;
import Javax.servlet.http.HttpServletResponse;

public class GetPostServlet extends Javax.servlet.http.HttpServlet implements
Javax.servlet.Servlet {
public GetPostServlet() {
super();
}

protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
doResponse(request, response, "GET");
}

protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
doResponse(request, response, "POST");
}

private void doResponse(HttpServletRequest request,
HttpServletResponse response, String method)
throws ServletException, IOException {
String name = request.getParameter("name");

response.setContentType("text/Html");
PrintWriter out = response.getWriter();

out.println(method + ": Hello!" + name + "!");

out.flush();
out.close();
}
}

回應只是簡單的傳回發送的請求參數值,並加上GET或POST表示接收到何種請求,假設您使用以下的網頁來發送請求:
  • GETPOSTEx-1.Html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/Html4/loose.dtd">
<Html>
<head>
<meta http-equiv="Content-Type" content="text/Html; charset=BIG5">
<title>GET、POST</title>
<script type="text/Javascript" src="GETPOSTEx-1.JS"></script>
</head>
<body>
<input id="namefIEld" type="text" name="name"/>
<input value="GET" type="button" />
<input value="POST" type="button" />
<br>
<div id="response"></div>
</body>
</Html>

網頁上分別有GET與POST兩個按鈕,按下後分別由GETPOSTEx-1.js中的doGetRequest()或doPostRequest()來發送GET、POST請求,假設GETPOSTEx-1.JS撰寫如下:
  • GETPOSTEx-1.JS
var XMLHttp;

function createXMLHttpRequest() {
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}

function createQueryString() { // 建立請求參數
return "name=" + document.getElementById("namefIEld").value; // 取得文字方塊值
}

function doGetRequest() {
var url = "GetPostServlet?" + createQueryString();
createXMLHttpRequest();
XMLHttp.onreadystatechange = handleStateChange;
XMLHttp.open("GET", url);
XMLHttp.send(null);
}

function doPostRequest() {
var url = "GetPostServlet?timeStamp=" + new Date().getTime(); // 避免快取
createXMLHttpRequest();
XMLHttp.onreadystatechange = handleStateChange;
XMLHttp.open("POST", url);
XMLHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
XMLHttp.send(createQueryString());
}

function handleStateChange() {
if(XMLHttp.readyState == 4) {
if(XMLHttp.status == 200) {
document.getElementById("response").innerHtml =
XMLHttp.responseText;
}
}
}

由於POST時,網址URL並不會有所變化,在某些瀏覽器,如果請求的URL是相同的,則會利用快取中的資料,為了避免資料快取,則您可以故意加上一個timeStamp請求參數,附上當時系統的時間,如此每次請求時URL就不會相同。

完成以上程式後,在網頁文字方塊中輸入"Justin"並按下GET按鈕,則會傳回"GET: Hello!Justin!"並顯示在網頁上,按下POST按鈕,則會傳回"POST: Hello!Justin!"並顯示在網頁上。 
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved