2-6

今天Leo童鞋帮我把代码发布到了测试环境。然后Test Buddy帮我verify之后终于check in了。到现在都不知道为啥我不能deploy……现在正在焦急的等待check-in result。谢谢大家的帮忙哇。

今天回头沿着《head first ajax》这本书搞了一下Ajax，觉得略坑。把自己踩过的坑写一下吧。这个Target是点击一个小图片，在一个DIV里面加载大图，同时更新文字信息。

首先我按照下载了基础代码（CSS、HTML）然后自己按照书上的流程写了JS，然后发现图片可以加载，但是文字怎么都不能加载。我就打开了Chrome的调试工具，发现我的JS里面好多bug，就开始一点点的改。然后发现貌似我压根没有服务器的代码……然后看了一眼书上提供的是个.php得。我顿时觉得囧了。实在不想配置php的环境，于是我在邓博文的指导下，参照着这篇博客写了一个web service。其实就是监听一个端口，然后根据端口的内容给出不同的结果，代码如下：

namespace HttpServer
{
    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using System.Net;
    using System.Text;
    using System.Threading.Tasks;

    class Program
    {
        HttpListener httpListener = new HttpListener();

        static void Main(string[] args)
        {
            Program program = new Program();

            program.Start();
        }

        public void Start()
        {
            this.httpListener.Prefixes.Add("http://*:1234/");
            this.httpListener.Start();

            Console.WriteLine("Listening, hit enter to stop");

            this.httpListener.BeginGetContext(new AsyncCallback(GetContextCallback),null);
            Console.ReadLine();

            this.httpListener.Stop();
        }

        public void GetContextCallback(IAsyncResult result)
        {
            HttpListenerContext context = this.httpListener.EndGetContext(result);
            HttpListenerRequest request = context.Request;
            HttpListenerResponse response = context.Response;

            StringBuilder stringBuilder = new StringBuilder();

            foreach (string key in request.QueryString.Keys)
            {
                stringBuilder.Append(this.GetDescriptionByName(request.QueryString[key]));
            }

            byte[] buffer = Encoding.UTF8.GetBytes(stringBuilder.ToString());

            response.ContentLength64 = buffer.Length;

            using (Stream outputStream = response.OutputStream)
            {
                outputStream.Write(buffer, 0, buffer.Length);
            }

            this.httpListener.BeginGetContext(new AsyncCallback(GetContextCallback), null);
        }

        private string GetDescriptionByName(string name)
        {
            string description = string.Empty;

            switch (name)
            {
                case "itemGuitar" : 
                    description = "<p>Pete Townshend once played this guitar while his own axe was in the shop having bits of drumkit removed from it.</p>";
                    break;
                case "itemShades" :    
                    description = "<p>Yoko Ono's sunglasses. While perhaps not valued much by Beatles fans, this pair is rumored to have been licked by John Lennon.</p>";
                    break;
                case "itemCowbell" :
                    description = "<p>Remember the famous \"more cowbell\" skit from Saturday Night Live? Well, this is the actual cowbell.</p>";
                    break;
                case "itemHat" :
                    description = "<p>Michael Jackson's hat, as worn in the \"Billie Jean\" video. Not really rock memorabilia, but it smells better than Slash's tophat.</p>";
                    break;
                default :
                    description = "We dont have this item";
                    break;
            }

            return description;
        }
    }
}

然后在Chrome里面调试的时候，发现报错了：

XMLHttpRequest cannot load http://127.0.0.1:1234/itemName?itemCowbell. Origin http://127.0.0.1 is not allowed by Access-Control-Allow-Origin. 

这个是常见的跨域访问错误，有兴趣的同学可以看看：http://stackoverflow.com/questions/10143093/origin-is-not-allowed-by-access-control-allow-origin。然后我在Han童鞋的指导下，把网站deploy到了IIS上，然后设置了XMLHttpRequest的表单头。然后发现在IE10下，这个东西可以跑了。但是Chrome之下仍然有限制。

但是发现仍然不会加载文字信息，于是我继续，调试，发现了一个蛋疼的问题，就是在设置innerHTML的时候，HTML大小写敏感……最后附上我的JS的代码:

window.onload = initPage;

function initPage()
{
    //find the thumbnails on the page
    thumbs = document.getElementById("thumbnailPane").getElementsByTagName("img");
    
    //set the handler for each image
    for (var i = 0; i < thumbs.length; i++)
    {
        image = thumbs[i];
        
        //carete the onclick function
        image.onclick = function()
        {
            //find the full-size image name            
            detailURL = 'images/'+ this.title + '-detail.jpg';
            document.getElementById("itemDetail").src = detailURL;
            getDetails(this.title);
        }
    }
}

function createRequest()
{
    if (typeof XMLHttpRequest != "undefined")
    {
        return new XMLHttpRequest();
    }
    else
    {
        alert("error");
    }
}

function getDetails(itemName)
{
    request = createRequest();
    
    if (request === null)
    {
        alert("Unalbe to create request");
        return;
    }
        
    var url = "http://127.0.0.1:1234/itemName?" + escape(itemName);
    
    request.open("GET", url, true);
    
    request.setRequestHeader("Access-Control-Allow-Origin","*");
    
    request.onreadystatechange = displayDetails;
    request.send(null);
}

function displayDetails()
{
    if (request.readyState === 4)
    {
        if (request.status === 200)
        {
            detailDiv = document.getElementById("description");
            detailDiv.innerHTML = request.responseText;
        }
    }
    
    
}

但是这个仍然不是问题的完美解决方案，完美方案估计今天来不及弄了。明天接着弄吧。理想中的情况是把服务端的代码和网站Deploy到一块，彻底避免跨域问题。当然还有一些其他的方法，比如使用JSONP之类的，回头看一下吧。

Good good study, day day up