Study of AJAX

Generally, Ajax is HTML、JavaScript™、DHTML and DOM

1, XMLHttpRequest :
As a result of the browser war several years ago, we should create it's instance as follows:

 1            var xmlHttpObject = null;
 2            try {
 3                // Firefox, Opera 8.0+, Safari
 4                xmlHttpObject = new XMLHttpRequest();
 5            }
 6            catch (ex) {
 7                // Internet Explorer
 8                try {
 9                    xmlHttpObject = new ActiveXObject('Msxml2.XMLHTTP');
10                }
11                catch (ex) {
12                    xmlHttpObject = new ActiveXObject('Microsoft.XMLHTTP');
13                }
14            }

The function it provides:

open()：建立到服务器的新请求。

send()：向服务器发送请求。

abort()：退出当前请求。

readyState：提供当前 HTML 的就绪状态。

responseText：服务器返回的请求响应文本。

 

 1   sendRequest: function() {
 2      if (this.getOsType() != "Firefox") {
 3          if ( window.netscape && window.netscape.security.PrivilegeManager.enablePrivilege)
 4         netscape.security.PrivilegeManager.enablePrivilege('UniversalBrowserRead');
 5      }
 6
 7      var requestParams = []
 8      for ( var i = 0 ; i < arguments.length ;  i++ )
 9         requestParams.push(arguments[i]);
10         
11      var oThis = this;
12      var request = this.getTransport();
13      request.open( this.method, this.url, true );
14      request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
15      request.setRequestHeader('Connection', 'Close');
16      request.onreadystatechange = function() { oThis.handleAjaxResponse(request) };
17      request.send( this.queryString(requestParams) );
18  },

PS:

//queryString(arg) format the args to xxx&xxx&xxx..
2request.send( this.queryString(requestParams) );

Also, we can use ScriptManager & This is more easy, the folowing is a sample use WebService:

 1        <asp:ScriptManager ID="ScriptManager1" runat="server">
 2            <Services>
 3                <asp:ServiceReference Path="EmployeeService.asmx" />
 4            </Services>
 5        </asp:ScriptManager>
 6        
 7        <script language="javascript" type="text/javascript">
 8            function showEmployee(firstName, lastName, title)
 9            {
10                AspNetAjaxOverview.EmployeeService.GetEmployee(
11                    firstName,
12                    lastName,
13                    title,
14                    onGetEmployeeSuccess);
15            }
16            
17            function onGetEmployeeSuccess(employee)
18            {
19                alert(String.format(
20                    "Hello I'm {0} {1}, my title is '{2}'",
21                    employee.FirstName,
22                    employee.LastName,
23                    employee.Title));
24            }
25        </script>

The Web Service, for example:

 1namespace AspNetAjaxOverview
 2{
 3    [WebService(Namespace = "http://tempuri.org/")]
 4    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
 5    [ScriptService]
 6    public class EmployeeService : System.Web.Services.WebService
 7    {
 8        [WebMethod]
 9        [ScriptMethod]
10        public Employee GetEmployee(string firstName, string lastName, string title)
11        {
12            return new Employee(firstName, lastName, title);
13        }
14    }
15}