Ajax stands for "Asynchronous JavaScript and XML" and refers to a web development technology for creating interactive web applications. Ajax technology is a collection of all technologies currently available in browsers through JavaScript scripts. Ajax uses all these technologies in a new way, revitalizing the old B/S style of Web development.
Among Ajax technologies, the core technology is XMLHttpRequest. Its original name is XMLHTTP. It was first launched by Microsoft in the IE5.0 browser in 1999 in order to meet the needs of developers. Later this technology was named XMLHttpRequest by the above specification. This is what makes Ajax technology unique. In short, XMLHttpRequest provides a means for JavaScript scripts running in the browser to communicate with the server within the page. JavaScript within the page can obtain data from the server or submit data to the server without refreshing the page. The emergence of XMLHttpRequest provides a new possibility for Web development, and even completely changes people's view of what Web applications consist of. It allows us to do web development in a completely new way and provide users with a better interactive experience.
Unlike traditional Web development, Ajax does not view Web applications in a static page-based way. From an Ajax perspective, a Web application should consist of a small number of pages, each of which is actually a smaller Ajax application. Each page includes some Ajax components developed using JavaScript. These components use the XMLHttpRequest object to communicate with the server in an asynchronous manner. After obtaining the required data from the server, they use the DOM API to update part of the content on the page. Therefore, there are three main differences between Ajax applications and traditional Web applications:
1. Communicate with the server within the page without refreshing the entire page.
2. Use asynchronous mode to communicate with the server, without interrupting the user's operation, and have faster response capabilities.
3. The application consists of only a few pages. Most interactions are completed within the page, and there is no need to switch the entire page.
It can be seen that Ajax makes Web applications more dynamic, brings higher intelligence, and provides Ajax UI components with rich expressive capabilities. Such a new type of Web application is called RIA (Rich Internet Application) application.
The front is some information about the introduction of AJAX that I found on the Internet to help readers who do not know AJAX technology understand AJAX technology as soon as possible. Next, I will introduce to you some AJAX technologies and techniques that I have used in the actual development process. .
The most important thing when using AJAX technology is to create an XMLHttpRequest object. There is a lot of information on how to create this object on the Internet. One of my most commonly used methods is
function createXMLHttpRequest() {
var xmlhttp;
try {
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
} catch(e) {
try {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
} catch(e) {
try {
xmlhttp = new XMLHttpRequest();
} catch(e) {
alert("Failed to create XMLHttpRequest object!");
}
}
}
return xmlhttp;
}
Below I will list some examples and some things that can be learned through these examples.
The following piece of code is an example of how I verify whether the item already exists in the database when adding a specific item.
<input type="text" style="width:100%" class="noEmptyInput" name="segment10" value="<%=segment10%>" maxlength="16" onblur="do_verify();">
function do_verify() {
var segment10 = document.mainFrm.segment10.value;
var inventoryItemId = document.mainFrm.inventoryItemId.value;
// alert(segment10)
xmlHttp = createXMLHttpRequest();
var url = "/servlet/com.sino.ies.inv.maintenance.servlet.ItemMaintainServlet?forward=doVerify&segment10=" + segment10 + "&inventoryItemId=" + inventoryItemId;
xmlHttp.onreadystatechange = handleReadyStateChange;
xmlHttp.open("post", url, true); //There are also two methods of transmitting data: GET and POST, but when the method is POST, the following sentence must be written
xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlHttp.send(null);
}
function handleReadyStateChange() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
if (xmlHttp.responseText == 'Y') {
document.mainFrm.isExist.value = 'Y';
document.getElementById("flag").style.display = "block"
document.mainFrm.segment10.focus();
} else {
document.mainFrm.isExist.value = 'N';
document.getElementById("flag").style.display = "none"
}
} else {
alert(xmlHttp.status);
}
}
}
The background code is:
boolean success = itemDAO.doVerifyItem(); //doVerifyItem is the main method to verify whether the specified item exists in the database. If the item already exists, this method will return TRUE
PrintWriter out = res.getWriter();
if (success) {
out.print("Y");
}
out.flush();
out.close();
}