怎么寫原生Ajax

怎么寫原生Ajax？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

左云網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,左云網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為左云近千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的左云做網(wǎng)站的公司定做！

Ajax（Asynchronous JavaScript and XML的縮寫）是一種異步請(qǐng)求數(shù)據(jù)的web開發(fā)技術(shù)，對(duì)于改善用戶的體驗(yàn)和頁面性能很有幫助。

簡(jiǎn)單地說，在不需要重新刷新頁面的情況下，Ajax 通過異步請(qǐng)求加載后臺(tái)數(shù)據(jù)，并在網(wǎng)頁上呈現(xiàn)出來。常見運(yùn)用場(chǎng)景有表單驗(yàn)證是否登入成功、百度搜索下拉框提示和快遞單號(hào)查詢等等。

想要對(duì)Ajax有一個(gè)全面的了解，這里可以去Js教程中對(duì)它進(jìn)行一個(gè)全方面認(rèn)識(shí)。

現(xiàn)在Ajax經(jīng)過各種優(yōu)化已經(jīng)變得非常方便了，例如使用Jquery只需要一行便可以使用Ajax了。

怎么寫原生Ajax

那么原生的Ajax是什么樣呢？

讓我們來看一下吧。

 <script type="text/javascript">
	function ajax(url){
		//創(chuàng)建XMLHttpRequest對(duì)象,新版本的瀏覽器可以直接創(chuàng)建XMLHttpRequest對(duì)象,IE5或IE6沒有
		//XMLHttpRequest對(duì)象，而是用的ActiveXObject對(duì)象
	       var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject("microsoft.XMLHttp")
	       xhr.open("get",url,true);
	       xhr.send();//發(fā)送請(qǐng)求
	       xhr.onreadysattechange = () =>{
	           if(xhr.readystate == 4){//返回存有 XMLHttpRequest 的狀態(tài)。從 0 到 4 發(fā)生變化。
	               if(xhr.status == 200){//返回狀態(tài)碼
	                   var data = xhr.responseTEXT;
	                   return data;
	               }
	           }
	       }    
	   }
</script>

readystate：

存有 XMLHttpRequest 的狀態(tài)。從 0 到 4 發(fā)生變化。

0: 請(qǐng)求未初始化

1: 服務(wù)器連接已建立

2: 請(qǐng)求已接收

3: 請(qǐng)求處理中

4: 請(qǐng)求已完成，且響應(yīng)已就緒

status ：

200: "OK"

404: 未找到頁面

405：請(qǐng)求方式不正確

500：服務(wù)器內(nèi)部錯(cuò)誤

403：禁止請(qǐng)求

Ajax有兩種請(qǐng)求方式：

get請(qǐng)求方式

<script type="text/javascript">
	function ajax() {
		//創(chuàng)建核心對(duì)象
		xhr = null;
		if (window.XMLHttpRequest) {// 新版本的瀏覽器可以直接創(chuàng)建XMLHttpRequest對(duì)象
			xhr = new XMLHttpRequest();
		} else if (window.ActiveXObject) {// IE5或IE6沒有XMLHttpRequest對(duì)象
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
		//編寫回調(diào)函數(shù)
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4 && xhr.status == 200) {
				alert(xhr.responseText)
			}
		}
		//open設(shè)置請(qǐng)求方式和請(qǐng)求路徑
		xhr.open("get", "/Ajax/ajax?userId=10");//一個(gè)url還傳遞了數(shù)據(jù)，后面還可以寫是否同步
		//send 發(fā)送
		xhr.send();
	}
</script>

post請(qǐng)求方式

<script type="text/javascript">
	function ajax() {
		//創(chuàng)建核心對(duì)象
		xhr = null;
		if (window.XMLHttpRequest) {// 新版本的瀏覽器可以直接創(chuàng)建XMLHttpRequest對(duì)象.
			xhr = new XMLHttpRequest();
		} else if (window.ActiveXObject) {// IE5或IE6沒有XMLHttpRequest對(duì)象
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
		//編寫回調(diào)函數(shù)
		xhr.onreadystatechange = function() {	
			if (xhr.readyState == 4 && xhr.status == 200) {
				alert(xhr.responseText)//警告框，顯示返回的Text
			}
		}
		//open設(shè)置請(qǐng)求方式和請(qǐng)求路徑
		xhr.open("post", "/Ajax/ajax2");//一個(gè)servlet，后面還可以寫是否同步
		//設(shè)置請(qǐng)求頭
		xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")
		//send 發(fā)送
		xhr.send("userId=10");
	}
</script>

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。

文章名稱：怎么寫原生Ajax
文章分享：http://bm7419.com/article46/isgjeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、服務(wù)器托管、全網(wǎng)營(yíng)銷推廣、定制開發(fā)、網(wǎng)站策劃、品牌網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容