Best ajax questions in September 2010

How does Google Instant work?

70 votes

Any ideas on exactly how the new google instant search works? It seems to just be AJAX calls to the old search, but it's pretty hard to simplify Google that much. Anybody have speculations?

EDIT: I know there is AJAX sent with each keypress, but is it predictive? Or do you think it's just a regular ol' google search?

UPDATE: Google have just published a blog article called Google Instant, behind the scenes. It's an interesting read, and obviously related to this question. You can read how they tackled the extra load (5-7X according to the article) on the server-side, for example. The answer below examines what happens on the client-side:


Examining with Firebug, Google is doing an Ajax GET request on every keypress:

Google Instant Search

I guess it's working the same way as the auto completion. However this time, it also returns the search results of the partially complete search phrase in JSON format.

Examining one of the JSON responses while typing "Stack Overflow":

Google Instant Search Ponies

We can see that the JSON response contains the content to construct the search results as we type.

The formatted JSON responses look something like this:

{
    e: "j9iHTLXlLNmXOJLQ3cMO",
    c: 1,
    u: "http://www.google.com/search?hl\x3den\x26expIds\x3d17259,24472,24923,25260,25901,25907,26095,26446,26530\x26sugexp\x3dldymls\x26xhr\x3dt\x26q\x3dStack%20Overflow\x26cp\x3d6\x26pf\x3dp\x26sclient\x3dpsy\x26aq\x3df\x26aqi\x3dg4g-o1\x26aql\x3d\x26oq\x3dStack+\x26gs_rfai\x3d\x26pbx\x3d1\x26fp\x3df97fdf10596ae095\x26tch\x3d1\x26ech\x3d1\x26psi\x3dj9iHTO3xBo2CONvDzaEO12839712156911",
    d: "\x3clink rel\x3dprefetch href\x3d\x22http://stackoverflow.com/\x22\x3e\x3cscript\x3eje.pa(_loc, \x27rso\x27, \x27\\x3c!--m--\\x3e\\x3clink rel\\x3dprefetch href\\x3d\\x22http://stackoverflow.com/\\x22\\x3e\\x3cli class\\x3dg\\x3e\\x3ch3 class\\x3d\\x22r\\x22\\x3e\\x3ca href\\x3d\\x22http://stackoverflow.com/\\x22 class\\x3dl onmousedown\\x3d\\x22return rwt(this,\\x27\\x27,\\x27\\x27,\\x27\\x27,\\x271\\x27,\\x27AFQjCNERidL9Hb6OvGW93_Y6MRj3aTdMVA\\x27,\\x27\\x27,\\x270CBYQFjAA\\x27)\\x22\\x3e\\x3cem\\x3eStack Overflow\\x3c/em\\x3e\\x3c/a\\x3e\\x3c/h3\\x3e\\x3cdiv class\\x3d\\x22s\\x22\\x3eA language-independent collaboratively edited question and answer site for programmers.\\x3cbr\\x3e\\x3cspan class\\x3df\\x3e\\x3ccite\\x3e\\x3cb\\x3estackoverflow\\x3c/b\\x3e.com/\\x3c/cite\\x3e - \\x3cspan class\\x3dgl\\x3e\\x3ca href\\x3d\\x22http://webcache.googleusercontent.com/search?q\\x3dcache:U1GC2GYOToIJ:stackoverflow.com/+Stack+Overflow\\x26amp;cd\\x3d1\\x26amp;hl\\x3den\\x26amp;ct\\x3dclnk\\x22 onmousedown\\x3d\\x22return rwt(this,\\x27\\x27,\\x27\\x27,\\x27\\x27,\\x271\\x27,\\x27AFQjCNFfKMag7Tq8CMbbfu8Gcj_GjukTbA\\x27,\\x27\\x27,\\x270CBgQIDAA\\x27)\\x22\\x3eCached\\x3c/a\\x3e - \\x3ca href\\x3d\\x22/search?hl\\x3den\\x26amp;q\\x3drelated:stackoverflow.com/+Stack+Overflow\\x26amp;tbo\\x3d1\\x26amp;sa\\x3dX\\x26amp;ei\\x3dj9iHTLXlLNmXOJLQ3cMO\\x26amp;sqi\\x3d2\\x26amp;ved\\x3d0CBkQHzAA\\x22\\x3eSimilar\\x3c/a\\x3e\\x3c/span\\x3e\\x3c/span\\x3e\\x3cbr\\x3e\\x3ctable class\\x3dslk style\\x3d\\x22border-collapse:collapse;margin-top:4px\\x22\\x3e\\x3ctr\\x3e\\x3ctd style\\x3d\\x22padding-left:14px;vertical-align:top\\x22\\x3e\\x3cdiv class\\x3dsld\\x3e\\x3ca class\\x3dsla href\\x3d\\x22http://stackoverflow.com/questions\\x22 onmousedown\\x3d\\x22return rwt(this,\\x27\\x27,\\x27\\x27,\\x27\\x27,\\x271\\x27,\\x27AFQjCNHmP78gEctJKvBrydP2c52F_FEjvA\\x27,\\x27\\x27,\\x270CBoQqwMoADAA\\x27)\\x22\\x3eQuestions\\x3c/a\\x3e\\x3c/div\\x3e\\x3cdiv class\\x3dsld\\x3e\\x3ca class\\x3dsla href\\x3d\\x22http://stackoverflow.com/questions/ask\\x22 onmousedown\\x3d\\x22return rwt(this,\\x27\\x27,\\x27\\x27,\\x27\\x27,\\x271\\x27,\\x27AFQjCNGZF-qwWVTZOWPlr4vgSA7qB64LLQ\\x27,\\x27\\x27,\\x270CBsQqwMoATAA\\x27)\\x22\\x3eAsk Question\\x3c/a\\x3e\\x3c/div\\x3e\\x3cdiv class\\x3dsld\\x3e\\x3ca class\\x3dsla href\\x3d\\x22http://stackoverflow.com/users/135152/omg-ponies\\x22 onmousedown\\x3d\\x22return rwt(this,\\x27\\x27,\\x27\\x27,\\x27\\x27,\\x271\\x27,\\x27AFQjCNE9zo6Qi_AM1bjmPGeMGfbnPi3niA\\x27,\\x27\\x27,\\x270CBwQqwMoAjAA\\x27)\\x22\\x3eOMG Ponies\\x3c/a\\x3e\\x3c/div\\x3e\\x3cdiv class\\x3dsld\\x3e\\x3ca class\\x3dsla href\\x3d\\x22http://careers.stackoverflow.com/\\x22 onmousedown\\x3d\\x22return rwt(this,\\x27\\x27,\\x27\\x27,\\x27\\x27,\\x271\\x27,\\x27AFQjCNEaqlBrfDcc1gdPZ6dgthff0s5WmA\\x27,\\x27\\x27,\\x270CB0QqwMoAzAA\\x27)\\x22\\x3eCareers\\x3c/a\\x3e\\x3c/div\\x3e\\x3ctd style\\x3d\\x22padding-left:14px;vertical-align:top\\x22\\x3e\\x3cdiv class\\x3dsld\\x3e\\x3ca class\\x3dsla href\\x3d\\x22http://stackoverflow.com/about\\x22 onmousedown\\x3d\\x22return rwt(this,\\x27\\x27,\\x27\\x27,\\x27\\x27,\\x271\\x27,\\x27AFQjCNEqgPttrXj3r4o3TZHX5WaWvFe1HQ\\x27,\\x27\\x27,\\x270CB4QqwMoBDAA\\x27)\\x22\\x3eAbout\\x3c/a\\x3e\\x3c/div\\x3e\\x3cdiv class\\x3dsld\\x3e\\x3ca class\\x3dsla href\\x3d\\x22http://stackoverflow.com/faq\\x22 onmousedown\\x3d\\x22return rwt(this,\\x27\\x27,\\x27\\x27,\\x27\\x27,\\x271\\x27,\\x27AFQjCNF3X3eRc0RsxYynXZhhbyYkuKWZ5g\\x27,\\x27\\x27,\\x270CB8QqwMoBTAA\\x27)\\x22\\x3eThe FAQ\\x3c/a\\x3e\\x3c/div\\x3e\\x3cdiv class\\x3dsld\\x3e\\x3ca class\\x3dsla href\\x3d\\x22http://blog.stackoverflow.com/\\x22 onmousedown\\x3d\\x22return rwt(this,\\x27\\x27,\\x27\\x27,\\x27\\x27,\\x271\\x27,\\x27AFQjCNG7KphjK6RuC5cj-6U5jeuvipt5dg\\x27,\\x27\\x27,\\x270CCAQqwMoBjAA\\x27)\\x22\\x3eBlog\\x3c/a\\x3e\\x3c/div\\x3e\\x3cdiv class\\x3dsld\\x3e\\x3ca class\\x3dsla href\\x3d\\x22http://stackoverflow.com/users\\x22 onmousedown\\x3d\\x22return rwt(this,\\x27\\x27,\\x27\\x27,\\x27\\x27,\\x271\\x27,\\x27AFQjCNFfN_wcGm4HE5XpDxvcH4bIrkv2dw\\x27,\\x27\\x27,\\x270CCEQqwMoBzAA\\x27)\\x22\\x3eUsers\\x3c/a\\x3e\\x3c/div\\x3e\\x3ctr\\x3e\\x3ctd colspan\\x3d2 style\\x3d\\x22padding-left:14px;vertical-align:top\\x22\\x3e\\x3cdiv style\\x3d\\x22padding-top:6px\\x22\\x3e\\x3ca class\\x3dfl href\\x3d\\x22/search?hl\\x3den\\x26amp;q\\x3d+site:stackoverflow.com+Stack+Overflow\\x26amp;sa\\x3dX\\x26amp;ei\\x3dj9iHTLXlLNmXOJLQ3cMO\\x26amp;sqi\\x3d2\\x26amp;ved\\x3d0CCIQrAM\\x22\\x3eMore results from stackoverflow.com\\x26nbsp;\\x26raquo;\\x3c/a\\x3e\\x3c/div\\x3e\\x3c/table\\x3e\\x3c/div\\x3e\\x3c!--n--\\x3e\\x3c!--m--\\x3e\\x3cli class\\x3dg\\x3e\\x3ch3 class\\x3d\\x22r\\x22\\x3e\\x3ca href\\x3d\\x22http://stackoverflow.com/questions\\x22 class\\x3dl onmousedown\\x3d\\x22return rwt(this,\\x27\\x27,\\x27\\x27,\\x27\\x27,\\x272\\x27,\\x27AFQjCNHmP78gEctJKvBrydP2c52F_FEjvA\\x27,\\x27\\x27,\\x270CCUQFjAB\\x27)\\x22\\x3eHottest Questions - \\x3cem\\x3eStack Overflow\\x3c/em\\x3e\\x3c/a\\x3e\\x3c/h3\\x3e\\x3cdiv class\\x3d\\x22s\\x22\\x3eHello \\x3cem\\x3eStack Overflow\\x3c/em\\x3e! I\\x26#39;m working with someone else\\x26#39;s PHP function that works fine as long as I pass it at least three arguments. If I pass it two argument, \\x3cb\\x3e...\\x3c/b\\x3e\\x3cbr\\x3e\\x3cspan class\\x3df\\x3e\\x3ccite\\x3e\\x3cb\\x3estackoverflow\\x3c/b\\x3e.com/questions\\x3c/cite\\x3e - \\x3cspan class\\x3dgl\\x3e\\x3ca href\\x3d\\x22http://webcache.googleusercontent.com/search?q\\x3dcache:6S_0sErDKfQJ:stackoverflow.com/questions+Stack+Overflow\\x26amp;cd\\x3d2\\x26amp;hl\\x3den\\x26amp;ct\\x3dclnk\\x22 onmousedown\\x3d\\x22return rwt(this,\\x27\\x27,\\x27\\x27,\\x27\\x27,\\x272\\x27,\\x27AFQjCNH7WHzefYlnS05ln4j6rzfE3byDKg\\x27,\\x27\\x27,\\x270CCcQIDAB\\x27)\\x22\\x3eCached\\x3c/a\\x3e - \\x3ca href\\x3d\\x22/search?hl\\x3den\\x26amp;q\\x3drelated:stackoverflow.com/questions+Stack+Overflow\\x26amp;tbo\\x3d1\\x26amp;sa\\x3dX\\x26amp;ei\\x3dj9iHTLXlLNmXOJLQ3cMO\\x26amp;sqi\\x3d2\\x26amp;ved\\x3d0CCgQHzAB\\x22\\x3eSimilar\\x3c/a\\x3e\\x3c/span\\x3e\\x3c/span\\x3e\\x3c/div\\x3e\\x3c!--n--\\x3e\\x3c!--m--\\x3e\\x3cli class\\x3dg\\x3e\\x3ch3 class\\x3d\\x22r\\x22\\x3e\\x3ca href\\x3d\\x22http://en.wikipedia.org/wiki/Stack_overflow\\x22 class\\x3dl onmousedown\\x3d\\x22return rwt(this,\\x27\\x27,\\x27\\x27,\\x27\\x27,\\x273\\x27,\\x27AFQjCNEAxaeWmWtD7cBcmZ5QBMsTRNbnCw\\x27,\\x27\\x27,\\x270CCkQFjAC\\x27)\\x22\\x3e\\x3cem\\x3eStack overflow\\x3c/em\\x3e - Wikipedia, the free encyclopedia\\x3c/a\\x3e\\x3c/h3\\x3e\\x3cdiv class\\x3d\\x22s\\x22\\x3eIn software, a \\x3cem\\x3estack overflow\\x3c/em\\x3e occurs when too much memory is used on the call stack. The call stack contains a limited amount of memory,  often determined at \\x3cb\\x3e...\\x3c/b\\x3e\\x3cbr\\x3e\\x3cspan class\\x3df\\x3e\\x3ccite\\x3een.wikipedia.org/wiki/\\x3cb\\x3eStack\\x3c/b\\x3e_\\x3cb\\x3eoverflow\\x3c/b\\x3e\\x3c/cite\\x3e - \\x3cspan class\\x3dgl\\x3e\\x3ca href\\x3d\\x22http://webcache.googleusercontent.com/search?q\\x3dcache:mWu8b0BQAmwJ:en.wikipedia.org/wiki/Stack_overflow+Stack+Overflow\\x26amp;cd\\x3d3\\x26amp;hl\\x3den\\x26amp;ct\\x3dclnk\\x22 onmousedown\\x3d\\x22return rwt(this,\\x27\\x27,\\x27\\x27,\\x27\\x27,\\x273\\x27,\\x27AFQjCNFG_5ndK-KmWJy6s3pOsi8lsxqEZg\\x27,\\x27\\x27,\\x270CCsQIDAC\\x27)\\x22\\x3eCached\\x3c/a\\x3e - \\x3ca href\\x3d\\x22/search?hl\\x3den\\x26amp;q\\x3drelated:en.wikipedia.org/wiki/Stack_overflow+Stack+Overflow\\x26amp;tbo\\x3d1\\x26amp;sa\\x3dX\\x26amp;ei\\x3dj9iHTLXlLNmXOJLQ3cMO\\x26amp;sqi\\x3d2\\x26amp;ved\\x3d0CCwQHzAC\\x22\\x3eSimilar\\x3c/a\\x3e\\x3c/span\\x3e\\x3c/span\\x3e\\x3c/div\\x3e\\x3c!--n--\\x3e\\x3c!--m--\\x3e\\x3cli class\\x3dg\\x3e\\x3ch3 class\\x3d\\x22r\\x22\\x3e\\x3ca href\\x3d\\x22http://blog.stackoverflow.com/\\x22 class\\x3dl onmousedown\\x3d\\x22return rwt(this,\\x27\\x27,\\x27\\x27,\\x27\\x27,\\x274\\x27,\\x27AFQjCNG7KphjK6RuC5cj-6U5jeuvipt5dg\\x27,\\x27\\x27,\\x270CC0QFjAD\\x27)\\x22\\x3eBlog – \\x3cem\\x3eStack Overflow\\x3c/em\\x3e\\x3c/a\\x3e\\x3c/h3\\x3e\\x3cdiv class\\x3d\\x22s\\x22\\x3e6 Sep 2010 \\x3cb\\x3e...\\x3c/b\\x3e The latest version of the \\x3cem\\x3eStack Overflow\\x3c/em\\x3e Trilogy Creative Commons Data Dump is now available. This reflects all public  data in … \\x3cb\\x3e...\\x3c/b\\x3e\\x3cbr\\x3e\\x3cspan class\\x3df\\x3e\\x3ccite\\x3eblog.\\x3cb\\x3estackoverflow\\x3c/b\\x3e.com/\\x3c/cite\\x3e - \\x3cspan class\\x3dgl\\x3e\\x3ca href\\x3d\\x22http://webcache.googleusercontent.com/search?q\\x3dcache:iqtvg9Ge1c0J:blog.stackoverflow.com/+Stack+Overflow\\x26amp;cd\\x3d4\\x26amp;hl\\x3den\\x26amp;ct\\x3dclnk\\x22 onmousedown\\x3d\\x22return rwt(this,\\x27\\x27,\\x27\\x27,\\x27\\x27,\\x274\\x27,\\x27AFQjCNFX2P2-RTCs_GaR6NgSw30p007UEA\\x27,\\x27\\x27,\\x270CC8QIDAD\\x27)\\x22\\x3eCached\\x3c/a\\x3e - \\x3ca href\\x3d\\x22/search?hl\\x3den\\x26amp;q\\x3drelated:blog.stackoverflow.com/+Stack+Overflow\\x26amp;tbo\\x3d1\\x26amp;sa\\x3dX\\x26amp;ei\\x3dj9iHTLXlLNmXOJLQ3cMO\\x26amp;sqi\\x3d2\\x26amp;ved\\x3d0CDAQHzAD\\x22\\x3eSimilar\\x3c/a\\x3e\\x3c/span\\x3e\\x3c/span\\x3e\\x3c/div\\x3e\\x3c!--n--\\x3e\x27,_ss);\x3c/script\x3e"
}/*""*/{
    e: "j9iHTLXlLNmXOJLQ3cMO",
    c: 1,
    u: "http://www.google.com/search?hl\x3den\x26expIds\x3d17259,24472,24923,25260,25901,25907,26095,26446,26530\x26sugexp\x3dldymls\x26xhr\x3dt\x26q\x3dStack%20Overflow\x26cp\x3d6\x26pf\x3dp\x26sclient\x3dpsy\x26aq\x3df\x26aqi\x3dg4g-o1\x26aql\x3d\x26oq\x3dStack+\x26gs_rfai\x3d\x26pbx\x3d1\x26fp\x3df97fdf10596ae095\x26tch\x3d1\x26ech\x3d1\x26psi\x3dj9iHTO3xBo2CONvDzaEO12839712156911",
    d: "\x3cscript\x3eje.pa(_loc, \x27rso\x27, \x27\\x3c!--m--\\x3e\\x3cli class\\x3dg style\\x3d\\x22margin-left:16px\\x22\\x3e\\x3ch3 class\\x3d\\x22r hcw\\x22\\x3e\\x3ca href\\x3d\\x22http://blog.stackoverflow.com/category/podcasts/\\x22 class\\x3dl onmousedown\\x3d\\x22return rwt(this,\\x27\\x27,\\x27\\x27,\\x27\\x27,\\x275\\x27,\\x27AFQjCNGnAJSxUa4GLcg-E7PNvIFmPC53gQ\\x27,\\x27\\x27,\\x270CDEQFjAE\\x27)\\x22\\x3epodcasts - Blog – \\x3cem\\x3eStack Overflow\\x3c/em\\x3e\\x3c/a\\x3e\\x3c/h3\\x3e\\x3cdiv class\\x3d\\x22s hc\\x22\\x3eJoel and Jeff sit down with our new community coordinator, Robert Cartaino, to record a “bonus” podcast discussing the future of \\x3cem\\x3eStack Overflow\\x3c/em\\x3e and Stack \\x3cb\\x3e...\\x3c/b\\x3e\\x3cbr\\x3e\\x3cspan class\\x3df\\x3e\\x3ccite\\x3eblog.\\x3cb\\x3estackoverflow\\x3c/b\\x3e.com/category/podcasts/\\x3c/cite\\x3e - \\x3cspan class\\x3dgl\\x3e\\x3ca href\\x3d\\x22http://webcache.googleusercontent.com/search?q\\x3dcache:JT0sWmmtiAEJ:blog.stackoverflow.com/category/podcasts/+Stack+Overflow\\x26amp;cd\\x3d5\\x26amp;hl\\x3den\\x26amp;ct\\x3dclnk\\x22 onmousedown\\x3d\\x22return rwt(this,\\x27\\x27,\\x27\\x27,\\x27\\x27,\\x275\\x27,\\x27AFQjCNErCiLBch55HA8i5BAdChcmQYH8nw\\x27,\\x27\\x27,\\x270CDMQIDAE\\x27)\\x22\\x3eCached\\x3c/a\\x3e - \\x3ca href\\x3d\\x22/search?hl\\x3den\\x26amp;q\\x3drelated:blog.stackoverflow.com/category/podcasts/+Stack+Overflow\\x26amp;tbo\\x3d1\\x26amp;sa\\x3dX\\x26amp;ei\\x3dj9iHTLXlLNmXOJLQ3cMO\\x26amp;sqi\\x3d2\\x26amp;ved\\x3d0CDQQHzAE\\x22\\x3eSimilar\\x3c/a\\x3e\\x3c/span\\x3e\\x3c/span\\x3e\\x3c/div\\x3e\\x3c!--n--\\x3e\\x3c!--m--\\x3e\\x3cli class\\x3dg\\x3e\\x3ch3 class\\x3d\\x22r\\x22\\x3e\\x3ca href\\x3d\\x22http://itc.conversationsnetwork.org/series/stackoverflow.html\\x22 class\\x3dl onmousedown\\x3d\\x22return rwt(this,\\x27\\x27,\\x27\\x27,\\x27\\x27,\\x276\\x27,\\x27AFQjCNHG9l1PMbilYkhohNFuj3g6ce1LuA\\x27,\\x27\\x27,\\x270CDUQFjAF\\x27)\\x22\\x3e\\x3cem\\x3eStackOverflow\\x3c/em\\x3e\\x3c/a\\x3e\\x3c/h3\\x3e\\x3cdiv class\\x3d\\x22s\\x22\\x3eJoel and Jeff sit down with our new community coordinator, Robert Cartaino, to discuss the future of \\x3cem\\x3eStack Overflow\\x3c/em\\x3e and Stack Exchange 2.0. \\x3cb\\x3e...\\x3c/b\\x3e\\x3cbr\\x3e\\x3cspan class\\x3df\\x3e\\x3ccite\\x3eitc.conversationsnetwork.org/series/\\x3cb\\x3estackoverflow\\x3c/b\\x3e.html\\x3c/cite\\x3e - \\x3cspan class\\x3dgl\\x3e\\x3ca href\\x3d\\x22http://webcache.googleusercontent.com/search?q\\x3dcache:8MkFpx7D4wYJ:itc.conversationsnetwork.org/series/stackoverflow.html+Stack+Overflow\\x26amp;cd\\x3d6\\x26amp;hl\\x3den\\x26amp;ct\\x3dclnk\\x22 onmousedown\\x3d\\x22return rwt(this,\\x27\\x27,\\x27\\x27,\\x27\\x27,\\x276\\x27,\\x27AFQjCNFP62Bg_o2kaz3jzXxzsrTs_7RdNA\\x27,\\x27\\x27,\\x270CDcQIDAF\\x27)\\x22\\x3eCached\\x3c/a\\x3e - \\x3ca href\\x3d\\x22/search?hl\\x3den\\x26amp;q\\x3drelated:itc.conversationsnetwork.org/series/stackoverflow.html+Stack+Overflow\\x26amp;tbo\\x3d1\\x26amp;sa\\x3dX\\x26amp;ei\\x3dj9iHTLXlLNmXOJLQ3cMO\\x26amp;sqi\\x3d2\\x26amp;ved\\x3d0CDgQHzAF\\x22\\x3eSimilar\\x3c/a\\x3e\\x3c/span\\x3e\\x3c/span\\x3e\\x3c/div\\x3e\\x3c!--n--\\x3e\\x3c!--m--\\x3e\\x3cli class\\x3dg\\x3e\\x3ch3 class\\x3d\\x22r\\x22\\x3e\\x3ca href\\x3d\\x22http://support.microsoft.com/kb/145799\\x22 class\\x3dl onmousedown\\x3d\\x22return rwt(this,\\x27\\x27,\\x27\\x27,\\x27\\x27,\\x277\\x27,\\x27AFQjCNHzyj5rHEX7IiyFWnP0ziE3B32rGg\\x27,\\x27\\x27,\\x270CDkQFjAG\\x27)\\x22\\x3eHow to Troubleshoot Windows Internal \\x3cem\\x3eStack Overflow\\x3c/em\\x3e Error Messages\\x3c/a\\x3e\\x3c/h3\\x3e\\x3cdiv class\\x3d\\x22s\\x22\\x3eThis article lists steps to help you troubleshoot problems with \\x3cem\\x3estack overflow\\x3c/em\\x3e errors in  Windows. Stacks are reserved memory that programs use to process \\x3cb\\x3e...\\x3c/b\\x3e\\x3cbr\\x3e\\x3cspan class\\x3df\\x3e\\x3ccite\\x3esupport.microsoft.com/kb/145799\\x3c/cite\\x3e - \\x3cspan class\\x3dgl\\x3e\\x3ca href\\x3d\\x22http://webcache.googleusercontent.com/search?q\\x3dcache:ECO9ORCsraAJ:support.microsoft.com/kb/145799+Stack+Overflow\\x26amp;cd\\x3d7\\x26amp;hl\\x3den\\x26amp;ct\\x3dclnk\\x22 onmousedown\\x3d\\x22return rwt(this,\\x27\\x27,\\x27\\x27,\\x27\\x27,\\x277\\x27,\\x27AFQjCNHYsox9EW1Ye9Nn2G6WQzEpJDOzcw\\x27,\\x27\\x27,\\x270CDsQIDAG\\x27)\\x22\\x3eCached\\x3c/a\\x3e - \\x3ca href\\x3d\\x22/search?hl\\x3den\\x26amp;q\\x3drelated:support.microsoft.com/kb/145799+Stack+Overflow\\x26amp;tbo\\x3d1\\x26amp;sa\\x3dX\\x26amp;ei\\x3dj9iHTLXlLNmXOJLQ3cMO\\x26amp;sqi\\x3d2\\x26amp;ved\\x3d0CDwQHzAG\\x22\\x3eSimilar\\x3c/a\\x3e\\x3c/span\\x3e\\x3c/span\\x3e\\x3c/div\\x3e\\x3c!--n--\\x3e\\x3c!--m--\\x3e\\x3cli class\\x3dg\\x3e\\x3ch3 class\\x3d\\x22r\\x22\\x3e\\x3ca href\\x3d\\x22http://stackoverflow.carsonified.com/\\x22 class\\x3dl onmousedown\\x3d\\x22return rwt(this,\\x27\\x27,\\x27\\x27,\\x27\\x27,\\x278\\x27,\\x27AFQjCNHcEPoch5soLj2CpLpRfnW-Z2-aLw\\x27,\\x27\\x27,\\x270CD0QFjAH\\x27)\\x22\\x3e\\x3cem\\x3eStackOverflow\\x3c/em\\x3e DevDays » Home\\x3c/a\\x3e\\x3c/h3\\x3e\\x3cdiv class\\x3d\\x22s\\x22\\x3e\\x3cem\\x3eStackOverflow\\x3c/em\\x3e Dev Days is run by Carsonified, so please give us a shout if you need anything or are interested in sponsoring the event. \\x3cb\\x3e...\\x3c/b\\x3e\\x3cbr\\x3e\\x3cspan class\\x3df\\x3e\\x3ccite\\x3e\\x3cb\\x3estackoverflow\\x3c/b\\x3e.carsonified.com/\\x3c/cite\\x3e - \\x3cspan class\\x3dgl\\x3e\\x3ca href\\x3d\\x22http://webcache.googleusercontent.com/search?q\\x3dcache:uhl8NPgikN0J:stackoverflow.carsonified.com/+Stack+Overflow\\x26amp;cd\\x3d8\\x26amp;hl\\x3den\\x26amp;ct\\x3dclnk\\x22 onmousedown\\x3d\\x22return rwt(this,\\x27\\x27,\\x27\\x27,\\x27\\x27,\\x278\\x27,\\x27AFQjCNFf9Vl5L3FaQGPapUpIFw5gqVUCnA\\x27,\\x27\\x27,\\x270CD8QIDAH\\x27)\\x22\\x3eCached\\x3c/a\\x3e - \\x3ca href\\x3d\\x22/search?hl\\x3den\\x26amp;q\\x3drelated:stackoverflow.carsonified.com/+Stack+Overflow\\x26amp;tbo\\x3d1\\x26amp;sa\\x3dX\\x26amp;ei\\x3dj9iHTLXlLNmXOJLQ3cMO\\x26amp;sqi\\x3d2\\x26amp;ved\\x3d0CEAQHzAH\\x22\\x3eSimilar\\x3c/a\\x3e\\x3c/span\\x3e\\x3c/span\\x3e\\x3c/div\\x3e\\x3c!--n--\\x3e\\x3c!--m--\\x3e\\x3cli class\\x3dg\\x3e\\x3ch3 class\\x3d\\x22r\\x22\\x3e\\x3ca href\\x3d\\x22http://stackoverflow.org/\\x22 class\\x3dl onmousedown\\x3d\\x22return rwt(this,\\x27\\x27,\\x27\\x27,\\x27\\x27,\\x279\\x27,\\x27AFQjCNF-YrPvTLTJlFFDJrJE0cjGdlOpbg\\x27,\\x27\\x27,\\x270CEEQFjAI\\x27)\\x22\\x3e\\x3cem\\x3eStackOverflow\\x3c/em\\x3e.org\\x3c/a\\x3e\\x3c/h3\\x3e\\x3cdiv class\\x3d\\x22s\\x22\\x3e\\x3cem\\x3eStackOverflow\\x3c/em\\x3e.org began as the merging of two ideas that have been kicking around in my head for years. First, I wanted a dorky programming-related domain \\x3cb\\x3e...\\x3c/b\\x3e\\x3cbr\\x3e\\x3cspan class\\x3df\\x3e\\x3ccite\\x3e\\x3cb\\x3estackoverflow\\x3c/b\\x3e.org/\\x3c/cite\\x3e - \\x3cspan class\\x3dgl\\x3e\\x3ca href\\x3d\\x22http://webcache.googleusercontent.com/search?q\\x3dcache:u0dIlJW-XMYJ:stackoverflow.org/+Stack+Overflow\\x26amp;cd\\x3d9\\x26amp;hl\\x3den\\x26amp;ct\\x3dclnk\\x22 onmousedown\\x3d\\x22return rwt(this,\\x27\\x27,\\x27\\x27,\\x27\\x27,\\x279\\x27,\\x27AFQjCNHcJcV2QVybr6voztyPwHCrNOOD1w\\x27,\\x27\\x27,\\x270CEMQIDAI\\x27)\\x22\\x3eCached\\x3c/a\\x3e - \\x3ca href\\x3d\\x22/search?hl\\x3den\\x26amp;q\\x3drelated:stackoverflow.org/+Stack+Overflow\\x26amp;tbo\\x3d1\\x26amp;sa\\x3dX\\x26amp;ei\\x3dj9iHTLXlLNmXOJLQ3cMO\\x26amp;sqi\\x3d2\\x26amp;ved\\x3d0CEQQHzAI\\x22\\x3eSimilar\\x3c/a\\x3e\\x3c/span\\x3e\\x3c/span\\x3e\\x3c/div\\x3e\\x3c!--n--\\x3e\\x3c!--m--\\x3e\\x3cli class\\x3dg\\x3e\\x3ch3 class\\x3d\\x22r\\x22\\x3e\\x3ca href\\x3d\\x22http://embeddedgurus.com/stack-overflow/\\x22 class\\x3dl onmousedown\\x3d\\x22return rwt(this,\\x27\\x27,\\x27\\x27,\\x27\\x27,\\x2710\\x27,\\x27AFQjCNFYQ5E8irNUCpRsbOHHyfc0oqGpWw\\x27,\\x27\\x27,\\x270CEUQFjAJ\\x27)\\x22\\x3e\\x3cem\\x3eStack Overflow\\x3c/em\\x3e\\x3c/a\\x3e\\x3c/h3\\x3e\\x3cdiv class\\x3d\\x22s\\x22\\x3e\\x3cem\\x3eStack Overflow\\x3c/em\\x3e. Nigel Jones. Nigel Jones has over 20 years of experience designing electronic circuits and firmware. (full bio). Pages. Contact Nigel. Links \\x3cb\\x3e...\\x3c/b\\x3e\\x3cbr\\x3e\\x3cspan class\\x3df\\x3e\\x3ccite\\x3eembeddedgurus.com/\\x3cb\\x3estack\\x3c/b\\x3e-\\x3cb\\x3eoverflow\\x3c/b\\x3e/\\x3c/cite\\x3e - \\x3cspan class\\x3dgl\\x3e\\x3ca href\\x3d\\x22http://webcache.googleusercontent.com/search?q\\x3dcache:Rl_rUfEG_fIJ:embeddedgurus.com/stack-overflow/+Stack+Overflow\\x26amp;cd\\x3d10\\x26amp;hl\\x3den\\x26amp;ct\\x3dclnk\\x22 onmousedown\\x3d\\x22return rwt(this,\\x27\\x27,\\x27\\x27,\\x27\\x27,\\x2710\\x27,\\x27AFQjCNFqMjsc1pBI9JexjMSPY7wm5QLI8w\\x27,\\x27\\x27,\\x270CEcQIDAJ\\x27)\\x22\\x3eCached\\x3c/a\\x3e\\x3c/span\\x3e\\x3c/span\\x3e\\x3c/div\\x3e\\x3c!--n--\\x3e\x27,_ss);\x3c/script\x3e"
}/*""*/{
    e: "j9iHTLXlLNmXOJLQ3cMO",
    c: 1,
    u: "http://www.google.com/search?hl\x3den\x26expIds\x3d17259,24472,24923,25260,25901,25907,26095,26446,26530\x26sugexp\x3dldymls\x26xhr\x3dt\x26q\x3dStack%20Overflow\x26cp\x3d6\x26pf\x3dp\x26sclient\x3dpsy\x26aq\x3df\x26aqi\x3dg4g-o1\x26aql\x3d\x26oq\x3dStack+\x26gs_rfai\x3d\x26pbx\x3d1\x26fp\x3df97fdf10596ae095\x26tch\x3d1\x26ech\x3d1\x26psi\x3dj9iHTO3xBo2CONvDzaEO12839712156911",
    d: "\x3cscript\x3eje.p(_loc,\x27botstuff\x27,\x27 \\x3cdiv id\\x3dbrs style\\x3d\\x22clear:both;margin-bottom:17px;overflow:hidden\\x22\\x3e\\x3cdiv class\\x3d\\x22med\\x22 style\\x3d\\x22text-align:left\\x22\\x3eSearches related to \\x3cem\\x3eStack Overflow\\x3c/em\\x3e\\x3c/div\\x3e\\x3cdiv class\\x3dbrs_col\\x3e\\x3cp\\x3e\\x3ca href\\x3d\\x22/search?hl\\x3den\\x26amp;q\\x3dstack+overflow+error\\x26amp;revid\\x3d-1\\x26amp;sa\\x3dX\\x26amp;ei\\x3dj9iHTLXlLNmXOJLQ3cMO\\x26amp;sqi\\x3d2\\x26amp;ved\\x3d0CEkQ1QIoAA\\x22\\x3estack overflow \\x3cb\\x3eerror\\x3c/b\\x3e\\x3c/a\\x3e\\x3c/p\\x3e\\x3cp\\x3e\\x3ca href\\x3d\\x22/search?hl\\x3den\\x26amp;q\\x3dstack+overflow+internet+explorer\\x26amp;revid\\x3d-1\\x26amp;sa\\x3dX\\x26amp;ei\\x3dj9iHTLXlLNmXOJLQ3cMO\\x26amp;sqi\\x3d2\\x26amp;ved\\x3d0CEoQ1QIoAQ\\x22\\x3estack overflow \\x3cb\\x3einternet explorer\\x3c/b\\x3e\\x3c/a\\x3e\\x3c/p\\x3e\\x3cp\\x3e\\x3ca href\\x3d\\x22/search?hl\\x3den\\x26amp;q\\x3dfix+stack+overflow\\x26amp;revid\\x3d-1\\x26amp;sa\\x3dX\\x26amp;ei\\x3dj9iHTLXlLNmXOJLQ3cMO\\x26amp;sqi\\x3d2\\x26amp;ved\\x3d0CEsQ1QIoAg\\x22\\x3e\\x3cb\\x3efix\\x3c/b\\x3e stack overflow\\x3c/a\\x3e\\x3c/p\\x3e\\x3cp\\x3e\\x3ca href\\x3d\\x22/search?hl\\x3den\\x26amp;q\\x3dstack+overflow+xp\\x26amp;revid\\x3d-1\\x26amp;sa\\x3dX\\x26amp;ei\\x3dj9iHTLXlLNmXOJLQ3cMO\\x26amp;sqi\\x3d2\\x26amp;ved\\x3d0CEwQ1QIoAw\\x22\\x3estack overflow \\x3cb\\x3exp\\x3c/b\\x3e\\x3c/a\\x3e\\x3c/p\\x3e\\x3c/div\\x3e\\x3cdiv class\\x3dbrs_col\\x3e\\x3cp\\x3e\\x3ca href\\x3d\\x22/search?hl\\x3den\\x26amp;q\\x3dstack+overflow+javascript\\x26amp;revid\\x3d-1\\x26amp;sa\\x3dX\\x26amp;ei\\x3dj9iHTLXlLNmXOJLQ3cMO\\x26amp;sqi\\x3d2\\x26amp;ved\\x3d0CE0Q1QIoBA\\x22\\x3estack overflow \\x3cb\\x3ejavascript\\x3c/b\\x3e\\x3c/a\\x3e\\x3c/p\\x3e\\x3cp\\x3e\\x3ca href\\x3d\\x22/search?hl\\x3den\\x26amp;q\\x3dstack+overflow+java\\x26amp;revid\\x3d-1\\x26amp;sa\\x3dX\\x26amp;ei\\x3dj9iHTLXlLNmXOJLQ3cMO\\x26amp;sqi\\x3d2\\x26amp;ved\\x3d0CE4Q1QIoBQ\\x22\\x3estack overflow \\x3cb\\x3ejava\\x3c/b\\x3e\\x3c/a\\x3e\\x3c/p\\x3e\\x3cp\\x3e\\x3ca href\\x3d\\x22/search?hl\\x3den\\x26amp;q\\x3dstack+overflow+c%2B%2B\\x26amp;revid\\x3d-1\\x26amp;sa\\x3dX\\x26amp;ei\\x3dj9iHTLXlLNmXOJLQ3cMO\\x26amp;sqi\\x3d2\\x26amp;ved\\x3d0CE8Q1QIoBg\\x22\\x3estack overflow \\x3cb\\x3ec++\\x3c/b\\x3e\\x3c/a\\x3e\\x3c/p\\x3e\\x3cp\\x3e\\x3ca href\\x3d\\x22/search?hl\\x3den\\x26amp;q\\x3dstack+overflow+windows+xp\\x26amp;revid\\x3d-1\\x26amp;sa\\x3dX\\x26amp;ei\\x3dj9iHTLXlLNmXOJLQ3cMO\\x26amp;sqi\\x3d2\\x26amp;ved\\x3d0CFAQ1QIoBw\\x22\\x3estack overflow \\x3cb\\x3ewindows xp\\x3c/b\\x3e\\x3c/a\\x3e\\x3c/p\\x3e\\x3c/div\\x3e\\x3c/div\\x3e \x27,_ss);/*  */\x3c/script\x3e"
}/*""*/

