欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Ajax學習筆記整理

 更新時間:2016年01月18日 09:22:59   作者:venoral  
Ajax: Asynchronous JavaScript and Xml , 異步js腳本和xml , 常用來實現頁面局部的異步刷新, 對提高用戶體驗有很大幫助. Xml在多語言時較有優(yōu)勢, 但Ajax技術實際上較多采用Json對象而不是Xml來處理數據

Ajax: Asynchronous JavaScript and Xml , 異步js腳本和xml , 常用來實現頁面局部的異步刷新, 對提高用戶體驗有很大幫助. Xml在多語言時較有優(yōu)勢, 但Ajax技術實際上較多采用Json對象而不是Xml來處理數據.

Ajax歷史....了解性知識

Ajax歸屬于Web前端開發(fā)技術, 與javascript有著異常緊密的聯系. Ajax就是一種實現異步通信無刷新的技術, 而這種技術可以有很多種實現方式. 瀏覽器的鼻祖網景(NetScape)公司最早發(fā)明了LiveScript腳本語言, 用來豐富網頁元素的表現形式, 使網頁能夠呈現出動態(tài)效果. 隨后的歷次改版升級后就誕生了JavaScript語言, 與此同期微軟(Microsoft)公司也看到互聯網的前景, 開始涉足并發(fā)力于互聯網行業(yè), 推出了JScript語言, 可惜沒有JavaScript成熟, 發(fā)展遲滯. 最終微軟公司對互聯網的決心促成了MS對NS的漫長曲折的收購歷程.

這里提一下, 動態(tài)HTML語言(Dynamic Hyper Text Markup Language)就是將javascript放在Dom樹的元素節(jié)點中, 為元素提供動態(tài)展示行為.

Ajax代碼思路

創(chuàng)建請求對象

配置請求對象并發(fā)送到服務器

服務器應答請求對象

(1) 創(chuàng)建請求對象,作為和服務器進行通訊的對象:

function createRequest(){
try{
var request=new XMLHttpRequest();
}catch(tryMS){
try{
request=new ActiveXObject("Msxml2.XMLHTTP");
}catch(otherMS){
try{
request=new ActiveXObject("Microsoft.XMLHTTP");
}catch(failed){
request=null;
}
}
}
return request;
}

注:ActiveXObject是Microsoft特定的一種編程對象,有兩個不同版本由不同瀏覽器分別支持。XMLHTTP是可以在Javascript等腳本語言中通過http協議傳送或接收XML及其他數據的一套API。

獲得請求對象request后,它有這么些個屬性:

常用的有onreadystatechange,readyState,responseText,status。

(2)配置請求對象并發(fā)送到服務器:

var request=createRequest();
request.open("GET",url,true);
request.onreadystatechange=showResponse;
request.send(null);

open,send方法均來自request對象的原型XMLHttpRequest,打開__proto__:XMLHttpRequest可看到:

open()方法有三個參數,第一個是發(fā)送請求所使用的方法(GET還是POST,區(qū)別以后再總結),第二個是規(guī)定服務器端腳本的url(該文件可以是任何類型的文件),第三個參數規(guī)定是否進行異步處理(默認true異步)

send()方法將請求送往服務器。

我在這里注意到,request.onreadystatechange=showResponse;這句代碼所在的位置不同,控制臺輸出的響應內容就不同。想來也是,回調函數加入任務隊列的時機不同肯定輸出不同啊,就比如現在這個位置,

request.onreadystatechange=showResponse;在open之后send之前,當代碼解析到request.onreadystatechange=showResponse;時,此時的readyStates=1(請求已和服務器建立接連),此后當readyStates由1變?yōu)?,回調函數showResponse加入任務隊列中等待被執(zhí)行,readyState從2變化到3,回調函數showResponse第二次加入任務隊列,readyState從3變化到4,回調函數再次加入隊列。所以猜想當主代碼執(zhí)行完畢后,控制臺會輸出“請求已發(fā)送,服務器已接收,send之后”,“請求正在處理”,“請求已完成”;確實如此:

(3)服務器應答請求對象,js就可以處理響應內容了:

function showResponse(){
if(request.readyState==0){
console.log('請求未初始化,調用open之前');
}else if(request.readyState==1){
console.log('請求已提出,服務器連接已建立,open之后send之前');
}else if(request.readyState==2){
console.log('請求已發(fā)送,服務器已接收,send之后');
}else if(request.readyState==3){
console.log('請求正在處理');
}else if(request.readyState==4){
console.log('請求已完成');
if(request.status==200){
//處理request.responseText;
}
}
}

