ThreeJS中使用AJAX实现多用户交互

1  调试环境是Win7   IIS    后台采用VS2008,  C#

  后台采用无界面程序，直接在page_load里面处理数据，收取到的数据简单加1操作

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        int age =Convert.ToInt32(Request["age"]);
        age++;
        Response.Write(age.ToString());     
    }
}

2   前端采用ThreeJS，使用JavaScript进行操作

var xhr=new XMLHttpRequest();//ajax数据存取
 var wxpAge=1;

//在键盘函数里发出数据请求
 //键盘函数    
        function WxpKeyPressed(e) {
            var key = event.keyCode;
                       
            switch (key) {

                case 37: /*左方向键*/
                    GuiControls.camerPositionX += 0.1;
                    break;

                case 39: /*右方向键*/
                    GuiControls.camerPositionX -= 0.1;
                    break;

                case 38: /*向上键*/
                    GuiControls.camerPositionY -= 0.1;
                    break;

                case 40: /*向下键*/
                    GuiControls.camerPositionY += 0.1;
                    break;
                
            }
            //get 方法不需要参数
            //xhr.send(null); 

            // post 需要传递参数
            //初始化AJAX  
            xhr.onreadystatechange=WxpCallBack;
            xhr.open("post","default.aspx",true);          
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")

            var str=new String("name=jay&age=");
            str=str+wxpAge.toString();
            //alert(str);
            xhr.send(str);        
        }

3   回调函数解析服务器端发来的字符串，以后可以使用JSON

//主要是解析接收到的字符 
        function WxpCallBack()
        {

            if(xhr.readyState==4)
              if(xhr.status==200)
              {
                var res=xhr.responseText;
                wxpAge=parseInt(res);
                document.getElementById("notice").innerHTML = "请先选中物体" + res.toString();
                
              }
        }

4   IIS里面需要注意web.config的设置

 
    <!-- 
        在 Internet 信息服务 7.0 下运行 ASP.NET AJAX 需要 system.webServer
        节。对早期版本的 IIS 来说则不需要此节。
    -->
    <system.webServer>
      <validation validateIntegratedModeConfiguration="false"/>
      <modules>
        <remove name="ScriptModule" />
        <add name="ScriptModule" preCondition="managedHandler" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
      </modules>
      <handlers>
        <remove name="WebServiceHandlerFactory-Integrated"/>
        <remove name="ScriptHandlerFactory" />
        <remove name="ScriptHandlerFactoryAppServices" />
        <remove name="ScriptResource" />
        <add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode"
             type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
        <add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode"
             type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
        <add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
      </handlers>
      <httpProtocol>
        <customHeaders>
          <!-- CORS temporary solution -->
          <add name="Access-Control-Allow-Origin" value="*" />
          <add name="--allow-file-access-from-files" value="*" />
          <add name="Access-Control-Allow-Headers" value="Content-Type, Authorization, Accept, X-Requested-With" />
          <add name="Access-Control-Allow-Methods" value="OPTIONS, TRACE, GET, HEAD, POST, PUT" />
        </customHeaders>
      </httpProtocol>
      <staticContent>
        <mimeMap fileExtension=".obj" mimeType="text/html" />
      </staticContent>
    </system.webServer>

5  最后来一张简单验证效果，从服务器端的代码也能看出，申请一次就加1。

后面可以用来解决多用户互动效果的实现。