Further non-technical reading:

How to do live updating similar to Google Docs?

13 votes

I want to do something very similar to Google Doc's live updating - where all users can "immediately" see the actions of the other users in the doc.

To achieve this, my ideas so far:

  • Continuous AJAX requests being done in the background (this would seem performance-intensive)?
  • Surely there's not a way for the server to push notifications to all its clients and update them accordingly?
  • AJAX requests every X seconds with a buffer/time-lapse of actions to be accomplished in those X seconds (simulating a real-time effect)?

I would like to know others experience in trying to achieve this effect. What is the best way to do this?

All help is appreciated.

NOTE: I'm not specifically looking for a real-time document editing solution. I'm looking for a solution to the same concept of what Google does with their Docs. I will actually be using that solution in a slightly different manner.

I vote for Long-pool strategy : each client opens a request to the server, but the server never breaks up connections, and just send pieces of java-script from time to time.

Constant AJAX requests would kill your server.

Any significant reasons not to use AJAX?

13 votes

I'm planning on making my web app quite AJAX heavy.

Before I do, I'm wondering what people think of such sites. Are there any significant reasons not to do this?

BTW, no need to mention SEO reasons. Also, I think the benefits make up for the fact that people without javascript will have a limited experience (though I'm open to being convinced otherwise).

It depends on how you plan to use it, IMO.

1) If the site will absolutely fail without it, you are excluding users with scripting disabled. I think it is fair in many scenarios to limit but not remove functionality for no-script users (for example, Google doesn't autocomplete searches if you have scripting disabled; it can't...but the basic search still works).

