使用ajax方式傳送表單資料

[yehlu]

http://www.ithome.com.tw/plog/index.php ... blogId=257

使用ajax方式傳送表單資料

fillano | 05 Jul, 2006 17:36

不論在IE利用msxml2裡面的xmlhttp物件或是在Mozilla裡面利用XMLHttpRequest物件，都可以使用http的POST方法來向伺服器提出請求。

寫一個簡單的javascript來測試一下。只是看看ajax到底怎麼操作，所以並沒有做多餘的功能。

程式如下：

function xmlhttp()
{
try{return new ActiveXObject("Msxml2.XMLHTTP");} catch(e){}
try{return new ActiveXObject("Microsoft.XMLHTTP");} catch(e){}
try{return new XMLHttpRequest();} catch(e){}
alert("XMLHttpRequest Object not existed!!");
return null;
}
var debug = 0;
function fwXMLHttpForm (_host) {

// Public Properties

this.xmlhttp = new xmlhttp();
this.result = "";

// Private Methods

this._createBoundary = function () {
var tmp = Math.random();
var thisDate = new Date();
tmp = Math.abs(tmp*thisDate.getTime());
tmp = "--------" + tmp + "--------";
return tmp;
}

this._createField = function (_field, _value) {
var tmp = "--" + this._boundary + this.CRLF;
tmp += "Content-Disposition: form-data; name="" + _field + """ + this.CRLF;
tmp += "Content-Transfer-Encoding: binary" + this.CRLF + this.CRLF;
tmp += _value + this.CRLF
tmp += "--" + this._boundary + "--" + this.CRLF + this.CRLF;
return tmp;
}

var formObj = this;
this.xmlhttp.onreadystatechange = function () {
if (formObj.xmlhttp.readyState == 4) {
if (formObj.xmlhttp.status == 200) {
formObj.result = formObj.xmlhttp.responseText;
}
else {
formObj.errCode = formObj.xmlhttp.status;
formObj.result = formObj.xmlhttp.responseText;
alert("Error in request!! HTTP RESPONSE STATUS: " + formObj.errCode);
}
}
}

// Private Properties

this._boundary = this._createBoundary();
this._host = _host;
this._fields = new Array();
this.CRLF = "rn";

// Public Methods

this.addField = function (_field, _value) {
this._fields.push(new Array(_field, _value));
}

this.removeField = function (_field) {
for (var i=0; i<this._fields.length; i++) {
var tmp = this._fields;
if (tmp[0] == _field) {
this._fields.splice(i,1);
}
}
}

this.emptyField = function () {
this._fields = new Array();
}

this.send = function () {
this.xmlhttp.open("POST", this._host);
var msgBody = "";
for (var i=0; i<this._fields.length; i++){
var tmp = this._fields;
msgBody += this._createField(tmp[0], tmp[1]);
}
this.xmlhttp.setRequestHeader("Content-Type","multipart/form-data; boundary="+this._boundary);
this.xmlhttp.setRequestHeader("Connection","Keep-Alive");
this.xmlhttp.setRequestHeader("Content-Length",msgBody.length);
this.xmlhttp.send(msgBody);
}
}




使用方法：

* var form1=new fwXMLHttpForm("backend.php");
* form1.addField("field_name","field_value");
* form1.send();
* 檢查form1.xmlhttp.readyState，看看資料是否接收完畢
* 從form1.result取得結果，顯示在畫面上
* 檢查form1.xmlhttp.readyState，最好用setTimeout或是setInterval的方式做，用while迴圈會有問題。
* 這裡是一個簡單的測試程式。

Javascript學習日誌 :: 迴響 (2) :: 靜態連結網址 :: 引用 (0)
Comment Icon 用 while 檢查 readyState 會成為同步模式 [回覆]

遊手好閒的石頭成 | 06/07/2006, 11:11

用 while 檢查 readyState 是同步模式的做法，整個程式會陷在 while 迴圈中，直到 readyState 的狀態符合脫離迴圈的條件為止。

在非同步模式下，不是去「檢查 readyState 的狀態」，而是去「等待 readyState 的改變事件」。所以要為 XmlHttpRequest.onreadystatechange 指派處理函數，並在調用 XmlHttpRequest.open() 時，指派第三個參數為 true ，即啟用非同步模式。如此一來，瀏覽器就會另外產生一個 thread 執行 send() ，而在 state 改變時，喚起主控 thread 的處理函數。

瀏覽器用一個簡單的方式，讓我們可以運用 multi-thread 的工作模式。
Comment Icon 感謝 [回覆]

Fillano | 06/07/2006, 12:03

msxml2.xmlhttp的open()，預設是用async，所以不必特別指定。在xmlhttprequest也是這樣。

其實在while迴圈中加入alert來暫停一下就可以等到readyState==4的狀況:)，但是只用while或是do while的話，就會出問題。可能檢查太頻繁，反而影響到xmlhttprequest的操作？

以async=false的狀況來說，mozilla的作法是在send()中用一個while迴圈來等待事件而已，IE就不知道了。