AJAX Solutions can be used by web developers to create amazing applications. Dozens of projects, even Gmail, made with AJAX provide new interactivity for applications that can have enhanced user functionality. Using AJAX, better, faster, more flexible web solutions are available. AJAX is the first step toward web applications of the future.

What exactly is AJAX? AJAX is an acronym for Asynchronous JavaScript and XML, and though some think it’s a new programming language, it’s really not. AJAX is basically XHTML, DOM, CSS, XML, XMLHttpRequest used together to do one thing, which is to improve the user-server interaction.
• To better understand AJAX, check out some articles about it.
• To learn the AJAX basics, look up some tutorials.
• To learn about CSS, look up some articles and tutorials.

Remember: Google is your friend!
Contained in this article are 80+ AJAX scripts and resources you should have at your side while designing your own applications. Auto-completion, instant field editing, menus, calendars, interactive elements, visual effects, animation, basic Javascript, as well as an extensive developer’s suite are contained here for a useful toolbox, so that you don’t have to go through a huge list of bookmarks.

Auto Complete Scripts

1. AJAX AutoSuggest

2. AJAX Autocompleter / script.aculo.us library

3. AJAX AutoCompleter

4. Ajax autosuggest/autocomplete from database

5. Ajax dynamic list

Instant Editor Scripts

6. AJAX inline text edit 2.0

7. AJAX & CSS Flickr-like Editing Fields

8. AJAX Instant Edit

Tab and Menu Scripts

9. 14 Tab-Based Interface Techniques

10. AJAX Accordion Navigation

11. AJAX Dialogs, Menus, Grids, Trees and Views

12. AJAX Tab Module - Closeable Implementation

13. Ajax Tabs Content

14. MooTabs - Tiny tab class for MooTools

15. Dynamically loaded articles

Calendar/Datetime Scripts

16. AJAX Datetime Toolbocks - Intuitive Date Input Selection

17. AJAX Calendars

Interactive Elements Scripts

18. AJAX Floating Windows

19. AJAX Star Rating Bar

20. Ajax poller

Developer’s Suite Scripts

21. AJAX HistoryManager, Pagination

22. AJAX Login System Demo

23. AJAX image preloader

24. AJAX Tooltips: Nice Titles revised | Blog | 1976design.com

25. 40+ Tooltips Scripts With AJAX, JavaScript & CSS | Smashing Magazine

26. AJAX Web Controls

27. AJAX syntaxhighlighter

28. Transparent Message

29. ModalBox — An easy way to create popups and wizards

30. Chained select boxes

31. Fly to basket

32. AJAX Key Events Signal

33. Disable form submit on enter keypress

Enhanced Solutions

34. AJAX Instant Completion

35. Novemberborn: Event Cache

36. Altering CSS Class Attributes with JavaScript

37. Select Some Checkboxes JavaScript Function

38. AJAX Emprise Charts

39. amCharts: customizable flash Pie & Donut chart

40. PJ Hyett : The Lightbox Effect without Lightbox

Forms

41. AJAX Upload Form

42. An AJAX contact form

43. AJAX contact form

44. Ajax.Form

45. Ajax form validation

46. Really easy field validation

47. AJAX fValidate

48. Ajax newsletter form

49. wForms

Tables and Grids

50. Data Grids with AJAX, DHTML and JavaScript | Smashing Magazine

51. Grid3 Example

52. AJAX Table Sort Script (revisited)

53. AJAX Sortable Tables

54. AJAX TableKit

Showcases, Galleries, and Lightbox Scripts

55. 30 Scripts For Galleries, Slideshows and Lightboxes | Smashing Magazine

56. AJAX LightBox, Sexy Box, Thick Box

57. AJAX Lightbox JS

58. AJAX Unobtrusive Popup - GreyBox

59. SmoothGallery: Mootools Mojo for Images | Full gallery

60. AJAX Libraries and Frameworks

Animation and Visual Effects Scripts

61. How to Create Digg Comment Style Sliding DIVs with Javascript and CSS

62. How to Create a Collapsible DIV with Javascript and CSS

63. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS

64. AJAX Shopcart

65. Draggable content

66. Dragable RSS boxes

67. AJAX Pull Down Effect

68. AJAX Animation Effects

69. Combination Effects in scriptaculous wiki

70. AJAX Motion Transition

Useful Javascript Scripts

71. 9 Javascript(s) you better not miss!

72. Top 10 custom JavaScript functions of all time

73. Hyperdisc Materials: JavaScript: Top 10: Automatic Breadcrumb Trail

74. JavaScript: Top 10 Most Useful JavaScripts

75. My Favorite Javascripts for Designers: Blakems.com ?

More Resources and Galleries

76. Max Kiesler - mHub : Ajax and rails examples & how-to’s

77. Ajax Resources

78. DZone Snippets: Store, sort and share source code, with tag goodness

Ajax 기본 예제와 JSP 엔진에서 한글 인코딩 충돌 문제 처리 

Ajax가 필요한 일이 발생해서, 급조해서 Ajax를 공부했다.
공부한 책은 Ajax 입문이며, 처음 약 5~60 페이지만 읽었다. 급조한 내용이니 너무 신뢰하지 말 것. 아.. 그리고 이 책, 중대한 오탈자가 은근히 있다. 혹시 이 책으로 공부하고자 한다면 오탈자를 확인한 뒤에 공부해서 불필요한 시간 낭비를 줄이는 것이 좋겠다.

아무튼, 책의 내용중 Ajax의 기본적인 사용에 관한 문제를 정리하고, 또 JSP/Servlet 엔진에서 Ajax사용시에 발생하는 한글 인코딩(encoding)문제의 처리방법도 정리해 둔다.

Ajax의 개념에 관한 설명은 인터넷 상에 차고 넘치므로 생략.

* A Simpler Ajax Path가 Ajax 입문에 좋은 글.

Ajax의 개발 순서

1. XMLHttpRequest 객체 생성
2. HTTP 요청을 발생시킴(open(), send())
3. 서버측에서 XMLHttpRequest를 통해 보낸 요청을 받아서 파라미터를 분석하고, 작업을 한 뒤에 결과를 XML이나 문자열로 리턴한다.
4. XMLHttpRequest로 서버가 리턴한 데이터를 받아서 처리(onreadystatechange, responseText, responseXML)

XMLHttpRequest에 의한 송수신 상세 예

JavaScript에서 XMLHttpRequest Object 생성하기

// XMLHttpRequest 오브젝트 생성 함수
// @sample oj = createHttpRequest();
// @return XMLHttpRequest 오브젝트
function createHttpRequest()
{
    if (window.ActiveXObject) {
        try {
            // IE6
            return new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                // IE4, IE5
                return new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e2) {
                return null;
            }
        }
    } else if (window.XMLHttpRequest) {
        // Mozilla, FireFox, Opera, Safari, Konqueror3
        return new XMLHttpRequest();
    } else {
        return null;
    }
}

HTTP 요청 발생

 1. open() 메소드 실행 (POST/GET, 요청URL, 동기/비동기지정)

var request = createHttpRequest();
request.open("GET", "/test.xml");
 
// param 1 : GET/POST
// param 2 : URL
// param 3 : 생략가능. 동기/비동기 여부. 기본 비동기.

 2. send() 메소드(데이터 송신)

 request.send(""); // 데이터 없이 전송할때 혹은
 request.send(null); // Konqueror에서는 오류 발생함. Konqueror를 제외하고 데이터 없이 전송할 때 사용가능

위 a,b가 기본적인 모양새이지만, 실제로 GET과 POST 방식에 따라 차이가 많이난다.

  * GET 방식 : GET 방식은 URL에 파라미터를 직접 붙여 보내지만, 한글 등의 문제로 인코딩이 필요하고, RequestHeader 설정도 필요하다. 일반적으로 다음과 같은 모양이 된다.

var paramName = encodeURIComponent("파라미터명"); // 파라미터이름을 UTF-8로 인코딩
var paramValue = encodedURIComponent("파라미터값"); // 파라미터 값을 UTF-8로 인코딩

