純js封裝的ajax功能函數(shù)與用法示例
本文實(shí)例講述了純js封裝的ajax功能函數(shù)與用法。分享給大家供大家參考,具體如下:
AJAX = Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)AJAX 不是新的編程語言,而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法。是7種技術(shù)的綜合,它包含了七個(gè)技術(shù)(javascript xml xstl xhtml dom xmlhttprequest , css), ajax 是一個(gè)粘合劑。
直接上程序:
js調(diào)用部分:
<script src="ds.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> <span style="white-space:pre;"> </span>window.onload=function(){ var oDs=document.getElementById('ds'); var oText=document.getElementById('text'); oDs.onclick=function(){ //第一個(gè)參數(shù):數(shù)據(jù)傳輸方式 get post //第二個(gè)參數(shù):調(diào)用文件的路徑 //第三個(gè)參數(shù):data //第四個(gè)參數(shù):回調(diào)函數(shù) ajax('GET','aa.txt','',function(str){ //此處是調(diào)用名字為aa的txt文件里所有的內(nèi)容(str),所以data直接為'' //如果需要插入特定參數(shù),則data值為 data='&name='+oText.value; console.log(str);//名字為aa的txt文件里所有的內(nèi)容 }); } } </script>
html部分:
<input type="button" name="ds" id="ds" value="彈出" /> <input type="text" value="" id="text"/>
ajax封裝部分:
function ajax(method, url, data, fnsuccess) { var xhr; //1.創(chuàng)建對(duì)象,兼容問題 if(window.XMLHttpRequest) { //在高版本的瀏覽器 IE7+ xhr = new XMLHttpRequest(); //XMLHttpRequest用于在后臺(tái)與服務(wù)器交換數(shù)據(jù)。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下,對(duì)網(wǎng)頁的某部分進(jìn)行更新。 } else { //IE5 IE6 xhr = new ActiveXObject(); } //2.發(fā)送請(qǐng)求 //第一個(gè)參數(shù):數(shù)據(jù)傳輸方式 get post //第二個(gè)參數(shù):處理文件 xx.php xx.txt ,要數(shù)據(jù):直接寫路徑就好;提交數(shù)據(jù):在地址那里寫數(shù)據(jù)(get方式) //第三個(gè)參數(shù):同步或者異步方式,默認(rèn)是異步true //open //get模式路徑上同時(shí)加入需要傳輸?shù)膬?nèi)容 if(method == 'GET' && data) { url = url + '?' + data; } xhr.open(method, url, true); //send //send()如果是get方式,寫null或者為空; //如果是post,參數(shù)那就直接寫要傳輸?shù)膬?nèi)容 if(method == 'GET') { xhr.send(null); } else { //創(chuàng)建頭文件信息 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send(data); } //4.接受php傳過來的數(shù)據(jù),解析 dom操作 xhr.onreadystatechange = function() { if(xhr.readyState == 4) {//響應(yīng)過程狀態(tài)信息,4代表發(fā)送完成,順利返回信息 if(xhr.status == 200) {//status:狀態(tài)碼,如果返回的信息是200 fnsuccess && fnsuccess(xhr.responseText); } else { alert(xhr.status);//發(fā)生錯(cuò)誤時(shí),返回該狀態(tài)碼 } } } }
表單驗(yàn)證,用戶名驗(yàn)證:
<form action="checkName.php" method="post"> <!--span標(biāo)簽是用于提示,用戶名重復(fù),以及可以注冊--> 用戶名:<input type="text" id="username" /><span id="inf"></span><br /> 密碼:<input type="password" /><br /> <input type="button" id="submit" value="提交" /> </form>
js調(diào)用部分:
<script src="ds.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> window.onload = function() { var oUsername = document.getElementById('username'); var oInf = document.getElementById('inf'); oUsername.onkeyup = function() { var data='&name=' + oUsername.value; //路徑連接的是php文件 ajax('GET','/0322/test/checkName.php',data,function(str){ oInf.innerHTML=str; }); } } </script>
php部分:
<?php // echo 輸出 // echo 'qwerrtty'; //3.獲取ajax傳來的信息,做處理,在返回給ajax:后臺(tái)做或者后臺(tái)協(xié)作。 //這里兩句話很重要,第一講話告訴瀏覽器返回的數(shù)據(jù)是xml格式 header("Content-Type: text/xml;charset=utf-8"); //告訴瀏覽器不要緩存數(shù)據(jù) header("Cache-Control: no-cache"); //返回xml txt json html $userName=$_GET['name']; if($userName=='admin'){//把內(nèi)容拿到,進(jìn)行判斷 echo '<result><mes>該用戶名重復(fù)了</mes></result>'; }else{ echo '<result><mes>該用戶名可以注冊</mes></result>'; } ?>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript中ajax操作技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
不間斷循環(huán)滾動(dòng)效果的實(shí)例代碼(必看篇)
下面小編就為大家?guī)硪黄婚g斷循環(huán)滾動(dòng)效果的實(shí)例代碼(必看篇)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10javascript上傳圖片前預(yù)覽圖片兼容大多數(shù)瀏覽器
上傳圖片前預(yù)覽圖片這種效果應(yīng)用比較廣泛,實(shí)現(xiàn)的方也大同小異,下面為大家介紹下,在javascript中是如何實(shí)現(xiàn)的,感興趣的朋友可以參考下2013-10-10手寫的一個(gè)兼容各種瀏覽器的javascript getStyle函數(shù)(獲取元素的樣式)
這篇文章主要介紹了手寫的一個(gè)兼容各種瀏覽器的javascript getStyle函數(shù),用來取元素的樣式,需要的朋友可以參考下2014-06-06JavaScript使用Promise控制并發(fā)請(qǐng)求
當(dāng)我們需要同時(shí)處理多個(gè)請(qǐng)求時(shí),如何避免請(qǐng)求之間的沖突和混亂呢,這就是今天我們要探討的話題——如何使用Promise控制并發(fā)請(qǐng)求,感興趣的可以了解一下2023-06-06js代碼驗(yàn)證手機(jī)號(hào)碼和電話號(hào)碼是否合法
這篇文章主要介紹了js代碼驗(yàn)證手機(jī)號(hào)碼和電話號(hào)碼是否合法,手機(jī)號(hào)碼和電話號(hào)碼在某些網(wǎng)站都是必填項(xiàng),為了提高用戶體驗(yàn)度,一般要進(jìn)行合法性校驗(yàn)的,需要的朋友可以參考下2015-07-07