2) The right techniques need to be used in the right place. For example, an ASP.Net UpdatePanel will perform horribly if you dump thousands of elements into it.

3) I am becoming a bigger and bigger fan of content that is loaded in small blocks on the page that does not require a full refresh NOR does it require the whole page to be executed again. This lends itself to a SOA nicely, but is even more subject to the limits of #1.

4) EDIT: Don't create UI elements that (due to AJAX) behave unexpectedly. For example, I once built a dropdown list that only populated when it was toggled. Because of latency and DOM creation time, it wasn't responsive. Furthermore, the size would often change based on what elements were dynamically added. You could propose ways around these problems, but that was still an incorrect use of the technology.

How can live search / search suggestions be implemented using Dojo?

7 votes

I want to implement a 'live search' or 'search suggestions' feature in a web application that uses the Dojo Framework. It would be similar to the way Google and Bing searches display matches as you type: when you type in the search box, a list of potential matches appears below. Searches would be performed server side, with the results sent back to the browser using AJAX.

Does anyone know of a good way to implement this using Dojo?

Here are some potential options:

  • The built-in widget dijit.form.ComboBox
    This has very similar functionality, but I've only seen it used with limited data sets. The examples always use small lists (such as the 50 states in USA) and preload the entire data set for client-side filtering. However I presume I could hook it up to a dojox.data.JsonQueryRestStore for server-side search — can anyone confirm whether that works?

  • QueryBox http://marumushi.com/code/querybox/
    This implementation mainly does the job, but it has some minor bugs and doesn't look like it's being maintained. I'd have to do some bugfixes on the code before using it.

  • Medryx http://blog.medryx.org/2008/09/10/dijitsearch-part-2/
    This also looks like it does the job, but it is described as 'alpha-level' code and the link to the code seems to be broken...