上面代碼僅是為了跟蹤readyState變化,實際項目代碼要不了這么多。底下才是實際主要代碼:

function showResponse(){
if(request.readyState==4){
if(request.status==200){
//處理request.responseText;
}
}
}

ps:Ajax解決什么問題

我們都知道, 在客戶端向服務器請求一個頁面時, 服務器首先動態(tài)的計算并生成出頁面, 然后再發(fā)給客戶端. 客戶端瀏覽器順序編譯并呈現頁面.

在沒有Ajax時: 假如說頁面有個用戶驗證控件, 那么在客戶端瀏覽器呈現用戶驗證控件時, 會等待服務器的驗證結果, 收到結果后才能繼續(xù)呈現頁面元素. 而這個驗證過程通常要進行讀取數據庫等操作, 這就是所謂的同步方式. 而這種方式, 會造成網頁呈現的假死狀態(tài).

在使用Ajax后: 同樣是驗證控件, 客戶端提交了驗證請求后, 便繼續(xù)順序呈現其他元素. 當取得驗證結果后, 由javascript在客戶端修改內存中的DOM對象后并呈獻給用戶(注意: 這里修改的只是內存中的DOM對象, 而客戶端接收的頁面文件并沒有修改). 這樣, 使用異步的方式, 就不會出現假死狀態(tài), 同時客戶端也節(jié)省了等待服務器返回結果時的時間開銷.

相關文章

  • AJAX防止頁面緩存的代碼

    AJAX防止頁面緩存的代碼

    AJAX防止頁面緩存的代碼...
    2007-06-06
  • AjaxSubmit()提交file文件

    AjaxSubmit()提交file文件

    這篇文章主要介紹了AjaxSubmit()提交file文件的實例講解,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2017-02-02
  • 各種AJAX方法的使用比較詳解

    各種AJAX方法的使用比較詳解

    AJAX技術經過這么多年的發(fā)展,出現了一些框架或類庫用于簡化開發(fā)工作,不同的框架類庫的使用方法也各不相同。 現在,再回頭看看這些技術,看看這些框架類庫,我們能感受到技術在不斷地發(fā)展,AJAX開發(fā)越來越容易了。
    2015-09-09
  • Ajax讀取txt并對txt內容進行分頁顯示功能

    Ajax讀取txt并對txt內容進行分頁顯示功能

    這篇文章給大家介紹了Ajax讀取txt并對txt內容進行分頁顯示功能,非常不錯,具有參考借鑒價值,感興趣的朋友一起看看吧
    2016-11-11
  • 淺析Ajax的 原理及優(yōu)缺點

    淺析Ajax的 原理及優(yōu)缺點

    本文從ajax技術的背景、原理、ajax的名字,ajax所包含的技術等方面展開話題,介紹ajax的原理及優(yōu)缺點。本文關于ajax的原理及優(yōu)缺點介紹的非常詳細,具有參考借鑒價值,感興趣的小伙伴一起學習吧
    2016-04-04
  • ajax獲得json對象數組 循環(huán)輸出數據的方法

    ajax獲得json對象數組 循環(huán)輸出數據的方法

    今天小編就為大家分享一篇ajax獲得json對象數組 循環(huán)輸出數據的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • Ajax實現文件下載

    Ajax實現文件下載

    本文給大家介紹ajax實現文件下載相關知識,涉及到ajax文件下載方面的知識,本文介紹的非常詳細,具有參考借鑒價值,感興趣的朋友一起學習吧
    2016-03-03
  • ajax中用josnp接收josn數據的實現方法

    ajax中用josnp接收josn數據的實現方法

    下面小編就為大家分享一篇ajax中用josnp接收josn數據的實現方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2017-12-12
  • 基于ajax實現點擊加載更多無刷新載入到本頁

    基于ajax實現點擊加載更多無刷新載入到本頁

    本文給大家介紹通過ajax技術實現無刷新加載更多載入到本頁,感興趣的朋友一起學習吧
    2015-10-10
  • 淺談AJAX開發(fā)技術

    淺談AJAX開發(fā)技術

    本文簡單介紹了下ajax的概念歷史以及XMLHttpRequest對象的屬性、XMLHttpRequest對象的方法和AJAX封裝后的代碼,十分不錯,這里推薦給小伙伴們。
    2015-02-02

最新評論