【javascript】ajax 基礎

來源:互聯網
上載者:User

標籤:

什麼是 ajax

ajax 即“Asynchronous JavaScript and XML”(非同步 JavaScript 和 XML),也就是無重新整理資料讀取。

http 請求

首先需要瞭解 http 請求的方法(GET 和 POST)。

GET 用於擷取資料。GET 是在 URL 中傳遞資料,它的安全性低,容量低。

POST 用於上傳資料。POST 安全性一般,容量幾乎無限。

ajax 請求

ajax 請求一般分成 4 個步驟。

1、建立 ajax 對象

在建立對象時,有相容問題:

var oAjax = new XMLHttpRequest();   //for ie6 以上var oAjax = new ActiveXObject(‘Microsoft.XMLHTTP‘); //for ie6

合并上面的代碼:

var oAjax = null;if(window.XMLHttpRequest){    oAjax = new XMLHttpRequest();}else{    oAjax = new ActiveXObject(‘Microsoft.XMLHTTP‘);}
2、串連伺服器

在這裡會用到 open() 方法。open() 方法有三個參數,第一個參數是串連方法即 GET 和 POST,第二個參數是 URL 即所要讀取資料的地址,第三個參數是否非同步,它是個布爾值,true 為非同步,false 為同步。

oAjax.open(‘GET‘, url, true);
3、發送請求

send() 方法。

oAjax.send();
4、接收傳回值

onreadystatechange 事件。當請求被發送到伺服器時,我們需要執行一些基於響應的任務。每當 readyState 改變時,就會觸發 onreadystatechange 事件。

readyState:請求狀態,返回的是整數(0-4)。

0(未初始化):還沒有調用 open() 方法。

1(載入):已調用 send() 方法,正在發送請求。

2(載入完成):send() 方法完成,已收到全部響應內容。

3(解析):正在解析響應內容。

4(完成):響應內容解析完成,可以在用戶端調用。

status:請求結果,返回 200 或者 404。

200 => 成功。

404 => 失敗。

responseText:返回內容,即我們所需要讀取的資料。需要注意的是:responseText 返回的是字串。

oAjax.onreadystatechange=function(){    if(oAjax.readyState==4){        if(oAjax.status==200){            fnSucc(oAjax.responseText);        }else{            if(fnFaild){                fnFaild();            }        }    }};

將以上代碼進行封裝:

function ajax(url, fnSucc, fnFaild){    //1.建立對象    var oAjax = null;    if(window.XMLHttpRequest){        oAjax = new XMLHttpRequest();    }else{        oAjax = new ActiveXObject("Microsoft.XMLHTTP");    }          //2.串連伺服器      oAjax.open(‘GET‘, url, true);   //open(方法, url, 是否非同步)          //3.發送請求      oAjax.send();          //4.接收返回    oAjax.onreadystatechange = function(){  //OnReadyStateChange事件        if(oAjax.readyState == 4){  //4為完成            if(oAjax.status == 200){    //200為成功                fnSucc(oAjax.responseText)             }else{                if(fnFaild){                    fnFaild();                }            }        }    };}

最後附上執行個體:

<!DOCTYPE HTML><html lang="en-US"><head>    <meta charset="UTF-8">    <title>ajax基礎</title></head><body>    點擊按鈕的時候,讀取abc.txt<input id="btn" type="button" value="讀取"/><br/>    <div id="con"></div></body></html><script type="text/javascript" src="ajax.js"></script><script type="text/javascript">window.onload = function(){    var oBtn = document.getElementById(‘btn‘);    var oCon = document.getElementById(‘con‘);    oBtn.onclick = function(){        ajax(‘abc.txt‘,function(str){            oCon.innerHTML = str;        });    }}</script>

abc.txt 內容:

這是ajax調用的內容1。這是ajax調用的內容2。這是ajax調用的內容3。

【javascript】ajax 基礎

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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.