I could probably make one of the above work, but I'd like to know if there are any better alternatives out there.

I implemented it 5 years ago when Dojo was at 0.2:

While the code is ancient, it is trivial, and hopefully it'll give you ideas on how to attack it. The rough sketch:

  • Attach an event handler to your input box, which is triggered on changes — use "onkeyup" to detect a change in the input box.
  • Wait until user stopped typing by setting a timer in your event handler, if it is not set yet. 200-500ms are good waiting times.
    • The timeout plays a dual role:
      • It throttles our requests to a server to prevent overloading.
      • It plays on our perception of time and our typing habits.
  • If our timeout is up, and we don't wait for a server ⇒ send server a string we have so far.
  • If we are still waiting for a server, cancel the request and ask again.
    • This part is app-specific: we don't want to overload a server, and sometimes a server cannot handle broken connections well.
    • In the example I don't cancel the XHR call, but wait it to finish first before submitting new request.
  • Server responds with relevant results, which are promptly shown.

In the blog post I implemented it as a widget. Obviously the exact packaging is up to you.

How does Google Instant change the referer sent by the browser?

7 votes

If you click on a result in Google Instant, the referer sent by your browser to the destination website contains a bunch of parameters, including the all important q=[autocompleted query]

But you're coming from a page whose URL is simply http://www.google.com/ with a bunch of stuff after the # character, i.e. as an on-page anchor.