// 파라미터 구분에 사용되는 ?와 &는 인코딩 되면 안된다. 그래서 따로 붙인다.
var fullParameter = '?' + paramName + '=' + paramValue; // URL에 사용할 파라미터 구성

request.open("GET", "/test.cgi" + data);

// setRequestHeader()는 open()보다 이후에 나와야만 한다.
// 아래는 파라미터 값을 UTF-8로 인코딩해서 보내겠다는 의미.
// GET방식에서는 필요 없고, POST방식에서는 필수이다.
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

request.send(null);

  * POST 방식 : send() 메소드에 인수를 데이터로 넘긴다.

request.open("POST", "/test.cgi");
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
// POST 방식에서도 파라미터를 인코딩하여 send()메소드의 인자로 넘겨주면 된다.
request.send("name=test&data=123");

A Simpler Ajax Path에 보면 HTML폼에 입력된 값을 자동으로 파라미터 문자열로 변경해주는 메소드 예가 있다.

착신과 데이터 처리

 * onreadystatechange 이벤트(송수신 상태 변할때 기동) - IE 이외 부라우저에서는 콜백 스타일의 onload 이벤트 사용가능
 * readyState 프라퍼티 (송수신 상태를 나타내는 값. "4"가 송신 완료) - onload의 경우에는 불필요
onreadystatechange는 요청 처리 상태를 나타내는 readyState 프라퍼티의 값이 바뀔 때 발생한다.
 * 착신을 처리할 함수 지정은 request.open() 함수를 호출하기 전에 선언해야 정상 작동했다. 항상 요청을 보내기 전에 요청을 처리할 함수 지정을 해둔다.

request.onreadystatechange = callbackFunction; // callbackFunction() 함수가 호출된다.

function callbackFunction() {
    // readyState == 4는 착신 완료를 의미한다.
    if (request.readyState == 4) {
        // 착신시의 처리
    }
}

다른 방법으로, callback 함수를 인라인으로 정의하고, HTTP 상태 코드가 200일때만 작업하도록 할 수도 있다. 두가지를 한꺼번에 보면,

request.onreadystatechange = funcation() {
    if (request.readyState == 4 &&
            request.status == 200) {
        // 착신시의 처리
    }
}

onreadystatechange 대신 onload를 사용할 수 있다. Opera 8은 버그때문에 onload만 사용한다. (IE를 제외한 다른 브라우저에서 다 된다)

request.onload = function() {
    // 착신시의 처리
}

onload와 onreadystatechange를 동시에 이용하기 위해서 다음과 같이한다.

if (window.opera) {
    request.onload = function() { callback(request); }
} else {
    request.onreadystatechange = function() {
        if (request.readyState == 4) {
            callback(request);
        }
    }
}

function callback(request) {
    // 실제 착신시의 처리를 구현하는 부분
}

 * responseText 또는 responseXML (데이터를 텍스트 혹은 DOMDocument로 수신)
   * responseText : 텍스트로 받기
   * responseXml : XML로 받기
   * 여러줄의 CSV 텍스트를 받았을 때의 일반적 처리

var res = request.responseText;
var rows = res.split(" "); // 여러 줄을 한 줄씩 배열로 만든다.
var cols = rows[0].split(","); // 첫번째 줄을 쉼표 단위로 분리하여 배열로 만든다.

   * JSON 처리

eval("res = " + request.responseText)
//... 기타 처리

   * XML 처리

  Toshiro Takahashi
  hello

var res = request.responseXML;
var msgs = res.getElementsByTagName("msg"); // DOM 객체 사용

alert(msg[0].firstChild.nodeValue);

서버측 스크립트

XMLHttpRequest.send() 에 의해 요청을 받아 처리하게 되는 서버측 스크립트(JSP, Servlet, ASP, PHP 등)은 요청 파라미터를 분석하여 작업을 처리한 뒤에 결과를 Text나 XML로 리턴하면 된다.
 * 리턴시 문자 인코딩은 기본적으로 UTF-8로 한다.
 * 텍스트로 리턴할 경우, Opera 8, Konqueror 3, Safari 등은 UTF-8을 인식하지 못한다. 서버는 응답 문자열을 UTF-8기준으로 URI 인코딩을 해서(Java의 경우 java.net.URLEncoder.encode() 메소드 사용) 리턴하고, 받는 측(웹 브라우져)는 다음과 같이 해석하면 정상적인 문자열을 받게 된다.(실제로는 작동하지 않으므로 URLEncoder를 사용하지말고 받는 자바 스크립트 측에서도 아래와 같이 받지 말고 그냥 request.responseText를 받을 것)

// Mozilla FireFox와 IE에서는 Encode/Decode할 경우
//공백이 +로 바뀌는 현상이 발생했다. 그래서 안쓴다.
// JavaScript측에서 decodeURIComponent를 안하면 서버측에서도 URLEncoding을 하면 안된다.
var res = decodeURIComponent(request.responseText);

JSP/Servlet 에서 Ajax와 한글 인코딩 문제

Ajax는 기본적으로 UTF-8 만으로 통신을 한다고 보면된다. 그 이외의 Encoding을 지원하는 인코딩 함수가 없기 때문에 EUC-KR로 데이터를 전송하려는 꿈은 접어야만 한다.
헌데, 아직 우리나라는 EUC-KR 인코딩으로 된 웹 어플리케이션이 압도적으로 많은 상황이다(어서 빨리 UTF-8로 옮겨가길 바라마지 않는다).
거기다가 보통 JSP/Servlet 웹 어플리케이션은 Servlet 스펙 2.3이후부터 문자 인코딩 서블릿 필터를 사용해 모든 요청에 대해 일관된 문자 인코딩을 사용하는 것이 보편적인 방법으로 자리잡았다.

서블릿 필터는 일관성있게 모든 요청을 EUC-KR로 받아들이게 했는데, 몇몇 Ajax관련 요청만 UTF-8로 받아들여야만 하는 것이다.
필터를 적용할 URL-Pattern을 따로 줘보려 했으나, 너무 복잡해졌다.
그래서 HTTP 요청의 헤더를 이용해서 해결 했다.

아.. 한가지 더. 현재 한글 문제는 "XMLHttpRequest 요청 -> JSP/Servlet" 이 상황에서만 발생하는 것이다.
"JSP/Servlet -> XMLHttpRequest"의 상황(서버에서 클라이언트로 값을 리턴)에서는 이 문제가 발생하지 않는다.
서버가 리턴하는 문자열은 간단하게 다음처럼 하면 WAS가 자동으로 UTF-8로 값을 변경해서 전달하기 때문이다.

contentType에서 text/plain은 텍스트나 JSON으로 값을 리턴할 때이다. XML로 리턴할 때는 text/xml.

아래는 Ajax 요청을 처리하기 위해서 만들어본 간단한 Encoding Filter 이다.

package ajax.filter;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;

/**
 * 어플리케이션 전체에 적용되는 필터이다.
 *
 *

 *
encoding 파라미터 : encoding 파라미터를 설정하면 request 객체에
 * setCharacterEncoding(encoding)을 실행한다.
 *
ajaxFlag 파라미터 : Ajax요청임을 나타내는 HTTP 파라미터 이름이다. ajaxFilter로 지정한 HTTP 파라미터의
 * 값이 true 로 설정되면 인코딩을 무조건 UTF-8로 설정한다.
 *

 *
 * @author 손권남(kwon37xi@yahoo.co.kr)
 *
 */
public class EncodingFilter implements Filter {

    private Log log = LogFactory.getLog(this.getClass());

    /** HTTP 요청 문자 인코딩 */
    private String encoding = null;

    /** Ajax 요청임을 나타내는 플래그 파라미터 이름 */
    private String ajaxFlag = null;

