Flex4: Use httpservice and ASP. NET to transmit JSON data (logon as an example)

Development Environment: Flash builder4, vs2005

1. First open flashbuilde4 and create a flex project named httpservice_net_json.

(Figure 1)

 

Next, applyProgramType select Web, application server type select ASP. NET (2)

(Figure 2)

Next, configure the ASP. NET Server. We choose to use IIS. In the root directory of the Web application program, select the folder of a website under your IIS, and set the web application URL to your local address. Make sure that your current IIS has this website. Then, click "Verify Configuration" and prompt "the Web application root directory and URL are valid" (3 ). OK. Indicates that the server is connected.

(Figure 3)

Next, select the framework connection as "RunTime shared library (RSL)" (4), which improves the flash loading speed of the Flex release. Click Finish. The project is created.

(Figure 4)

2. interface design. I will not elaborate on this. Similar to the vs development environment. Flash builder4 has a variety of built-in components. Drag some lable, button, linkbutton, image, and textinput components to the work zone, and fb4 supports CSS. We create a new login.css style sheet to control the style of some components. The final forming interface is shown in Figure 5.

 

3. submit data.

We need to implement a simple logic-logon. When you enter the user name and password, press the "login" button, and return the success sign from the server to jump to the default. aspx page. Otherwise, a message about logon failure is displayed.

We use htttservice to interact with ASP. NET. The server returns data in JSON format, and the flex client performs related operations after parsing.

First, we create an httpservice (placed between delcarations ). Set the ID and the submitted URL. The submission method is Post, The resultformat is text, and the task after the returned result is assigned to loginhandle (event ).

The simple attribute of resutl is to notify the client of what to do after the result is returned. We allocate a loginhandle (event) for processing. If it is successful, a prompt is displayed.

MX: resquest is used to set the data to be submitted. Flex transmits the paired object. Therefore, we must set the key and key value. Here we only need to submit username and password. Note that the <username> and <password> sections are case sensitive and must correspond to the key in the request in the Aspx. CS file. For example, if username is used, request ['username'] is in the CS file.

Code

< FX: Declarations >
<! -- Place non-visual elements (such as service and Value Object) here -->
< MX: httpservice ID = "Loginservice" URL = "/Ajax/login. aspx" Method = "Post" Resultformat = "Text" Result = "Loginhandle (event )" >
< MX: Request Xmlns = "" >  
< Username > {Username. Text} </ Username >  
< Password > {Password. Text} </ Password >  
</ MX: Request >
</ MX: httpservice >
</ FX: Declarations >

 

All right, everything is ready. Click the loginbutton to submit the job. Switch to the "design" view, click + next to the click attribute

The development environment will automatically generate a btnlogin_clickhandler (event) method () for us (). Is it similar to Visual Studio? Too convenient

Switch to"Source codeView to see what has changed.

The button has the click attribute.

< S: button X = "220" Label = "Login" Height = "60" Y = "90" Alpha = "1.0" ID = "Btnlogin" Fontfamily = "Arial" Stylename = "Button" Click = "Btnlogin_clickhandler (event )" />

 

FX: A function btnlogin_clcikhandler is added between scripts.

< FX: script >
<! [CDATA [
Protected Function btnlogin_clickhandler ( Event : Mouseevent ): Void
{
}
] >
</ FX: script

 

OK. Complete this method. Add simple data verification, and then submit the HTTP service.

Code

Protected Function btnlogin_clickhandler ( Event : Mouseevent ): Void
{
// Submit Logon Request
If (Username. Text = ""   | Password. Text = "" ){
Alert. Show ( " Enter the user name or password " , " Prompt " ); Return ;
}
Loginservice. Send ();
}

 

 

4. process the returned data. First, the Ajax/login. aspx. CSCodeAs follows. In this case, we can simply determine whether username is 123 and password is 456 without connecting to the database. Login successful if matching

The returned result is in a strict JSON format such as {"success": "0", "MSG": "username error"}, that is, the attribute and value must both have double quotation marks. Why should we emphasize the strict JSON format, because it is found that the flex JSON library fails to parse non-strict JSON format. For example, {"success": 0, "MSG": "username error"}, {success: 0, "MSG": "username error "}. But friends who have used extjs know that. This format can be parsed by extjs. The JSON library I use is

Http://as3corelib.googlecode.com/files/as3corelib-.93.zip, in as3corelib.swc (download and put the sdks \ 4.0.0 \ frameworks \ libs under the FB installation directory ). I don't know whether it is a version issue or something. Please kindly advise.

Code

Protected   Void Page_load ( Object Sender, eventargs E)
{
Response. Clear ();
String Name = Request. Form [ " Username " ]. Tostring ();
String PWD = Request. Form [ " Password " ]. Tostring ();
If (Name ! = " 123 " )
{
Response. Write ( " {\ " Success \ " :\ " 0 \ " ,\ " MSG \ " :\ " Username error \ " } " );

}
Else
{
If (Name = " 123 "   && PWD = " 456 " )
{
Response. Write ( " {\ " Success \ " :\ " 1 \ " ,\ " MSG \ " :\ " OK \ " } " );
}
Else
{
Response. Write ( " {\ " Success \ " :\ " 0 \ " ,\ " MSG \ " :\ " Incorrect password \ " } " );
}
}
Response. End ();
}

 

Okay. The JSON format text on the server is organized. How can I deal with the flex client?

First, convert the returned result event. Result to string. Then, it is encoded in JSON format. Final judgment of success attributes

Code

Protected Function loginhandle ( Event : Resultevent ): Void {
VaR rawdata: String = String ( Event . Result );
VaR OBJ: Object = JSON. Decode (rawdata, False );
If (Obj. Success = "1 " ){
NavigatetoURL ( New URLRequest ( " /Default. aspx " ), " _ Self " );
}
Else {
Alert. Show (obj. MSG, " Prompt " );
}
}

 

OK. Everything is ready. Finally, we export the release version of flex to call the generated SWF file in the HTML or aspx file. Attach the entire project and aspx file.

/Files/showker/httpwebservice_net_jsonpack.rar

Login. aspx. Load SWF on the login page.

Ajax/login. aspx. Processing logic returns a JSON string

Httpservice_net_json. The flex release version. login. aspx is the SWF file in the call.

Httpservice_net_json_project. Flex project. You can import and edit files in Flash builder4.

 

This article from: http://www.cnblogs.com/showker/archive/2010/07/24/1784221.html