AJAX学习笔记

本文介绍了AJAX技术的基本原理及其实现方法,通过具体步骤展示了如何使用XMLHttpRequest对象进行异步数据请求,并解释了如何处理服务器响应。同时,还讨论了跨浏览器兼容性问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

AJAX学习笔记
参考馮彥文的《AJAX 的 client/server 溝通機制探究》

AJAX是Asynchronous JavaScript And XML的缩写
主要用到XHTML&CSS、DOM、JavaScript、XMLHttpRequest技术

基本的过程
// 建立 XHR
request = new XMLHttpRequest();
// 設定回呼函式
request.onreadystatechange=handleResponse;
// 開啟連結
request.open("GET","http://abc.com",true);
// 傳送資料
request.send(null);


function handleResponse() {
  // 檢查 XHR 狀態
  if(request.readyState == 4){
    // 檢查 http 狀態
    if(request.status == 200){
      // 讀取回傳 XML 資料
      var doc = request.responseXML;
      // 取得網頁上需被更新的 node 位置
      var node = document.getElementById(“resp");
      // 設定該 node 的內容
      node.innerHTML =
        doc.documentElement.childNodes[0].nodeValue;
    }
  }
}

//因为浏览器支持的方式不同,IE的支持方式老,所以前面建立XHR实际应该如下:
function httpRequest(reqType,url){
  if(window.XMLHttpRequest){ // Mozilla, Opera, Safari, …
    request = new XMLHttpRequest();
  } else if (window.ActiveXObject){ // IE
    request=new ActiveXObject("Msxml2.XMLHTTP");
    if (!request){
        request=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  if(request){
    …
  } else {
    alert("Your browser does not permit the use of all "+
          "of this application's features!");
  }
}

AJAX可以传TEXT,HTML,XML,JAVASCRIPT.
XHR 限制僅能存取該網站上的資料, 無法存取其他網站的資料.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值