    public void doFilter(ServletRequest request, ServletResponse response,
            FilterChain chain) throws IOException, ServletException {

        if (ajaxFlag != null
                && "true".equals(((HttpServletRequest) request)
                        .getHeader(ajaxFlag))) {
            // Ajax 처리 요청일 경우 무조건 UTF-8 지정.
            request.setCharacterEncoding("UTF-8");
            if (log.isDebugEnabled()) {
                log.debug("요청 헤더에 " + ajaxFlag + "가 "
                        + ((HttpServletRequest) request).getHeader(ajaxFlag)
                        + "로 설정되어 있어 문자 인코딩에  UTF-8을 사용합니다.");
            }
        } else if (encoding != null) {
            // Ajax 플래그가 true가 아니면, 기본적인 인코딩을 적용한다.
            request.setCharacterEncoding(encoding);
            if (log.isDebugEnabled()) {
                log.debug("문자 인코딩에 " + encoding + "을 사용합니다.");
            }
        }

        chain.doFilter(request, response);
    }

    public void init(FilterConfig config) throws ServletException {
        encoding = config.getInitParameter("encoding");

        ajaxFlag = config.getInitParameter("ajaxFlag");

        if (log.isDebugEnabled()) {
            log.info("encoding : " + encoding + ", ajaxFlag : " + ajaxFlag);
        }
    }

    public void destroy() {
    }
}

