现在的位置: 首页 > 综合 > 正文

也谈Ajax技术

2013年01月13日 ⁄ 综合 ⁄ 共 2714字 ⁄ 字号 评论关闭
        时下流行的Ajax并不是新技术,它只是一些老技术的组合,这一点你可以从它的英文全称上了解到,Ajax 是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写,也即异步JavaScript和XML。

        要了解Ajax的工作原理,下列技术必须掌握:

  • (1)HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。
  • (2)JavaScript 代码是运行 Ajax 应用程序的核心代码,帮助改进与服务器应用程序的通信。
  • (3)DHTML 或 Dynamic HTML,用于动态更新表单。我们将使用 divspan 和其他动态 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异步传输的局部刷新,非常简单。。。

抱歉!评论已关闭.