ajax操作oracle,AJAX操作流程

本章提供了AJAX操作过程步骤的清晰流程。

AJAX操作的步骤

发生客户端事件。

创建XMLHttpRequest对象。

XMLHttpRequest对象创建成功并配置。

XMLHttpRequest对象向Web服务器发出异步请求。

Web服务器返回包含XML文档的结果。

XMLHttpRequest对象调用callback()函数并处理结果。

HTML DOM已更新。

下面我们进一步了解这些步骤。

发生客户端事件

JavaScript函数作为事件的结果被调用。

示例 - JavaScript validateUserId()函数被映射为输入表单字段上的onkeyup事件的事件处理程序，其id设置为“userid”

.

XMLHttpRequest对象创建

var ajaxRequest; // The variable that makes Ajax possible!

function ajaxFunction() {

try {

// Opera 8.0+, Firefox, Safari

ajaxRequest = new XMLHttpRequest();

} catch (e) {

// Internet Explorer Browsers

try {

ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {

// Something went wrong

alert("Your browser broke!");

return false;

}

}

}

}

XMLHttpRequest对象配置

在这一步中，我们将编写一个将由客户端事件触发的函数，并将注册一个回调函数processRequest()。

function validateUserId() {

ajaxFunction();

// Here processRequest() is the callback function.

ajaxRequest.onreadystatechange = processRequest;

if (!target) target = document.getElementById("userid");

var url = "validate?id=" + escape(target.value);

ajaxRequest.open("GET", url, true);

ajaxRequest.send(null);

}

向Web服务器进行异步请求

源代码可在下面的代码中找到。最后几行代码是负责向Web服务器发出请求。这都是使用XMLHttpRequest对象ajaxRequest完成的。

function validateUserId() {

ajaxFunction();

// Here processRequest() is the callback function.

ajaxRequest.onreadystatechange = processRequest;

if (!target) target = document.getElementById("userid");

var url = "validate?id=" + escape(target.value);

ajaxRequest.open("GET", url, true);

ajaxRequest.send(null);

}

假设在用户ID框中输入Maxsu，然后在上述请求中，URL设置为“validate?id=Maxsu”。

Webserver返回包含XML文档的结果

可以使用任何语言实现服务器端脚本，但其逻辑应如下所示。

获取客户端请求。

解析客户端的输入。

需要处理获得输入值。

将输出发送到客户端。

我们假设要使用servlet编写上面的逻辑，那么代码过程如下 -

public void doGet(HttpServletRequest request,

HttpServletResponse response) throws IOException, ServletException {

String targetId = request.getParameter("id");

if ((targetId != null) && !accounts.containsKey(targetId.trim())) {

response.setContentType("text/xml");

response.setHeader("Cache-Control", "no-cache");

response.getWriter().write("true");

} else {

response.setContentType("text/xml");

response.setHeader("Cache-Control", "no-cache");

response.getWriter().write("false");

}

}

回调函数调用processRequest()

XMLHttpRequest对象配置为在XMLHttpRequest对象的readyState状态更改时调用processRequest()函数。现在，此函数将从服务器接收结果，并将执行所需的处理。如下例所示，它根据Webserver返回的值设置变量消息为true或false。

function processRequest() {

if (req.readyState == 4) {

if (req.status == 200) {

var message = ...;

...

}

HTML DOM已更新

这是最后一步，在此步骤中，HTML页面将会更新。它以下列方式发生 -

JavaScript使用DOM API获取对页面中任何元素的引用。

获取元素引用的推荐方法是调用。

document.getElementById("userIdMessage"),

// where "userIdMessage" is the ID attribute

// of an element appearing in the HTML document

现在可以使用JavaScript来修改元素的属性; 修改元素的样式属性; 或添加，删除或修改子元素。下面是一个例子(index.html) -

如果已经理解了上面的几个步骤，那么你已经可以理解并可以使用AJAX了。

¥ 我要打赏

纠错/补充

收藏

加QQ群啦，易百教程官方技术学习群

注意：建议每个人选自己的技术方向加群，同一个QQ最多限加 3 个群。