이 필터를 적용하고서, web.xml에 다음 내용을 추가하면 필터가 작동한다.

    이중 인코딩 필터
    EncodingFilter
    ajax.filter.EncodingFilter
   
        encoding
        euc-kr
   
   
        ajaxFlag
        Ajax
   

    EncodingFilter
    /*

여기 내용을 보면, 기본적인 인코딩은 EUC-KR이고, 요청 헤더에 "Ajax" 헤더의 값이 "true"일 경우에는 강제로 UTF-8을 지정하라고 한 것이다. "ajaxFlag"의 값을 변경하면 헤더의 키을 "Ajax"가 아닌 다른 값으로도 지정할 수 있다. 하지만 아무튼 해당 헤더의 값을 "true"로 지정하면 Ajax로 인식하게 되는 것이다.

이를 위해서는 XMLHttpRequest에도 한가지 처리를 더 보태야 한다.

    request.open("GET", "AjaxProcessor.jsp" + fullParameter);
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    request.setRequestHeader('Ajax', 'true');

당연히 헤더에 값 Ajax요청임을 명시하는 값을 설정하는 것이다.

그리고 다음 문제가 또 있는데, Tomcat 버전별로 문자 인코딩 설정이 달라질 수 있다는 것이다.
위 내용은 Tomcat 4.x에서는 정상 작동하지만, Tomcat 5.x 에서는 제대로 작동하지 않는다.
Tomcat 5.x에서는 server.xml 에 GET 방식의 요청에 대한 인코딩을 지정하기 때문이다.
여기서 URIEncoding="euc-kr" 을 사용하지 않고, useBodyEncodingForURI="true"을 사용하면 Tomcat 4.x 처럼 request.setCharacterEncoding()의 값을 따라가게 할 수 있다.
Tomcat과 한글에 대해서는 Tomcat/JSP와 한글문서를 참조한다.

또하나 Ajax임을 나타내는 플래그를 HTTP 요청 헤더에 설정하도록 했는데, 그러지 않고 요청 파라미터(request.getParameter()로 값을 얻어올 수 있는 것)으로 설정하면 안된다.
request.getParameter()가 실행되어 Ajax 플래그의 값을 감지하는 그 순간, 그 이후 호출되는 request.setCharacterEncoding()는 완전히 무시되어 버리기 때문이다.

예제

급조한 예제이다.
* AjaxCaller.jsp - Ajax 호출부(클라이언트) : 수식을 만들어서 서버측에 계산을 요청한다.

이름 : 

    +
    -
    *
    /

* AjaxProcessor.jsp - Ajax 처리부(서버) : 수식을 계산한 결과를 JSON 형태로 리턴한다

이름 입력 부분에 한글을 입력하여 문제없이 처리되는지 확인해보기 바란다.

JSON

Ajax(JavaScript)는 데이터를 리턴 받는 방법으로 XML/Text/JSON을 지원한다. JSON은 텍스트 형태로 객체를 정의하는 방식이다. 이것은 XML과 1:1 매칭을 할 수도 있다. XML보다 훨씬 만들기 쉽고 사용법도 자바 객체를 사용하는 것과 유사하다. 그래서 이걸 사용해서 프로그램을 작성했다.

{
  "test1": "hello",
  "test2": "hello2"
}

위와 같은 메시지를 서버에서 응답으로 내보냈다고 할 때

// JSON 형태의 텍스트를 JavaScript 객체화 한다.
eval("res = " + request.responseText);

// 객체를 사용한다.
alert(res.test2); // 이 명령은 "hello2"를 출력한다.

배열은 다음과 같이 생성한다.

[
  ["test1", "test2"],
  ["test3", "test4"]
]

아래와 같이 사용한다.

eval("res = " + request.responseText);

// test4를 출력한다.
alert(res[1][1])

 * JSON 홈페이지 : http://www.json.org/
 * Java 객체를 이용해서 JSON 객체를 위한 텍스트 생성하기 : http://www.json.org/java/simple.txt 매우 단순한 방법으로 핵심 기능만 가지고 있다. 이것을 사용하길 권장한다. 라이브러리 다운로드는 http://www.JSON.org/java/json_simple.zip 에서 한다.
 * XML과 JSON간의 변환 

(출처 : http://ingenuity.egloos.com)

Ajax에서 서버와의 통신을 위한 핵심 요소인 XMLHttp는

IE7과 모질라 계열 브라우저에서는 native XMLHttpRequest를 사용.
그리고 IE6 이하 버전에서는 Microsoft.XMLHttp를 ActiveXObject로 object 생성.

[ IE에서 생성할 수 있는 XMLHttp object ]
  - Microsoft.XMLHttp
  - MSXML2.XMLHttp
  - MSXML2.XMLHttp.3.0
  - MSXML2.XMLHttp.4.0
  - MSXML2.XMLHttp.5.0


[ Cross-Browser 를 위한 XMLHttp object 메소드 생성 예 ]

function CreateXMLHttp()
{
  if (window.XMLHttpRequest)
  {
    return new XMLHttpRequest();
  }
  else if (window.ActiveXObject)
  {
    var aVersions = [ "MSXML2.XMLHttp.5.0"
      ,"MSXML2.XMLHttp.4.0"
      ,"MSXML2.XMLHttp.3.0"
      ,"MSXML2.XMLHttp"
      ,"Microsoft.XMLHttp"
      ];

    for (var i = 0; i < aVersions.length; i++)
    {
      try
      {
        var oXmlHttp = new ActiveXObject(aVersions[i]);
        return oXmlHttp;
      }
      catch (oError)
      {    
      }
    }
  }
}

[XMLHttp의 메소드 , 프로퍼티 및 이벤트]
1. 메소드
- abort( ) : 요청을 취소
- getAllResponseHeaders( ) : 모든 응답 헤더를 수신
- getResponseHeader(header) : 특정 응답 헤더 수신
- open(RequestType, url, async) : 통신 연결(nativ XMLHttpRequest는 Cross-domain을 제한함.)
   - RequestType : Get or Post

   - url : 서버 주소
   - async : true(비동기 방식 통신), false(동기 방식)
  
- send(content) : 서버로 요청을 보냄. content는 null 을 포함함.
- setHeader(header, value) : 헤더의 키와 값의 쌍을 설정

2. 프로퍼티 / 이벤트 핸들러
- onreadystatechange : readyState가 변경 시 실행될 함수 등록
- readyState : 요청 및 처리 상태
   - 0 (Uninitialized) : 아직 open() 메소드를 호출 하지 않은 상태
   - 1 (Loading) : open() 메소드를 호출한 상태(아직 send는 하지 않은 시점)
   - 2 (Loaded) : 요청을 서보로 보낸 상태( send() )
   - 3 (Interactive) : 일부만 응답 받은 상태
   - 4 (Complete): 모든 데이터를 받고 연결이 끊어진 상태

- responseText : 서버로 부터 받은 결과값의 스트링 반환
- responseXML : 서버로 부터 받은 결과값의 XML 형식
- status  : 서버로 부터 응답 받은 상태 코드 (200 (OK) or 404 (Not Found) 등)
- statusText : status 코드에 대한 의미 명기


[ 서버 전송 예 ]
function sendRequest()
{
    var content = getRequestBody();

    var oXmlHttp = createXMLHttp();
    oXmlHttp.open("post", "http://www.text.com/testForm.aspx", true);
    oXmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    //서버로 호출이 성공 하였을 경우 처리할 CallBack 함수 등록
    oXmlHttp.onreadystatechange = function ()
    {
        if (oXmlHttp.readyState == 4)
        {
            if (oXmlHttp.status == 200)
            {
                saveResult(oXmlHttp.responseText);
            }
            else
            {
                saveResult("An error occurred: "+ oXmlHttp.statusText);
            }
        }
    };
    
    oXmlHttp.send(content);
}


----------------------- 에이작스 한글깨짐 -----------------------------

http://www.methodchain.com/index.html

MethodChain?

MethodChain은 Ajax 라이브러리로 New Paradigm입니다.

MethodChain은 프로그램을 작성하지 않고 웹 애플리케이션을 개발할 수 있는

아키텍처와 메커니즘을 제공합니다.

2009년 11월 17일: MethodChain UI RC1 버전을 발표했습니다.

• MethodChain UI 정식 버전은 2009년 12월 1일에 발표할 예정입니다.
• 정식 버전에는 다음 내용이 포함됩니다.
• - RC1에 포함되지 않은 예제
• - 주석이 포함된 클래스 단위의 소스 코드
• - MethodChain의 발전 방향, 사상, 아키텍처와 메커니즘 설명
• - 2.1 버전 로드맵
• - 라이센스 정책 및 가격

• ** 아래 예제는 별도로 프로그램을 개발하지 않고 MethodChain 기능만으로 개발한 것입니다.
• - 서버에서 받은 데이터는 상품명, 수량, 단가, 할인율 코드입니다.
• - 할인율 코드에 해당하는 radio를 checked 상태로 설정하였으며
• - Calculator 메커니즘을 적용하여 산출금액에서 부가세포함까지를 클라이언트에서 산출한 것입니다.

• ** 아래 예제는 Grid Entry로 다수의 데이터를 입력할 수 있습니다.
• - Operator 메커니즘을 적용하여 산출금액과 할인금액을 체크하고 메시지를 표시하였습니다.
• - 수량과 단가를 입력할 때마다 산출금액, 판매금액, 부가세, 부가세포함을 자동으로 계산합니다.
• - 이 모든 것을 위해 별도로 프로그램을 개발하지 않아도 됩니다.

썬마이크로시스템즈에서 자바 에반젤리스트로 활동 중이시며, 한국에도 방한하여 JCO Conference 등에서 열정적인 강의를 선보이셨던 신상철씨가 오는 8월 4일부터 10주간 AJAX 무료 온라인 강좌를 진행합니다.
국내 개발자 여러분들의 많은 참여 바랍니다.
(본 강좌는 전세계 개발자 대상이므로 영어로 진행됩니다.)

2006년 8월 4일에 “AJAX Programming” 무료 온라인 코스(10주 과정)가 시작됩니다. AJAX를 처음 배우시는 분이나, 실력을 더 쌓고 싶으신 분 모두 수강하실 수 있습니다. 10주의 코스 동안 AJAX의 기본 컨셉부터 Dojo 툴킷, jMAki, Google Web Toolkit, AJAX-fied JavaServer Faces (JSF) components와 같은 다양한 AJAX 프레임웍과 툴킷의 사용법까지 모두 배우게 됩니다.

이 코스는 온라인상에서 진행된다는 것과 무료라는 것을 제외하면 실제 대학 수업처럼 진행됩니다. 프레젠테이션 자료를 공부한 뒤에는 매주 과제가 나가며, 모르는 것을 서로 질문/답변할 수 있도록 수강생 메일링 리스트가 제공됩니다. 수업에 필요한 모든 강의자료(슬라이드, 강의노트, 플래쉬 데모 파일, 실습 자료, 과제물 등 포함)는 웹사이트에서 제공됩니다. 아래 주소로 내용이 없는 이메일을 하나 보내시면 바로 자동으로 등록하실 수 있습니다.
ajaxworkshop-subscribe@yahoogroups.com
본 강의의 신청 기한은 없으며, 강좌가 끝나기 전까지 등록하시면 됩니다. 단, 과제를 모두 제출하셔야 수강한 것으로 인정됩니다.
FAQ는 아래 링크에서 확인하시기 바라며, 그 외 문의는 SKDN@Sun.COM(한글 문의 가능)으로 보내주시기 바랍니다.

	강좌 바로가기» http://www.javapassion.com/ajaxcodecamp/
	FAQ» http://www.javapassion.com/ajaxcodecamp/coursefaq.html
	신상철씨 약력 및 2006 JCO Conference 컨퍼런스 발표자료 보기»

=============================================================================

AJAX : A Basic Example and a Bookmarklet
Okay now what you all been waiting for: my example on AJAX. Waring: I am not going to go into extreme detail; you can get Dave Crane’s and my book (AJAX in Action) for that when it comes out later this year. First lets see an example of AJAX working right here under our noses.

Now everyone in a JavaScript world says. How can I protect my pages with a username and password without a server side language? Well it can not be done, but you can make it hard to find your content. In this example below you can see a textbox, a password box and the wonderful submit button. Try entering in a username and password.

Look at the source and you will see there is no username and password. Instead we are using the username and password field to see if the file exists. With AJAX, we look to see if this file is there. If it is, we go there, if not we get the error. Well I am sure you want to see the location so the username is Eric and the password is pass. Now you are able to go there and see my message.

So what is the code to do this? Well now we all know the fun we have coding JavaScript, nothing works the same for different browsers. With IE we need to use ActiveX to do it. Mozilla has there own method to do it.

First we have two things. We have the code that does the request, and then we have a function that handles the returned data. If you are using one of those libraries, you may not have seen this, so open up your eyes wide. Now I am just going to explain the code with comments. (Yeah that is cheating compared to my normal discussion style here on my blog, but I am trying to write a book you know!)

<html>
  <head>
    <script type="text/javascript">

      //We need a wonderful global variables to hold our request object!
      //So we can pass it around.
      var reqXML;
      //We need to have a global variable to hold the url.
      //It keeps us from having to repeat code!
      var url;

      //Create our function to start the request
      function VerifyLogin(){

        //inform there is an action!
        document.getElementById("spanLog").innerHTML = "<span style='color:green'> Checking Information</span>";

        //Grab our form field values
        var strName = document.Form1.username.value;
        var strPass = document.Form1.password.value;
        
        //Make the URL for the request
        url = "http://radio.javaranch.com/pascarello/files/" + strName + strPass + ".html";

        //determine if the browser is Moz, FF, NN, Op
        if (window.XMLHttpRequest){ 
          reqXML = new XMLHttpRequest();            //set the request
          reqXML.onreadystatechange = LoginUser;    //function to call on each set
          reqXML.open("GET", url, true);            //set the page to request
          reqXML.send(null);                        //initialize the request 
        }
        //ActiveX - can we say IE?
        else if(window.ActiveXObject){ 
          //Create our RequestObject
          reqXML = new ActiveXObject("Microsoft.XMLHTTP"); 
          if(reqXML){ 
            reqXML.onreadystatechange = LoginUser  //function to call on each step
            reqXML.open("GET", url, true);         //set the page to request
            reqXML.send(null);                     //initialize the request
          }
        }
        else{  //I do not support this so I need to do something!
           window.location.href = url;
        }       
      }
          
      function LoginUser(){

        //Look to see if the request is in the 4th stage (complete)         
        if(reqXML.readyState == 4){
          //Make sure that we get a sucess page status   
          if(reqXML.status == 200){
            //change our location
            window.location.href = url;
          }
          //For all of the wrong error pages here
          else{
            document.getElementById("spanLog").innerHTML = "<span style='color:red'> Error: username and password is not correct!</span>";
          }
        }
      }
    </script>
  </head>
  <body>
    <form name="Form1" onsubmit="VerifyLogin();return false;">
      <span style="font-family:courier">User Name: </span><input type="text" name="username"><br/>
      <span style="font-family:courier">Password:  </span><input type="password" name="password"><br/>
      <input type="submit" name="btnSub" value="Login" style="font-family:courier">
    </form>
  </body>
</html>

Now I added the event handler to the form to allow us to submit it, I did not think that needed a comment! Now you may be wondering what some things actually mean.

Now the XMLHttpRequest Object has an event handler onreadystatechange that we set to call LoginUser. Now when the XMLHttpRequest is executed we go through 5 stages:

• 0 - un-initialized
• 1 - loading
• 2 - loaded
• 3 - interactive
• 4 - complete

We also need to check the status of the document that has been returned. We are looking for a status code of 200 since that means success! We do not want to see that 404 error!

I know I just went over this fast, but you can get more details in AJAX in Action when it comes out. But you may be saying why would I ever want to use this? Well with some minor changes, creating a JS file, and creating a bookmarklet, we can make a very very very very (did I say very) useful tool for a web master that has to check pages to see if all of the links are correct.

Let’s try this out then I will give you the source code. The first step is create a bookmarklet. Take the link below, right click on it, and save it as a bookmark. Agree to the security warning because the link is a JavaScript statement that executes some code. You will be shown the code for the bookmark on the example page.

Verify Links!

After you bookmarked that link above, you need to do open up this link below, go to your bookmarks/favorites and select the one that you just saved. It will then got through all of the links and verify them if they are good or bad. Good is marked in green and bad are marked in red! Give this code to your webmaster!

The test page for you.

There are good and bad links for you!

Now have you seen anyone else use AJAX like this? I do not think so. Hopefully you can see why AJAX is not hype. You can make it do things that you can run from a command in your bookmarks! Now below is the source code so you can save it to your server. Change the bookmark to point to where you saved this document.

      //Set those global variables!
      var reqXML;
      var url;
      var arrLinks;
      var intErrors = 0;
      var currentLink = 0; //We need a counter!
      var timeOutTimer;
      var maxWaitTime = 10000; //Milliseconds!
      var strErrColor = "red";
      var strValidColor = "green";

      function TestThatLink(){
        window.status = "testing: " + url.href;
        timeOutTimer = setTimeout("reqXML='';intErrors++;FinishRequest('" + strErrColor + "');",maxWaitTime);
        try {
	  if (netscape.security.PrivilegeManager.enablePrivilege) {
		netscape.security.PrivilegeManager.enablePrivilege('UniversalBrowserRead');
	  }
        }
        catch (ex) { // eat it
        }
        if (window.XMLHttpRequest){ 
          reqXML = new XMLHttpRequest(); 
          reqXML.onreadystatechange = TestLink;
          reqXML.open("GET", url.href, true); 
          reqXML.send(null);
        }
        else if(window.ActiveXObject){ 
          reqXML = new ActiveXObject("Microsoft.XMLHTTP"); 
          if(reqXML){ 
            reqXML.onreadystatechange = TestLink;
            reqXML.open("GET", url.href, true); 
            reqXML.send(); 
          } 
        }
        else{
          alert("Test browser does not support this!");
        }       
      }
          
      function TestLink(){         
        try {
	  if (netscape.security.PrivilegeManager.enablePrivilege) {
		netscape.security.PrivilegeManager.enablePrivilege('UniversalBrowserRead');
	  }
        } 
        catch (ex) { // eat it
        }
        if(reqXML.readyState == 4){
          window.clearTimeout(timeOutTimer);
          try {
          if(reqXML.status == 200){
            strColor = strValidColor; 
          }
          else{
            strColor = strErrColor;
            intErrors++;
          }
          }
          catch(ex){
            strColor = strErrColor;
            intErrors++;
          }

          FinishRequest(strColor);
        }
      }

      function FinishRequest(xColor){
        window.clearTimeout(timeOutTimer);
        url.style.backgroundColor = xColor;
        currentLink++;
        if(arrLinks.length > currentLink){
          url = arrLinks[currentLink];
          TestThatLink();
        }
        else{
          alert(intErrors + " broken link(s) were found!");
          window.status = "done";
        }
      }

      arrLinks = document.links;  //Grab those Links
      url = arrLinks[currentLink];  //Get the link

      TestThatLink()

Hopefully you can understand what is going on in the code. We are grabbing all of the links, checking to see if they exist, and showing the result on the page. See AJAX does not need to use server side code like everyone says! If you want to understand more about this code, ask away in the comments in this page. (If I do not answer, it is because I am sitting on the beach!)

Now it is Friday, so I think we need to put your brain to rest until Monday where we will talk about AJAX with server side code! But if you want to see a Moderator’s game that uses AJAX, take a look at Bear’s Blackbox here: Blackbox. Or you can sit back and play my JavaScript game (no AJAX) until my bandwidth is used up: Reversi.

Eric Pascarello
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for Dynamic Web Pages

1. Ajallerix : AJAX, simple, fast Web image gallery demo ; at Novell
2. AJAX - microlink pattern tutorial : A microlink is a link that opens up content below it.
3. Ajax BBC News RSS Reader : demo by Nigel Crawley
4. AJAX Chat in Python with Dojo : at AquaAjax
5. Ajax Chess : multiplayer chess
6. Ajax examples at BackBase : examples demonstrating several aspects of the Backbase technology.
7. Ajax examples at Rico : Inner HTML, JavaScript updater etc.
8. Ajax examples using ColdFusionMX, SQLServer, SOAP : Contact Manager, NOAA 7 Day Forecast code and demos.
9. Ajax Feed TV : News feed
10. Ajax inline dictionary : Highlight any text on this site then right click. A tooltip containing the definition of the selected word should show up.
11. Ajaxload : Ajax loading gif generator.
12. Ajax Login Demo : Creating a secure login system using XMLHttpRequest
13. Ajax Newsletter Signup : A newsletter signup form that shows Thank You on the same page.
14. ajaxProject : Project Management applicaiton with rich UI
15. Ajax Rater : A star rating system that uses Ajax.
16. AJAX-S : An Ajax-based slideshow system.
17. AJAX Spell Checker : spell check text / form content.
18. Ajax Toolbox : Tools for the Ajax Developer
19. Amazon Catalog Tree : Amazon Catalog Tree
20. Amazon Zuggest : Amazon product suggestion (like google suggest)
21. Askeet by symfony : Digg-like AJAX interactions; open source
22. Backbase - Ajax Demos : Ajax demos at BackBase
23. Basic Ajax Examples : Ping, track changes, drop down, Google suggest hack etc at Clearnova
24. Behaviour : Fading lists, Sortable lists, Dropout boxen, Shaky lists
25. chat.app : ajax chat
26. Chihuahua Word Puzzle : daily word puzzles
27. Coloir : Ajax Slideshow
28. DHTML arcade/action games : a collection that demonstrate the power of DHTML
29. DomAPI : Windows Desktop, Outlook-like, RSS Reader
30. Drag and Drop Shopping Cart Demo : at CyberDummy
31. Easy AJAX inline text edit 2.0 : edit a piece of text inline
32. FileChucker : File upload and progress bar at Encodable.com
33. Gmail Style Check Username AJAX Demo : at CyberDummy
34. Google Web Toolkit Example Projects : Hello World, Dynamic Table, Desktop App Clone etc
35. GreyBox : Pop up window using idea of light box.
36. FiftyFourEleven: Ajax Examples
37. IntuiCat - ajax Catalogue : Ajax-based Catalogue Demo
38. jsLINB programming demos : LINB(Lazy INternet and Browser)
39. JSlog : Ajax logging tool.
40. JS/UIX Unix Shell : JS/UIX is an UN*X-like OS for standard web-browsers, written entirely in JavaScript.
41. Lace : free web chat application
42. Lightbox : simple, unobtrusive script used to overlay images on the current page.
43. Leightbox : Light Box with inline div’s instead of AJAX calls.
44. Live Quote Demo : Simple way of creating an updating stock quote table in ajax.
45. Magnetic Poetry : drag and drop poetry
46. Metatron Chat Engine : PHP/MySQL/JavaScript powered chat engine
47. Monket Calendar : online calendar
48. Multi List Drag Drop Demo : at CyberDummy
49. NetDirector : open and extensible framework for managing configurations of common open source network services.
50. nexImage : Image processing demo
51. Opera Platform : Enabling AJAX applications on mobile phones
52. Orbeon examples : various examples illustrating the capabilities of OPS, from the OPS Tutorial examples to XForms examples
53. OVO Suite : Online Virtual Office : virtual office limited demo
54. phpFreeChat : php Free Chat
55. S5: A Simple Standards-Based Slide Show System : S5 is a slide show format based entirely on XHTML, CSS, and JavaScript.
56. script.aculo.us Reflector : image reflector script that uses uses opacity-based fades
57. Slider Bar Demo : at CyberDummy
58. SmallestAjax : Smallest Ajax example in the world?
59. Spell Check demo : by Primal Grasp
60. Super Maryo World : Japanese game demo
61. Tacos : Tacos provides a library of useful Tapestry components. This application provides some examples to get you started.
62. theList : to-do list / bug-tracker
63. ThickBox : ThickBox is a Lightbox than can show html pages as well as images.
64. Tooltip.js : Tooltip.js is a simple class to make it possible to add tooltips to your page.
65. Treehouse Chat : ajax chat
66. Tudu Lists : open-source to-do lists
67. WeBoggle : Ajax Boggle
68. XHTML live Chat : ajax chat
69. YahooSearchAsYouType : Yahoo search as you type
70. ZK Demo : demo programs for various components

These examples demonstrate JavaScript used together with XML (AJAX).

Examples Using the XMLHttpRequest Object

Load a textfile into an HTML element with XML HTTP
How to use an XMLHttpRequest to retrieve new content in an HTML element.

Load an XML file with XML HTTP
How to send an XMLHttpRequest to retrieve data when the user clicks a button.

Make a HEAD request with XML HTTP
How to send an XMLHttpRequest to retrieve HTML header data.

Make a specified HEAD request with XML HTTP
How to send an XMLHttpRequest to retrieve a specific part of the HTML header data.

Display an XML file as an HTML table
How to display an XML file as an HTML table

Examples Explained

Using XMLHttp when user types in an input field:

Online communication with server while typing input using XML HTTP

Example Explained

While responseText returns the HTTP response as a string, responseXML returns the response as XML.

The ResponseXML property returns an XML document object, which can be examined and parsed using W3C DOM node tree methods and properties.

AJAX ResponseXML Example

In the following AJAX example we will demonstrate how a web page can fetch information from a database using AJAX technology. The selected data from the database will this time be converted to an XML document, and then we will use the DOM to extract the values to be displayed.

Select a Name in the Box Below

AJAX Example Explained

The example above contains an HTML form, several <span> elements to hold the returned data, and a link to a JavaScript:

<html>
<head>
<script src="selectcustomer_xml.js"></script>
</head>
<body>

<form action=""> 
Select a Customer:
<select name="customers" onchange="showCustomer(this.value)">
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>

<b><span id="companyname"></span></b><br />
<span id="contactname"></span><br />
<span id="address"></span>
<span id="city"></span><br/>
<span id="country"></span>

</body>
</html>

The example above contains an HTML form with a drop down box called "customers".

When the user selects a customer in the dropdown box, a function called "showCustomer()" is executed. The execution of the function is triggered by the "onchange" event. In other words: Each time the user change the value in the drop down box, the function showCustomer() is called.

The JavaScript code is listed below.

The AJAX JavaScript

This is the JavaScript code stored in the file "selectcustomer_xml.js":

var xmlHttp

function showCustomer(str)
{ 
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  }
var url="getcustomer_xml.asp";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged() 
{ 
if (xmlHttp.readyState==4)
{
var xmlDoc=xmlHttp.responseXML.documentElement;
document.getElementById("companyname").innerHTML=
xmlDoc.getElementsByTagName("compname")[0].childNodes[0].nodeValue;
document.getElementById("contactname").innerHTML=
xmlDoc.getElementsByTagName("contname")[0].childNodes[0].nodeValue;
document.getElementById("address").innerHTML=
xmlDoc.getElementsByTagName("address")[0].childNodes[0].nodeValue;
document.getElementById("city").innerHTML=
xmlDoc.getElementsByTagName("city")[0].childNodes[0].nodeValue;
document.getElementById("country").innerHTML=
xmlDoc.getElementsByTagName("country")[0].childNodes[0].nodeValue;
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}

The showCustomer() and GetXmlHttpObject() functions above are the same as in previous chapters. The stateChanged() function is also used earlier in this tutorial, however; this time we return the result as an XML document (with responseXML) and uses the DOM to extract the values we want to be displayed.

The AJAX Server Page

The server page called by the JavaScript, is a simple ASP file called "getcustomer_xml.asp".

The page is written in VBScript for an Internet Information Server (IIS). It could easily be rewritten in PHP, or some other server language. Look at a corresponding example in PHP.

The code runs an SQL query against a database and returns the result as an XML document:

<%
response.expires=-1
response.contenttype="text/xml"

sql="SELECT * FROM CUSTOMERS "
sql=sql & " WHERE CUSTOMERID='" & request.querystring("q") & "'"

on error resume next
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql, conn

if err <> 0 then
response.write(err.description)
set rs=nothing
set conn=nothing
else
response.write("<?xml version='1.0' encoding='ISO-8859-1'?>")
response.write("<company>")
response.write("<compname>" &rs.fields("companyname")& "</compname>")
response.write("<contname>" &rs.fields("contactname")& "</contname>")
response.write("<address>" &rs.fields("address")& "</address>")
response.write("<city>" &rs.fields("city")& "</city>")
response.write("<country>" &rs.fields("country")& "</country>")
response.write("</company>")
end if
on error goto 0
%>

Notice the second line in the ASP code above: response.contenttype="text/xml". The ContentType property sets the HTTP content type for the response object. The default value for this property is "text/html". This time we want the content type to be XML.

Then we select data from the database, and builds an XML document with the data.

AJAX can be used for interactive communication with a database.

AJAX Database Example

In the AJAX example below we will demonstrate how a web page can fetch information from a database using AJAX technology.

Select a Name in the Box Below

AJAX Example Explained

The example above contains a simple HTML form and a link to a JavaScript:

<html>
<head>
<script src="selectcustomer.js"></script>
</head>

<body>

<form> 
Select a Customer:
<select name="customers" onchange="showCustomer(this.value)">
<option value="ALFKI">Alfreds Futterkiste
<option value="NORTS ">North/South
<option value="WOLZA">Wolski Zajazd 
</select>
</form>

<p>
<div id="txtHint"><b>Customer info will be listed here.</b></div>
</p>

</body>
</html>

As you can see it is just a simple HTML form with a drop down box called "customers".

The paragraph below the form contains a div called "txtHint". The div is used as a placeholder for info retrieved from the web server.

When the user selects data, a function called "showCustomer()" is executed. The execution of the function is triggered by the "onchange" event. In other words: Each time the user change the value in the drop down box, the function showCustomer is called.

The JavaScript code is listed below.

The AJAX JavaScript

This is the JavaScript code stored in the file "selectcustomer.js":

var xmlHttp

function showCustomer(str)
{ 
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  } 
var url="getcustomer.asp";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged() 
{ 
if (xmlHttp.readyState==4)
{ 
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}

The AJAX Server Page

The server page called by the JavaScript, is a simple ASP file called "getcustomer.asp".

The page is written in VBScript for an Internet Information Server (IIS). It could easily be rewritten in PHP, or some other server language. Look at a corresponding example in PHP.

The code runs an SQL against a database and returns the result as an HTML table:

<%
response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & "'" & request.querystring("q") & "'"

set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs = Server.CreateObject("ADODB.recordset")
rs.Open sql, conn

response.write("<table>")
do until rs.EOF
  for each x in rs.Fields
    response.write("<tr><td><b>" & x.name & "</b></td>")
    response.write("<td>" & x.value & "</td></tr>")
  next
  rs.MoveNext
loop

response.write("</table>")
%>

AJAX Source Code to Suggest Example

The source code below belongs to the AJAX example on the previous page.

You can copy and paste it, and try it yourself.

The AJAX HTML Page

This is the HTML page. It contains a simple HTML form and a link to a JavaScript.

<html>
<head>
<script src="clienthint.js"></script> 
</head>
<body>

<form> 
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>

<p>Suggestions: <span id="txtHint"></span></p> 

</body>
</html>

The JavaScript code is listed below.

The AJAX JavaScript

This is the JavaScript code, stored in the file "clienthint.js":

var xmlHttp

function showHint(str)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML="";
  return;
  }
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  } 
var url="gethint.asp";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
} 

function stateChanged() 
{ 
if (xmlHttp.readyState==4)
{ 
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}

The AJAX Server Page - ASP and PHP

There is no such thing as an AJAX server. AJAX pages can be served by any internet server.

The server page called by the JavaScript in the example from the previous chapter is a simple ASP file called "gethint.asp".

Below we have listed two examples of the server page code, one written in ASP and one in PHP.

AJAX ASP Example

The code in the "gethint.asp" page is written in VBScript for an Internet Information Server (IIS). It just checks an array of names and returns the corresponding names to the client:

<%
response.expires=-1
dim a(30)
'Fill up array with names
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Gunda"
a(8)="Hege"
a(9)="Inga"
a(10)="Johanna"
a(11)="Kitty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophelia"
a(15)="Petunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20)="Eve"
a(21)="Evita"
a(22)="Sunniva"
a(23)="Tove"
a(24)="Unni"
a(25)="Violet"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"

'get the q parameter from URL
q=ucase(request.querystring("q"))

'lookup all hints from array if length of q>0
if len(q)>0 then
  hint=""
  for i=1 to 30
    if q=ucase(mid(a(i),1,len(q))) then
      if hint="" then
        hint=a(i)
      else
        hint=hint & " , " & a(i)
      end if
    end if
  next
end if

'Output "no suggestion" if no hint were found
'or output the correct values
if hint="" then 
  response.write("no suggestion")
else
  response.write(hint)
end if
%>

AJAX PHP Example

The code above rewritten in PHP.

Note: To run the entire example in PHP, remember to change the value of the url variable in "clienthint.js" from "gethint.asp" to "gethint.php".

PHP Example

<?php
header("Cache-Control: no-cache, must-revalidate");
 // Date in the past
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

// Fill up array with names
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";

//get the q parameter from URL
$q=$_GET["q"];

//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
  $hint="";
  for($i=0; $i<count($a); $i++)
  {
  if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
    {
    if ($hint=="")
      {
      $hint=$a[$i];
      }
    else
      {
      $hint=$hint." , ".$a[$i];
      }
    }
  }
}

// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}

//output the response
echo $response;
?>

Introduction

This document describes a simple approach of implementing AJAX functionality in ASP.NET web applications. Pros and cons of using AJAX are also discussed. The document contains a working JavaScript and C#.NET code demonstrating the suggested solution.

Why AJAX

Most of you already know that AJAX stands for Asynchronous JavaScript and XML. This technology was introduced first by Microsoft (from my best knowledge) back in 1999, and had been known as “DHTML / JavaScript web application with remote calls”. The whole idea of the technology was to allow an internet browser to make an asynchronous HTTP call to remote pages/services, and update a current web page with the received results without refreshing the whole page. By creators’ opinion, this should have improved customers’ experience, making HTTP pages look and feel very similar to Windows applications.

Because the core implementation of this technology was based on internet browser functionality, the usability was very limited at that time. But several years later, the technology has been reborn with new browsers support and massive implementation by such giants as Google, Amazon.com, eBay, etc.

Today, it’s known as AJAX, and considered as a natural part of any dynamic web page with advanced user experience.

Solution Description

The suggested approach provides a very simple, yet effective implementation of the AJAX functionality. It’s very easy to maintain and change, does not require any special skills from developers, and, from our best knowledge, is cross-browser compatible.

Basically, a regular AJAX-like implementation includes two main components: a client HTML page with JavaScript code making an AJAX call and receiving a response, and a remote page that can accept a request and respond with the required information. The JavaScript code on the client page is responsible for instantiating an XmlHttp object, then providing this object with a callback method which will be responsible for processing the received information, and finally, sending a request to the remote page via the XmlHttp object. All this is done by the JavaScript code.

Our approach is intended for use in ASP.NET applications, and considers the following possible scenarios:

• AJAX calls may be performed on different ASP.NET pages of the web application to different remote pages;
• A remote page URL may contain dynamically calculated parameters, and it may be more convenient to build a URL string in the code-behind of the ASP.NET page;
• A remote page may respond with a complex data requiring parsing before updating an HTML page, that once again may be done in the code-behind of the ASP.NET page;
• A remote page may be either an external third party page, or the web application’s own page or service.

All these considerations are illustrated by the diagram below:

Implementation

Basic AJAX JavaScript methods

I divided all the JavaScript methods into two parts: calling page specific JavaScript methods, and AJAX JavaScript methods common for all the calling pages. Specific methods include a callback method as well, as it is responsible for updating the page content. Common AJAX methods are responsible for instantiating an XmlHttp object and sending an asynchronous request to the remote page.

Getting an XmlHttp object differs depending on the type of the browser. I distinguish two basic types: a Microsoft browser which is one of the IE family, and a Mozilla browser which is one of Mozilla Firefox, Netscape, or Safari. I tested the code with the Opera browser too, but I would not guarantee that it will always be working well.

Collapse

function GetXmlHttpObject(handler)
{ 
    var objXmlHttp = null;
    if (!window.XMLHttpRequest)
    {
        // Microsoft
        objXmlHttp = GetMSXmlHttp();
        if (objXmlHttp != null)
        {
            objXmlHttp.onreadystatechange = handler;
        }
    } 
    else
    {
        // Mozilla | Netscape | Safari
        objXmlHttp = new XMLHttpRequest();
        if (objXmlHttp != null)
        {
            objXmlHttp.onload = handler;
            objXmlHttp.onerror = handler;
        }
    } 
    return objXmlHttp; 
} 

function GetMSXmlHttp()
{
    var xmlHttp = null;
    var clsids = ["Msxml2.XMLHTTP.6.0","Msxml2.XMLHTTP.5.0",
                 "Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0", 
                 "Msxml2.XMLHTTP.2.6","Microsoft.XMLHTTP.1.0", 
                 "Microsoft.XMLHTTP.1","Microsoft.XMLHTTP"];
    for(var i=0; i<clsids.length && xmlHttp == null; i++) {
        xmlHttp = CreateXmlHttp(clsids[i]);
    }
    return xmlHttp;
}

function CreateXmlHttp(clsid) {
    var xmlHttp = null;
    try {
        xmlHttp = new ActiveXObject(clsid);
        lastclsid = clsid;
        return xmlHttp;
    }
    catch(e) {}
}

According to Umut Alev, the code for the GetMSXmlHttp method can be simplified considering that we do not have to refer MSXML5 as it has been designed only for Office applications. Correspondingly, the simplified revision of the GetMSXmlHttp method may look as follows:

function GetMSXmlHttp() {
    var xmlHttp = null;
    var clsids = ["Msxml2.XMLHTTP.6.0",
                  "Msxml2.XMLHTTP.4.0",
                  "Msxml2.XMLHTTP.3.0"];
    for(var i=0; i<clsids.length && xmlHttp == null; i++) {
        xmlHttp = CreateXmlHttp(clsids[i]);
    }
    return xmlHttp;
}

As you see, GetXmlHttpObject methods accept a handler parameter which is a name of the callback method that should be defined in the page-specific code. Now that we already have an XmlHttp object, we can send an asynchronous request.

function SendXmlHttpRequest(xmlhttp, url) { 
    xmlhttp.open('GET', url, true); 
    xmlhttp.send(null); 
}

I use a GET HTTP method to a given URL, but this can be easily changed by changing the JS code above.

Page-specific methods

Now we have all the methods we need to perform a call to the remote page. In order to do this, we need to pass the callback method name to the GetXmlHttpObject method and then pass the URL string to the SendXmlHttpRequest method.

Collapse

var xmlHttp; 

function ExecuteCall(url)
{ 
    try 
    { 
        xmlHttp = GetXmlHttpObject(CallbackMethod); 
        SendXmlHttpRequest(xmlHttp, url); 
    }
    catch(e){} 
} 
    
//CallbackMethod will fire when the state 
//has changed, i.e. data is received back 
function CallbackMethod() 
{ 
    try
    {
        //readyState of 4 or 'complete' represents 
        //that data has been returned 
        if (xmlHttp.readyState == 4 || 
            xmlHttp.readyState == 'complete')
        {
            var response = xmlHttp.responseText; 
            if (response.length > 0)
            {
                //update page
                document.getElementById("elementId").innerHTML 
                                                   = response; 
            } 
        }
    }
    catch(e){}
}

The CallbackMethod is responsible for updating the page content. In our example, it simply updates the inner HTML of the given HTTP element. But in real life, it can be much more complex.

The last question regarding the calling page implementation is how we call the ExecuteCall JS method. Well, it depends on what the page is doing. In some cases, the ExecuteCall method can be called when the JS event is fired. But if that is not the case, we can register the method as a startup script for the page using the corresponding C# code in the page's code-behind.

Page.RegisterStartupScript("ajaxMethod", 
   String.Format("<script>ExecuteCall('{0}');</script>", url));

We can add this line of code either in the Page_Prerender or Page_Load method of the ASP.NET code-behind file.

Remote Page

Let’s find out what a remote page could look like. If this is an ASP.NET page (what we assume), we are interested in the code-behind only. We can easily remove all the code from the .aspx file: it won’t affect the behavior of the page in any way.

For example, we take a public web service that converts temperature values in Celsius to Fahrenheit and vice versa. The service is available here. If you add this URL as a web reference to your project, Visual Studio will generate a proxy class with the name com.developerdays.ITempConverterservice in your current namespace. Our remote ASP.NET page, let’s name it getTemp.aspx, will accept a query string parameter with the name “temp” which should contain an integer value of a temperature in Celsius to convert. So the target URL to the remote page will look like this: http://localhost/getTemp.aspx?temp=25. And the code-behind for this page is shown below:

private void Page_Load(object sender, EventArgs e)
{
    Response.Clear();
    string temp = Request.QueryString["temp"];
    if (temp != null)
    {
        try
        {
            int tempC = int.Parse(temp);
            string tempF = getTempF(tempC);
            Response.Write(tempF);
        }
        catch
        {
        }
    }
    Response.End();
}

private string getTempF(int tempC)
{
    com.developerdays.ITempConverterservice 
          svc = new ITempConverterservice();
    int tempF = svc.CtoF(tempC);
    return tempF.ToString();
}

According to our convention, we can now build a URL string for the remote page that we will pass to the RegisterStartupScript method in the example above, like this:

int tempC = 25;
string url = String.Format("http://localhost/" + 
             "getTemp.aspx?temp={0}", tempC);

Using the approach with an intermediate ASP.NET page, calling in its turn a remote service, allows simplifying response processing, especially if it requires parsing. In simple cases when the response contains just text, we can pass the remote service URL directly to the JS ExecuteCall method.

Conclusion

This article is aimed to illustrate the simplicity of using the AJAX technology in any ASP.NET application. While AJAX has some drawbacks, it also provides some advantages from the user experience perspective. It’s completely up to the developer whether to use the AJAX technology or not, but I have just demonstrated that in simple cases, it does not take a long time or require any special skills.

Credits

I would like to thank my colleagues Oleg Gorchkov and Chris Page who helped me out with testing and optimizing the approach described in the article.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Alexander Turlov

Alexander Turlov has been working in IT industry since 1987. His programming experience includes such languages as FORTRAN, Pascal, and Basic, C, C++ and C#. He's been working for different industries like science, manufacturing, retail, utilities, finance, insurance, health care, education and so on. His current area of interests is .NET, C#, and ASP.NET programming. He is working in software development doing architecture, design and development on .NET platform and using Microsoft products such as Visual Studio, SQL Server, P&P Software Factories, and Enterprise Library. He holds a M.Sc. degree in physics and an MCSD.NET certification. View my profile on LinkedIn View my blog Occupation: Architect Location: Canada

Other popular Ajax and Atlas articles: Build Google IG like Ajax Start Page in 7 days using ASP.NET Ajax and .NET 3.0 Build a start page similar to Google IG in 7 nights using ASP.Net Ajax, .NET 3.0, Linq, DLinq and XLinq. An Introduction to AJAX Techniques and Frameworks for ASP.NET This article introduces AJAX to ASP.NET developers, implementing an example web page in different ways using ASP.NET Atlas, ASP.NET callbacks, Ajax.Net, Anthem.Net, and MagicAjax.Net. ASP.NET Ajax Under-the-hood Secrets Performance tips and hard-core tricks that change core runtimes, not for the faint-hearted Introduction to Anthem.NET How to do AJAX without writing any JavaScript. Dropdown Box Using AJAX This article illustrates two dropdown-boxes with nations and states. When selecting a particular nation, the corresponding states will be in the states dropdownbox.

http://code.google.com/apis/ajaxsearch/samples.html

Google AJAX Search API Samples

Simple Hello World

This sample application is the canonical "Hello World" of Google AJAX Search API. This simple application instantiates the search control in read-only mode.

Custom Search EnginesNew!

This sample demonstrates how to use Google Custom Search Engines in conjunction with the Google AJAX Search API. The sample integrates four custom search engines along with blog, video, and news search.

Video Bar SolutionNew!

This sample demonstrates the brand new GSvideoBar() solution. This is a very light weight solution that allows you to place a dynamic video bar vertically or horizontally on your page or blog. You can have multiple Video Bars on a page, all sharing a common video player. The Video Bar also composes nicely with the Video Search Control Solution. Take a look, and be sure to also visit our AJAX Search API Playground blog where we have integrated the Video Bar into the template.

Google AJAX Search API in TypePad

This sample demonstrates the use of the Google AJAX Search API including core web and blog search, the video search solution, and the map search control solution, all hosted in a TypePad blog. The sample includes links to the TypePad module templates and instructions for applying this to your own TypePad based blog.

Google AJAX Search API in Blogger

Identical to the TypePad based solution, but designed for Blogger

Video Search Control Solution

This sample demonstrates the brand new GSvideoSearchControl() solution. This solution allows you to easily embed a rich video search control on your site, blog, etc. The control lets you search, tag, and play videos without leaving the page. The page is very easy to integrate into your applications and can be integrated in just a few lines of code. Feel free to copy and clone the solution to meet your needs, or use it as it stands.

Map Search Solution

This sample uses the brand new GSmapSearchControl() solution to show you how to add a a simple geo-oriented search control anywhere on your site with just a few lines of code. Feel free to copy and clone the solution to meet your needs, or use it as it stands. The sample linked to above demonstrates how to use it. If you can write this, new GSmapSearchControl(container, "1000 NE Multnomah, Portland, OR");, then you can easily add a nice little local search control to your site.

Phone List

This sample demonstrates how to build a "Phone List" of favorite restaurants, etc, using the Google Ajax Search API.

Blog Comment Form

This sample application demonstrates how you can incorporate the AJAX Search API in user composition. In this case, users can clip Google search results to their comments on a blog post.

My Favorite Places

This sample application shows how to to use the Google AJAX Search API to create a collection of favorite places. From a programming perspective, it demonstrates the use of a custom input element and direct use of GSearch objects.

Searchers and Options

This sample application demonstrates many of the programmable options of the Search Control, allowing you to select various searchers, drawing modes, etc.

Locale Selection

This sample application demonstrates the Google AJAX Search API running its UI in a variety of languages.

My Favorite Places #2

This sample application builds on the original My Favorite Places sample and is designed to demonstrate search result and search control dynamic styling, controlling the location of clipped search results, etc. Before diving into this sample, if would be a good idea to become familiar with the previous samples.

Wish List

Similar to the Lead Manager sample, this sample demonstrates building more complex lists, something like a "what I want for christmas list, or what I want for my birthday." This sample deomstrates search result clipping as well as site restricted search.

Video Search + Social Networks

This sample demonstrates how video search might integrate into social networking applications. Note the use of search result clipping to add a little video into a message as well as the ability to remember a search result into a stack of favorites.