So the browser appears to be sending a URL as the referer which is different from the URL of the page that you were viewing when you clicked.

There doesn't seem to be an additional redirection, so how on earth do they do that?

Most of the time, a Google search result actually sends you to a Google redirect page rather than directly to the target page. They use JavaScript to switch the target of the link onmousedown as you click on it.

You can see this effect by click-and-holding on the search result link and watching your status bar.

This isn't specific to Google Instant, they've been doing it for quite a long time on their standard results pages.

Accessing binary data from Javascript, Ajax, IE: can responseBody be read from Javascript (not VB)?

6 votes

First of all, I am aware of this question:

and specifically best answer therein, http://emilsblog.lerch.org/2009/07/javascript-hacks-using-xhr-to-load.html.

So accessing binary data from Javascript using Firefox (and later versions of Chrome which actually seem to work too; don't know about Opera). So far so good. But I am still hoping to find a way to access binary data with a modern IE (ideally IE 6, but at least IE 7+), without using VB. It has been mentioned that XHR.messageBody would not work (if it contains zero bytes), but I was wondering if this might have been resolved with newer versions; or if there might be alternate settings that would allow simple binary data access.

Specific use case for me is that of accessing data returned by a web service that is encoded using a binary data transfer format (including byte combinations that are not legal in UTF-8 encoding).

I guess answer is plain "no", as per this post: http://stackoverflow.com/questions/1919972/how-do-i-access-xhr-responsebody-from-javascript

(or: "use VBScript to help")

Ajax post return value

5 votes

Im using Ajax to send values to a PHP script which writes some value to a database:

$.ajax({
    type: "POST",
    data: "action=vote_down&id="+$(this).attr("id"),
    url: "vote.php",
    success: function(msg) {
        $("span#votes_count"+the_id).fadeOut();
        $("span#votes_count"+the_id).html(msg);
        $("span#votes_count"+the_id).fadeIn();                      
    }
});

As you can probably tell from the action=vote_down the script is for a voting script.

Im already preventing the user from voting more than once by logging there vote against there username and ID in vote.php and if there username and ID is already in the DB against the same post then I dont add the vote to the DB.

I personally think that querying the database on each page load to check if the user has already voted could be quite intensive, there are many places to vote on a single page.

So instead i'll show the user the voting option, but when they vote I want to some how return a value from vote.php to say they have already voted.

Any ideas for the best approach to this?

This should put you in the right direction...

http://forum.jquery.com/topic/jquery-ajax-and-php-variables

I would parse back a boolean false if they have posted already, or the id of the vote if they were successful (for styling / adding the html message).

Who Add "_" Single Underscore Query Parameter?

5 votes

I have a PHP server running on Apache, I get lots of request looks like this,

10.1.1.211 - - [02/Sep/2010:16:14:31 -0400] "GET /request?_=1283458471913&action=get_list HTTP/1.1" 200 547 0 "http://www.example.com/request" "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8 (.NET CLR 3.5.30729)" 28632 15602

The _ parameter is mysteriously added to the request. I am trying to find out who is doing that.

There is a NetScaler running in front of Apache.

jQuery adds a parameter like that to get around IE's caching.

edit: it only adds it for get requests, and only if the option cache is false:

cache: false

phonegap: cookie based authentication (PHP) not working [webview]

5 votes

I'm working on a mobile web-app using sencha touch, HTML5 and phonegap as a wrapper.

I'm using PHP-Authentication (Cookie) and ajax-requests. Everything works fine on safari or chrome, but after the deployment with phonegap (webview) it does't work anymore...

Any help would be appreciated :)

