Ajax 數(shù)據(jù)請求的簡單分析
更新時間：2011年04月05日 21:42:51 作者：
Ajax使用的關(guān)鍵對象是XmlHttpRequest對象，但是涉及到跨瀏覽器的的問題，所以，需要創(chuàng)建一個具兼容性的對象
比如：
function xmlHttpR(){
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
try{xmlhttp=new ActiveXObject("Msxml2.XMLHTTP")}
catch(e){
try{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){return null;
}
}
return xmlhttp;
這樣就基本上能創(chuàng)建一個跨瀏覽器的對象了；
下面是ajax的簡單運用，利用XmlHttpRequest對象完成；
var ajaxEl=new Object();
//ajaxEl是自定義的命名空間；
ajaxEl.contentLoad=function(url){
//IE瀏覽器下，會啟用緩存，這里url加入date字段就是為了防止IE使用緩存，當然也可以使用Math.random()產(chǎn)生和getTime類似的效果；
url+="?date="+new Date().getTime();
this.req=null;
this.url=url;
//這個回調(diào)函數(shù)就是在數(shù)據(jù)在頁面上的更新函數(shù)；
this.onload=function(){
//domEl是ID為#test的dom元素；
var domEl=document.getElementById("test");
//除了用responseText屬性，也可以使用responseXml獲得一張數(shù)據(jù)表；
domEl.innerHTML=this.req.responseText;
}
this.Xmlhttp(url);
}
ajaxEl.contentLoad.prototype={
Xmlhttp:function(url){
if(window.XMLHttpRequest){
this.req=new XMLHttpRequest();
}
else{
try{this.req=new ActiveXObject("Msxml2.XMLHTTP")}
catch(e){
try{this.req=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){return null;
}
}
}
if(this.req){
var xmlR=this;
this.req.onreadystatechange=function(){
if(xmlR.req.readyState===4){
xmlR.onload.call(xmlR);
}
}
this.req.open("GET",url,true);
this.req.send(null);
}
}
}
var xmlE=new ajaxEl.contentLoad("main.php");
main.php里面，我這里設(shè)置的比較簡單的示例代碼：在頁面上就會顯示一個類似：now! time is:05:18:10 am 2011，這樣可動態(tài)變化的時間。
echo "now! time is:".date("H:i:s a Y");
復(fù)制代碼 代碼如下:
function xmlHttpR(){
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
try{xmlhttp=new ActiveXObject("Msxml2.XMLHTTP")}
catch(e){
try{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){return null;
}
}
return xmlhttp;
這樣就基本上能創(chuàng)建一個跨瀏覽器的對象了；
下面是ajax的簡單運用，利用XmlHttpRequest對象完成；
復(fù)制代碼 代碼如下:
var ajaxEl=new Object();
//ajaxEl是自定義的命名空間；
ajaxEl.contentLoad=function(url){
//IE瀏覽器下，會啟用緩存，這里url加入date字段就是為了防止IE使用緩存，當然也可以使用Math.random()產(chǎn)生和getTime類似的效果；
url+="?date="+new Date().getTime();
this.req=null;
this.url=url;
//這個回調(diào)函數(shù)就是在數(shù)據(jù)在頁面上的更新函數(shù)；
this.onload=function(){
//domEl是ID為#test的dom元素；
var domEl=document.getElementById("test");
//除了用responseText屬性，也可以使用responseXml獲得一張數(shù)據(jù)表；
domEl.innerHTML=this.req.responseText;
}
this.Xmlhttp(url);
}
ajaxEl.contentLoad.prototype={
Xmlhttp:function(url){
if(window.XMLHttpRequest){
this.req=new XMLHttpRequest();
}
else{
try{this.req=new ActiveXObject("Msxml2.XMLHTTP")}
catch(e){
try{this.req=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){return null;
}
}
}
if(this.req){
var xmlR=this;
this.req.onreadystatechange=function(){
if(xmlR.req.readyState===4){
xmlR.onload.call(xmlR);
}
}
this.req.open("GET",url,true);
this.req.send(null);
}
}
}
var xmlE=new ajaxEl.contentLoad("main.php");
main.php里面，我這里設(shè)置的比較簡單的示例代碼：在頁面上就會顯示一個類似：now! time is:05:18:10 am 2011，這樣可動態(tài)變化的時間。
復(fù)制代碼 代碼如下:
echo "now! time is:".date("H:i:s a Y");
相關(guān)文章
這篇文章主要介紹了Jquery異步上傳文件代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-11-11
屏蔽單個元素使用戶無法點擊在某些特殊的情況下還是蠻有用的,例如及不舉了，感興趣的朋友可以參考下，希望可以幫助到你2013-04-04
全面解析jQuery $(document).ready()和JavaScript onload事件
這篇文章主要介紹了全面解析jQuery $(document).ready()和JavaScript onload事件的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
jQuery實現(xiàn)回車鍵（Enter）切換文本框焦點的代碼實例
這篇文章主要介紹了jQuery實現(xiàn)回車鍵（Enter）切換文本框焦點的代碼實例,需要的朋友可以參考下2014-05-05
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)簡單的按鈕顏色變化，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
jQuery旋轉(zhuǎn)插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
網(wǎng)上發(fā)現(xiàn)一個很有意思的jQuery旋轉(zhuǎn)插件，支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome，高級瀏覽器下使用Transform，低版本ie使用VML實現(xiàn),感興趣的朋友可以了解下2013-01-01
這篇文章主要介紹了fullpage.js最后一屏不滿一屏?xí)r，滾動方式介紹，適合很多HTML5做的WEB頁面，需要的學(xué)習(xí)下吧。2018-02-02
jQuery中使用Ajax獲取JSON格式數(shù)據(jù)示例代碼
有時候我們需要讀取JSON格式的數(shù)據(jù)文件，在jQuery中可以使用Ajax或者 $.getJSON()方法實現(xiàn)，下面有個不錯的示例，需要的朋友可以參考下2013-11-11
jquery pagination插件實現(xiàn)無刷新分頁代碼
首先，我們要準備的文件有jquery.js,jquery.pagination.js,pagination.css,還有一個就是經(jīng)常用的table布局的css文件。這些文件都會在后面的文件中包含。2009-10-10
這篇文章主要介紹了jQuery隨機密碼生成的方法,實例分析了jQuery操作隨機數(shù)的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03