Dropdown Box Using AJAX
来源:互联网 发布:recv函数接收数据不全 编辑:程序博客网 时间:2024/05/16 17:39
What is AJAX?
AJAX, an acronym for Asynchronous JavaScript and XML, is a web development technique for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user makes a change. This is meant to increase the web page's interactivity, speed, and usability.
Using the XmlHttp Object
An XmlHttp
object can be created like this:
//Global XMLHTTP Request object
var XmlHttp;
//Creating and setting the instance of appropriate XMLHTTP Request object to
//a "XmlHttp" variable
function CreateXmlHttp()
...{
//Creating object of XMLHTTP in IE
try
...{
XmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
...{
try
...{
XmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(oc)
...{
XmlHttp = null;
}
}
//Creating object of XMLHTTP in Mozilla and Safari
if(!XmlHttp && typeof XMLHttpRequest != "undefined")
...{
XmlHttp = new XMLHttpRequest();
}
}
</script>
Send the request to the server side page
We can send a request to the server page to retrieve the data from the server through the XmlHttp
object.
var requestUrl = "WebForm2.aspx" + "?SelectedCountry=" + (selectedCountry);
CreateXmlHttp();
// If browser supports XMLHTTPRequest object
if(XmlHttp)
...{
//Setting the event handler for the response
XmlHttp.onreadystatechange = HandleResponse;
//Initializes the request object with GET (METHOD of posting),
//Request URL and sets the request as asynchronous.
XmlHttp.open("GET", requestUrl, true);
//Sends the request to server
XmlHttp.send(null);
}
The above code explains how to send a request to webpage2.aspx with the request object collection. This collection contains the selected country itself.
Process the client request
When the request is recieved on the server side, the server page executes the code and gives the response through the XmlHttp
object:
Dim xList As XmlNodeList
Dim xNode As XmlNode
Dim Str As String
xmlDoc.Load(Server.MapPath("CountriesAndStates.xml"))
Dim Country As String = Request.QueryString("SelectedCountry")
Dim query As String = ("/countries/country[@name='" & country & "']")
xlist = xmlDoc.SelectNodes(query)
Response.Clear()
For Each xNode In xList
If xNode.HasChildNodes = True Then
For Each xN As XmlNode In xNode.ChildNodes
Str &= xN.InnerText & "-"
Next
End If
Next
Response.Clear()
Response.ContentType = "text/xml"
Response.Write(str)
Response.End()
Using the XmlHttp object to retrieve the data
Recieving the response from the server page can be done like this:
The valid list of XMLHttpRequest
ready states is listed in the following table:
Value
Description
0
Uninitialized
1
Loading
2
Loaded
3
Interactive
4
Complete
The list of status codes for the HTTP status is given below:
1xx Informational
Request received, continuing process.
- 100: Continue
- 101: Switching Protocols
2xx Success
The action was successfully received, understood, and accepted.
- 200: OK
- 201: Created
- 202: Accepted
- 203: Non-Authoritative Information
- 204: No Content
- 205: Reset Content
- 206: Partial Content
- 207: Multi-Status
3xx Redirection
The client must take additional action to complete the request.
- 300: Multiple Choices
- 301: Moved Permanently. This and all future requests should be directed to another URI.
- 302: Found this the most popular redirect code, but also an example of industrial practice contradicting the standard. HTTP/1.0 specification (RFC 1945) required the client to perform a temporary redirect (the original describing phrase was "Moved Temporarily"), but popular browsers implemented it as a 303 See Other. Therefore, HTTP/1.1 added status codes 303 and 307 to disambiguate between the two behaviors. However, majority of web applications and frameworks still use the 302 status code as if it were the 303.
- 303: See Other (since HTTP/1.1). The response to the request can be found under another URI using a GET method.
- 304: Not Modified
- 305: Use Proxy (since HTTP/1.1). Many HTTP clients (such as Mozilla and Internet Explorer) don't correctly handle responses with this status code.
- 306 is no longer used, but reserved. Was used for 'Switch Proxy'.
- 307: Temporary Redirect (since HTTP/1.1). In this occasion, the request should be repeated with another URI, but future requests can still be directed to the original URI. In contrast to 303, the original POST request must be repeated with another POST request.
4xx Client Error
The request contains bad syntax or cannot be fulfilled.
- 400: Bad Request
- 401: Unauthorized. Similar to 403/Forbidden, but specifically for use when authentication is possible but has failed or not yet been provided. See basic authentication scheme and digest access authentication.
- 402: Payment Required. The original intention was that this code might be used as part of some form of digital cash/micropayment scheme, but that has not happened, and this code has never been used.
- 403: Forbidden
- 404: Not Found
- 405: Method Not Allowed
- 406: Not Acceptable
- 407: Proxy Authentication Required
- 408: Request Timeout
- 409: Conflict
- 410: Gone
- 411: Length Required
- 412: Precondition Failed
- 413: Request Entity Too Large
- 414: Request-URI Too Long
- 415: Unsupported Media Type
- 416: Requested Range Not Satisfiable
- 417: Expectation Failed
- 449: Retry With A Microsoft extension: The request should be retried after doing the appropriate action.
5xx Server Error
The server failed to fulfill an apparently valid request.
- 500: Internal Server Error
- 501: Not Implemented
- 502: Bad Gateway
- 503: Service Unavailable
- 504: Gateway Timeout
- 505: HTTP Version Not Supported
- 509: Bandwidth Limit Exceeded. This status code, while used by many servers, is not an official HTTP status code.
if(XmlHttp.readyState == 4)
...{
// To make sure valid response is received from the server,
// 200 means response received is OK
if(XmlHttp.status == 200)
...{
ClearAndSetStateListItems(XmlHttp.responseText);
}
else
...{
alert("There was a problem retrieving data from the server." );
}
}
There are two types of XmlHttp
responses for rectrieving the response.
responseText
responseXML
Show the states in the dropdownbox
The responseText
is split using the split
function and the response is assigned to an array.
Then, the array values are added in the dropdown list.
var stateList = document.getElementById("stateList");
//Clears the state combo box contents.
for (var count = stateList.options.length-1; count >-1; count--)
...{
stateList.options[count] = null;
}
var stateNodes = countryNode.split("-");
//window.alert(stateNodes)
var textValue;
var optionItem;
//Add new states list to the state combo box.
for (var count = 0; count < stateNodes.length; count++)
...{
textValue = (stateNodes[count]);
optionItem = new Option( textValue, textValue, false, false);
//window.alert(textValue);
//stateList.appendChild(textValue);
stateList.options[stateList.length] = optionItem;
}
This is my first article in The Code Project.
About sathesh_pandian
- Dropdown Box Using AJAX
- Spring MVC dropdown box example
- Ajax控件之DropDown
- dropdown
- SAP ABAP 使用 Dropdown List Box 的方法
- TNS service names ODBC dropdown box garbled, messed up, gibberish
- SAP ABAP 使用 Dropdown List Box 的方法
- DropDown in IPhone using UITextField,PickerView or DatePickerView
- Dropdown by index in ALV using in Web Dynpro
- altas(ajax)控件(十):DropDown让文本框拥有下拉列表
- altas(ajax)控件(十):DropDown让文本框拥有下拉列表
- Drupal ajax html和bootstrap dropdown button的事件机制
- Using Message Box (MsgBox) in Excel VBA
- Using Fancy Box show image list
- 个人收藏 Dropdown by index in ALV using in Web Dynpro
- Using An Item Template With An HTML Dropdown Menu Component In Angular 2 RC 3
- Ajax Using JSON
- DropDown Demonstration
- calendar.js(摘)
- C++箴言:用传引用给const取代传值
- 屏蔽HTML代码,gbk转iso,iso转gbk
- 删除window隐藏帐号
- 什么是遗传算法(转)
- Dropdown Box Using AJAX
- javascript 滚动定位
- JAVA内存泄漏——内存泄漏原因和内存泄漏检测工具(zt)
- TOMCAT入门经典(转)
- [ZOJ] 1003 Crashing Balloon
- 第一部分:Linux安装和登陆命令
- The Second One
- Java初级工程的知识结构
- 关于提取文件名和路径