javascript ajax實現資料post提交

來源:互聯網
上載者:User

簡單的 new

首先需要建立一個新變數並賦給它一個 XMLHttpRequest 對象執行個體。這在 JavaScript 中很簡單,只要對該對象名使用 new 關鍵字即可,如 清單 1 所示。


清單 1. 建立新的 XMLHttpRequest 對象

 代碼如下 複製代碼
<script language="javascript" type="text/javascript">
var request = new XMLHttpRequest();
</script>

 


不難吧?記住,JavaScript 不要求指定變數類型,因此不需要像 清單 2 那樣做(在 Java 語言中可能需要這樣)。


清單 2. 建立 XMLHttpRequest 的 Java 虛擬碼

 代碼如下 複製代碼
XMLHttpRequest request = new XMLHttpRequest();

 


因此在 JavaScript 中用 var 建立一個變數,給它一個名字(如 “request”),然後賦給它一個新的 XMLHttpRequest 執行個體。此後就可以在函數中使用該對象了。

錯誤處理

在實際上各種事情都可能出錯,而上面的代碼沒有提供任何錯誤處理。較好的辦法是建立該對象,並在出現問題時優雅地退出。比如,任何較早的瀏覽器(不論您是否相信,仍然有人在使用老版本的 Netscape Navigator)都不支援 XMLHttpRequest,您需要讓這些使用者知道有些地方出了問題。清單 3 說明如何建立該對象,以便在出現問題的時候發出 JavaScript 警告。


清單 3. 建立具有錯誤處理能力的 XMLHttpRequest

 代碼如下 複製代碼
<script language="javascript" type="text/javascript">
var request = false;
try {
  request = new XMLHttpRequest();
} catch (failed) {
  request = false;
}
if (!request)
  alert("Error initializing XMLHttpRequest!");
</script>

 


一定要理解這些步驟:

建立一個新變數 request 並賦值 false。後面將使用 false 作為判定條件,它表示還沒有建立 XMLHttpRequest 對象。
增加 try/catch 塊:
嘗試建立 XMLHttpRequest 對象。
如果失敗(catch (failed))則保證 request 的值仍然為 false。
檢查 request 是否仍為 false(如果一切正常就不會是 false)。
如果出現問題(request 是 false)則使用 JavaScript 警告通知使用者出現了問題。
代碼非常簡單,對大多數 JavaScript 和 Web 開發人員來說,真正理解它要比讀寫代碼花更長的時間。現在已經得到了一段帶有錯誤檢查的 XMLHttpRequest 對象建立代碼,還可以告訴您哪兒出了問題。


以下是xmlHttp的coding:

 代碼如下 複製代碼
var xmlHttp;
function createXMLHttpRequest(){
    //Mozilla 瀏覽器(將XMLHttpRequest對象作為本地瀏覽器對象來建立)
    if(window.XMLHttpRequest){ //Mozilla 瀏覽器
        xmlHttp = new XMLHttpRequest();
    }else if(window.ActiveXObject) { //IE瀏覽器
    //IE瀏覽器(將XMLHttpRequest對象作為ActiveX對象來建立)
        try{
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }catch(e){}
        }
    }
    if(xmlHttp == null){
        alert("不能建立XMLHttpRequest對象");
        return false;
    }
}
//用於發出非同步請求的方法
function sendAsynchronRequest(url,parameter,callback){
    createXMLHttpRequest();
    if(parameter == null){
        //設定一個事件處理器,當XMLHttp狀態發生變化,就會出發該事件處理器,由他調用
        //callback指定的javascript函數
        xmlHttp.onreadystatechange = callback;
        //設定對拂去其調用的參數(提交的方式,請求的的url,請求的類型(非同步請求))
        xmlHttp.open("GET",url,true);//true表示發出一個非同步請求。
        xmlHttp.send(null);
    }else{
        xmlHttp.onreadystatechange = callback;
        xmlHttp.open("POST",url,true);
        xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
        xmlHttp.send(parameter);
    }
}
//以上代碼是通用的方法,接下來是調用以上的方法
function loadPros(title,count,pid,cid,level){
    // 調用非同步要求方法
    url = "。。。。。。。。";
    sendAsynchronRequest(url,null,loadCallBack);
}
// 指定回調方法
function loadCallBack(){
  try
 {
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
            if(xmlHttp.responseText != null && xmlHttp.responseText != ""){
               var divProid = document.getElementById('videolist');
               divProid.innerHTML = xmlHttp.responseText;
               for(i=0;i<len;i++)
               {
                   var video_url = document.getElementById("videolist"+i+"").href;
                   if(video_url != undefined && video_url != null && video_url != ""){
                      window.location.href = video_url;
                   }
               }
           }
        }
     }
     if (xmlHttp.readyState == 1)
     {
        //alert("正在載入連線物件......");
     }
     if (xmlHttp.readyState == 2)
     {
        //alert("連線物件載入完畢。");
     }
     if (xmlHttp.readyState == 3)
     {
        //alert("資料擷取中......");
     }
  }
  catch (e)
  {
      //alert(e);
  }
}

一個相容性比較好的ajax代碼

 代碼如下 複製代碼

var http_request = false;     //ajax 對象
function changepage(url,idname)
{
 if(url.indexOf("?")>-1)
  url=url+ "&now="+(new Date()).getTime();
 else
  url=url+ "?now="+(new Date()).getTime();
 http_request = false;
 if (window.XMLHttpRequest) { // Mozilla, Safari,...
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');
            }
        } else if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }

        if (!http_request) {
            alert('Giving up :( Cannot create an XMLHTTP instance');
            return false;
        }
        http_request.onreadystatechange = LoadContent(idname);
  //alert("url="+url)
        http_request.open('GET', url, true);
        http_request.send(null);
}
 

function LoadContent(idname)
{
 
 if (http_request.readyState != 4)
 {
  //alert("出現錯誤http_request.readyState"+http_request.readyState);
  return;
 }
 if (http_request.status != 200)
 {
   //alert("出現錯誤"+http_request.status);;
  return;
 }
 eval("document.getElementById('"+idname+"').innerHTML") = http_request.responseText;
 //document.getElementById('programlist').innerHTML = "ddddddddddddddddddddddddd"; 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.