Some more details:

All data for my app is loaded via ajax requests to my server component "mobile.php". I use basic PHP-Auth to autenticate the user:

  1. AJAX-Request [username, password] -> mobile.php -> Session established (cookie)
  2. All other requests if auth was successful

What's the difference between a normal safari website and the webview?

i figured it out:

you have to change the phonegap_delegate.m file and add the following to the init method:


- (id) init
{   
    /** If you need to do any extra app-specific initialization, you can do it here
     *  -jm
     **/
    //special setting to accept cookies via ajax-request
    NSHTTPCookieStorage *cookieStorage = [NSHTTPCookieStorage 
                                          sharedHTTPCookieStorage]; 
    [cookieStorage setCookieAcceptPolicy:NSHTTPCookieAcceptPolicyAlways]; 

    return [super init];
}

it enables webview to accept cookies from ajax requests

Creating a reply using PHP and the Twitter API

5 votes

This is the PHP code im using in conjunction with jQuery .ajax to create a new Tweets:

/* Create a TwitterOauth object with consumer/user tokens. */
$connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, $access_token['oauth_token'], $access_token['oauth_token_secret']);

    $qtweet = $_POST['tweet'];
    $connection->post('statuses/update', array('status' => $qtweet));

Data is supplied by form and a bit of jQuery .ajax:

