|
时下风行的Ajax并不是新技能，它只是一些老技能的组合，这一点你可以从它的英文全称上相识到，Ajax 是 Asynchronous JavaScript and XML（以及 DHTML 等）的缩写，也即异步JavaScript和XML。
要相识Ajax的事变道理，下列技能必需把握：
（1）HTML 用于成立 Web 表单并确定应用措施其他部门行使的字段。
（2）JavaScript 代码是运行 Ajax 应用措施的焦点代码，辅佐改造与处事器应用措施的通讯。
（3）DHTML 或 Dynamic HTML，用于动态更新表单。我们将行使 div、span 和其他动态 HTML 元向来标志 HTML。
（4）文档工具模子 DOM 用于（通过 JavaScript 代码）处理赏罚 HTML 布局和（某些环境下）处事器返回的 XML。
1，Ajax中要用到的最首要的JavaScript工具是XMLHttpRequest工具，这个工具是统统应用Ajax技能编写代码的最根基工具，也是最重要的工具，差异的赏识器下建设该工具的要领是纷歧样的，以是在做网页开拓的时辰必需建设能在通用赏识器上运行的XMLHttpRequest工具，下面是建设该工具的代码
<script language="javascript" type="text/javascript">
var request = false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
if (!request)
alert("Error initializing XMLHttpRequest!");
</script>
2，建设工具后，必要打开哀求，一样平常回收get方法
var phone = document.getElementById("phone").value;
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
request.open("GET", url, true);
3，指定回调要领
request.onreadystatechange = updatePage;
4，发送哀求
request.send(null);
5，回调要领，处理赏罚处事器相应
function updatePage() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText.split("|");
document.getElementById("order").value = response[0];
document.getElementById("address").innerHTML = response[1].replace(/n/g, "");
} else
alert("status is " + request.status);
}
}
最后汇总一下上面写的JavaScript代码
<script language="javascript" type="text/javascript">
var request = false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
if (!request)
alert("Error initializing XMLHttpRequest!");
function getCustomerInfo() {
var phone = document.getElementById("phone").value;
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
}
function updatePage() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText.split("|");
document.getElementById("order").value = response[0];
document.getElementById("address").innerHTML = response[1].replace(/n/g, " ");
} else
alert("status is " + request.status);
}
}
</script>
凭证上述五个步调，就可以实现ajax异步传输的局部革新，很是简朴。
转自：http://www.cnblogs.com/gisland/ （编辑：湖南网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
