Ajax Hack 之hack 12不刷新浏览器的情况下向服务器提交text或tex

2022-07-15 80酷酷网 80kuku.com

　　ajax|服务器|浏览器|刷新Ajax Hack 之hack 12不刷新浏览器的情况下向服务器提交text或textarea的值

本节主要讲的是：将text或textarea的值平滑地传递给服务器。

当用户输入text或textarea的值以后，Ajax能将这些值自动的发给服务器。程序等待text的onblur

事件，然后使用request对象向服务器发送数据。在常用的情况是，用户点击一个按钮，然后将

整个form作为一个大的数据包向服务器发送。服务器相应也与此类似。例如，在线测试或者

教程能在用户输入完成以后很快显示结果，而不需要用户点击按钮刷新页面得到结果。

形如form的某些元素，如text等失去键盘焦点的时候将激发onblur事件，通常是用户点击tab键

或者点击其他区域。也可以使用onkeypress, onkeydown, 或 onkeyup 等来处理用户和text部件

的交互。

接下来向服务器发送数据的步骤：

1. 用户将焦点移入text。

2. 在text中输入信息。

3. 用户点击tab键或点其他区域。

用户在text里输入一些信息，然后程序自动将信息发给服务器。在这个过程中，最好加入

信息提示，如alert一个对话框，在发送过程中最好能让用户知道程序在运作，如有一个进度条。

下面是页面的html代码：

“http://www.w3.org/TR/2000/REC-xhtml1–20000126/DTD/xhtml1-strict.dtd”>

Get stats from textareas and textfields using Ajax

javascript:void%200>Enter a few words for submitting to our server:

Enter a phrase for submitting to our

server:

用户不必点击任何按钮来发送信息，每个text都能控制自己的行动。

当用户按tab键，或者点了text部件以外的区域时，onblur事件将激发处理程序。下面的代码

将显示事件处理者是如何进行工作的。

本节使用的js源代码在文件hacks_2_1.js中。这个文件中有程序运行所需的所有代码。

代码中包括了发送请求和处理相应值（handleResponse( )函数）的所有代码。在下一节中，

会讲述如何将服务器相应插入到text部件中的相关技术，但这丝毫不影响你理解handleResponse( )

函数，下面是js代码：

var formObj = null;

var formObjTyp = “”;

var request=null;

//input field’s event handlers

var webSiteID = 6;window.onload=function( ){

var txtA = document.getElementById(“tarea”;

if(txtA != null){

txtA.onblur=function( ){if (this.value) { getInfo(this);}}; }

var tfd = document.getElementById("tfield");

if(tfd != null){

tfd.onblur=function( ){if (this.value) { getInfo(this);}}; }

}

//event handler for XMLHttpRequest

function handleResponse( ){

try{

if(request.readyState == 4){

if(request.status == 200){

var resp = request.responseText;

var func = new Function(“return ”+resp);

var objt = func( );

if(formObjTyp == “textarea”{

if(formObj != null){

formObj.value = objt.Form_field_type +

“ character count: ”+objt.Text_length+

“\\nWord count: ”+

objt.Word_count+“\\nServer inf ”+

objt.Server_info;

}

} else if(formObjTyp == “input text”{

if(formObj != null){

formObj.value = objt.Form_field_type +

“ # characters: ”+objt.Text_length+

“ Word count: ”+objt.Word_count; }

}

} else {

//request.status is 503

//if the application isn‘t available;

//500 if the application has a bug

alert(

“A problem occurred with communicating between the ”+

“XMLHttpRequest object and the server program.”;

}

}//end outer if

} catch (err) {

alert(“It does not appear that the server is available ”+

“for this application. Please”+

“ try again very soon. \\nError: ”+err.message);

}

}

/* Initialize a request object that is already constructed */

function initReq(reqType,url,bool){

try{

/* Specify the function that will handle the

HTTP response */

request.onreadystatechange=handleResponse;

request.open(reqType,url,bool);

request.send(null);

} catch (errv) {

alert(

“The application cannot contact the server ”+

“at the moment. ”+

“Please try again in a few seconds.” );

}

}

/* Wrapper function for constructing a request object.

Parameters:

reqType: The HTTP request type, such as GET or POST.

url: The URL of the server program.

asynch: Whether to send the request asynchronously or not. */

function httpRequest(reqType,url,asynch){

//Mozilla-based browsers

if(window.XMLHttpRequest){

request = new XMLHttpRequest( );

} else if (window.ActiveXObject){

request=new ActiveXObject(“Msxml2.XMLHTTP”;

if (! request){

request=new ActiveXObject(“Microsoft.XMLHTTP”;

}

}

//the request could still be null if neither ActiveXObject

//initialization succeeded

if(request){

initReq(reqType,url,asynch);

} else {

alert(“Your browser does not permit the use of all ”+

“of this application‘s features!”;}

}

代码首先声明了两个全局的js变量：formObj和formObjTyp。前者持有input

或textarea对象（其他函数需要访问），后者持有一个string描述form对象的标记

名称，如input或textarea。这个string也是服务器组件需要的变量之一。

如前所述，在浏览器加载页面时，代码就为text部件的onblur事件指定了处理器。

你可以使用js在var webSiteID = 6;window.onload事件处理中来完成这个工作。使用var webSiteID = 6;window.onload，

也可在html中直接指定。

var webSiteID = 6;window.onload=function( ){

var txtA = document.getElementById(“tarea”;

if(txtA != null){

txtA.onblur=function( ){if (this.value) { getInfo(this);}}; }

var tfd = document.getElementById(“tfield”;

if(tfd != null){

tfd.onblur=function( ){if (this.value) { getInfo(this);}}; }

}

现在，这些text是hot的。当用户输入完信息，退出控制以后，信息输入就完成了，

接下来向服务器发送信息；用户不必点击其他按钮。

text-field事件处理器调用getInfo( )函数。函数抽取用户键入的信息，并向服务器发送。

function getInfo(obj){

if (obj == null ) { return; }

formObj=obj;

formObjTyp =obj.tagName;

if(formObjTyp "input" || formObjTyp "INPUT"){

formObjTyp = formObjTyp " "formObj.type;

}

formObjTyp = formObjTyp.toLowerCase( );

var url = “http://www.parkerriver.com/s/webforms?objtype=”+

encodeURIComponent(formObjTyp)+“&val=”+

encodeURIComponent(obj.value);

httpRequest(“GET”,url,true);

}

getInfo( )函数的参数是text或textarea对象。传递进取是为了能够取得该对象的信息。

最后一部分httpRequest("GET",url,true)函数发送用户信息到服务器。

然而，在代码调用函数前，一些事情发生了。服务器组建期待的是一个描述form类型的字符串。

formObjTyp =obj.tagName;

if(formObjTyp "input" || formObjTyp "INPUT"){

formObjTyp = formObjTyp " "formObj.type;

}

formObjTyp = formObjTyp.toLowerCase( );

var url = “http://www.parkerriver.com/s/webforms?objtype=”+

encodeURIComponent(formObjTyp)+“&val=”+ encodeURIComponent(val);

httpRequest(“GET”,url,true);

全局函数encodeURIComponent( )方法用来确认某些特性，如空格等，在他们被包含到URL中

的时候得到编码。否则，程序可能会发送一个错误的URL给服务器，而引发错误。

接下来：

在提交数据以后，会发生什么呢？这要取决于你的程序。下一节将讲述另一个话题：是用js和

ajax将服务器相应值插入到一个存在的text部件中。