<form id="tweethis" method='post' action=''>
    <textarea style="width: 42em;" name="tweet" rows="5" id="tweet" ></textarea>
    <br />
    <p class="confirm" style="padding-bottom: 4px;">Tweet Sent.</p>
    <span id="charLeft">140</span>  Characters left
    <br />
    <input type='submit' value='Tweet This!' name='submit' id='submit' />
</form>

$("#tweethis #submit").click(function() {  
    //The Tweet
    var tweettxt = $("textarea#tweet").val();
    var ptweettxt = 'tweet=' + tweettxt;
    $.ajax({
      type: "POST",
      url: "tweet.php",
      data: ptweettxt,
      success: function() {
        $('#tweethis .confirm').css('color','red').slideDown(500).delay(3000).slideUp(500);
        $('textarea#tweet').val("");
      }
    });
    return false;
}); 

I'd like to adapt the form to also deal with replies, so the user can click the ID of a tweet, that ID gets added to the FORM. The FORM will need another hidden field which will be initially blank so when the user submits without a reply ID they just send a Tweet.

However I'll need some code in the PHP file to check if the _POST is empty or null, if null just send a tweet but if it has an ID create a reply.

How can I do the check if the field is empty or filled with an ID?

I also need help creating the reply.

The documentation is here: http://dev.twitter.com/doc/post/statuses/update

This is what I have written so far for the PHP:

$qtweet = $_POST['tweet'];
$tweetid = $_POST['tweetid'];
$connection->post('statuses/update', array('status' => $qtweet, 'in_reply_to_status_id => $tweetid'));

Not sure if I'm contructing the array correctly or this is acceptable to the Twitter API.

The .ajax will be trivial compared to all this as i'll just pass the hidden form value as another value in the _POST.

Any help with this greatly appreciated, this is the last thing left for me to complete my first PHP project, I've created my own Twitter Client specifically designed for use at conferences where a hashtag is used to track the back channel.

you use empty() to check if something is empty =)

also you need to correct this line...

$connection->post('statuses/update', array('status' => $qtweet, 'in_reply_to_status_id' => $tweetid));

Don't put the variable in quotes

Maybe something like

if ( empty( $_POST['tweetid'] ) ) {
    $connection->post('statuses/update', array('status' => $qtweet));
}
else {
    $connection->post('statuses/update', array('status' => $qtweet, 'in_reply_to_status_id' => $_POST['tweetid']));
}

You just have to put the id of tweet in the form

