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