JSF 2.0 AJAX: Call a bean method from javascript with jsf.ajax.request (or some other way)

4 votes

Some background: I am building a custom JSF component. The component is basically a text editor and it should have a "Save" -button for saving the content string of the editor. As I am using the CodeMirror library, I need to fetch the content (string) from the editor with javascript and send that to the server. Therefore, in this case I cannot use XML-based JS invocation such as f:ajax.

The question: I was planning to send the string with jsf.ajax.request, but it doesn't directly support calling methods on beans. How can I invoke a method in a bean with JSF in AJAX manner?

There at least two ways to get around this:

  • Include a hidden form to page with hidden inputfield. Update that inputfield from javascript and then call jsf.ajax.request to post that form. Custom actions can be invoced in the property's getter or setter if needed.
  • Do the request with raw XMLHttpRequest (or maybe with help from some other JS library). Create a servlet and call that.

Both ways are clumsy and the latter also breaks out of JSF scope.

Am I missing something? How do you do these?

There is a quite similar question, but the answers given only refer to XML-based AJAX invocations. There is also another similar question, but that refers to XML-based AJAX calls as well.

I couldn't find out how to call beans direcly with javascript, but here is a hack around calling f:ajax-declaration from javascript:

1) Create a hidden form with fields for all the data that you want to send to the server. Include a h:commandButton as well:

<h:form id="hiddenForm" style="display: none;">
    <h:inputHidden id="someData" value="#{someBean.someData}" />
    <h:commandButton id="invisibleClickTarget" />
        <f:ajax execute="@form" listener="#{someBean.myCoolActionOnServer()}" />
    </h:commandButton>
</h:form>

As usual, listener attribute, #{someBean.myCoolActionOnServer()} in this case, refers to the method that you want to execute on the server.

2) In some other button use onclick to call for your special javascript AND click the trigger-button via javascript:

<h:commandButton value="Click me" onclick="populateTheForm('hiddenForm'); document.getElementById('hiddenForm:invisibleClickTarget').click(); return false;" />

populateTheForm() should actually fill the data into hiddenForm's fields.

This is a simplification of my case but should work. Still looking for more conventient approach, though.

Handling JSON in JS/ERB template in Rails 3

4 votes

I have no trouble making typical AJAX calls to and from Rails(3) with JSON objects and jQuery-rails (jQuery library plus a special rails.js file).

In one controller, though, I want to RETURN some JSON in an erb template (create.js.erb) after an AJAX call.

I've tried every combination of things in the controller (@object.to_json, '[{"content":"hello world"}]', etc.) and in the template itself (JSON.parse(), single quotes, double quotes, etc.), but the object keeps on rendering like this:

'[{&quot;groups&quot;:{},&quot;created_at&quot;:&quot;2010-09-21T03:49:34Z&quot; ...

and as a result, my jQuery code cannot parse it and I get errors.

How do I need to prep my object in the controller, and what erb syntax do I need in the view for it to render as a valid JSON object?

Thanks so much!

I'm not sure this is the cause, but you can also try playing around with html_safe method. ERB might be escaping your JSON because it thinks it's not html safe. Try calling that method when using the string:

@object.to_json.html_safe

JQuery's getJSON() not setting Accept header correctly?

4 votes

It looks like people have had issues with Accept headers in the past, but I'm not sure my issue is related. Using jQuery 1.4.2, I'm having trouble getting JSON with getJSON(). I can watch the request / response in Firebug and it looks like the source of the problem is that the resource in question returns different results depending on the Accept header. Even though the docs say it should be set, in Firebug it shows up as "/" -- obviously, I want "application/json". Is this a known bug? Am I supposed to be setting some flag I'm not aware of?

ETA: The request is cross-site, if that matters, but I'm passing a callback=? query parameter so JQuery is (successfully!) treating it as JSONP. The service I'm calling in this particular case supports an accept override query parameter (&accept=application/json), so I got it to work manually, but I still consider the header screwup to be strange and was hoping I'd be able to fix it, so I don't run into this again when dealing with a different service that might not be so forgiving. I don't have an easy way to copy/paste the code from my development environment but here's the gist:

$.getJSON(baseURL + "?item=" + itemNum + "&callback=?", function(data){
  console.log(data);
}

As you can see, this is not exactly complex, and should (I'm 99% sure...) result in an XHR being sent with an Accept header of application/json. Like I said, that's not happening, per Firebug's Net console. If it matters, this is in Firefox 3.6.8.

ETA Again: For anybody still reading this, yes, it's still happening, and no, I have no idea why. Like I said, simple getJSON() call, really basic syntax, cross site, treated as JSONP because it includes a callback query parameter. Still open to suggestions!

This is not a bug.

Since your call is cross-domain, your browser will not allow you to make XHR calls (same-origin policy). Internally, jQuery is working around this using the "<script> tag hack", to make the cross-domain call (this is the fundemental idea behind the JSONP data type). Since the call is made using the tag, it is simply not possible for jQuery to modify the accepts portion of the header.

jQuery works its magic by hiding these details from you, but unfortunately in this case you seem to be subject to the Law of Leaky Abstractions.

Moving to a New Stack - AJAX, REST & NoSQL

4 votes

All, I'm beginning to explore what frameworks (open source) and tools for building web applications. What should I select and learn for the following layers,

Layer 1 Client side JavaScript / AJAX library or framework that will invoke REST style services provided by layer- 2

Layer 2 Provides a framework to rapidly create REST style services out of existing applications and out of a NoSQL document oriented database provided by layer-3. I need this layer in cases where I need to expose REST style services out of my traditional apps and RDBMS.

Layer 3 Which NoSQL to use - CouchDB or MongoDB that would work well with layer-2?

Will I need a MVC framework like RoR or a web/component framework like Wicket? Am I missing anything?

I also need recommendations for which tooling/IDE (and associated plugins) for the development environment. Thanks in advance for your answers/thoughts.

We've had pretty decent luck using a Java stack:

  1. For the presentation, we use jQuery and jQueryUI, with Freemarker for XHTML/CSS templating, including to invoke REST web services through various UIs.

  2. Restlet (www.restlet.org) is a wonderfully rich framework for crafting REST web services in Java. We decided to use it on a major product after it was strongly recommended to us by the engineering director of a top 10 e-commerce site in the US. And everything he said about it was true.

  3. Unless you know you're going to face a really large amount of write volume, you're probably best off using one of the tried and true SQL databases supporting ACID transactional guarantees. We used Oracle, then switched to PostgreSQL, using the MyBatis (formerly iBatis) SQL Mapper to shield our code from the details of the database. With the advent of 64-bit addresses and scads of inexpensive DRAM, plus SSDs, these old workhorses do scale quite high.

  4. If you are anticipating very large amounts of writes, by all means consider a so-called "NoSQL" database. I heard very good things about Vertica from the top network ops folks at a major technology company last week. MongoDB and CouchDB both look interesting. Or you may be able to leverage persistent distributed cache technology like Redis or EhCache to offload a traditional database.

How to view the last GET HTTP request in JavaScript

4 votes

How can I view the last GET http request in JavaScript? Basically what I am after is what I can see my firebug console. When XMLHttpRequests are showing in console I see a line that looks something like:

GET   http://www.domain.com/php/file.php?q0&c=1   200   OK   163ms

How do I view that URL in JavaScript?

EDIT: Just to be clear I'm looking for the URL between GET... and ...200. I don't care about anything else. I don't want any of the other info.

I ended up going with a workaround using $_SERVER['REQUEST_URI'] in PHP and then passing it to JavaScript.