怎么寫原生Ajax

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

 Ajax（Asynchronous JavaScript and XML的縮寫）是一種異步請求數據的web開發技術，對于改善用戶的體驗和頁面性能很有幫助。

簡單地說，在不需要重新刷新頁面的情況下，Ajax 通過異步請求加載后臺數據，并在網頁上呈現出來。常見運用場景有表單驗證是否登    入成功、百度搜索下拉框提示和快遞單號查詢等等。

想要對Ajax有一個全面的了解，這里可以去Js教程中對它進行一個全方面認識。

現在Ajax經過各種優化已經變得非常方便了，例如使用Jquery只需要一行便可以使用Ajax了。

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

讓我們來看一下吧。

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

readystate：

存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。

0: 請求未初始化

1: 服務器連接已建立

2: 請求已接收

3: 請求處理中

4: 請求已完成，且響應已就緒

status ：

200: "OK"

404: 未找到頁面

405：請求方式不正確

500：服務器內部錯誤

403：禁止請求

Ajax有兩種請求方式：

get請求方式

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

post請求方式

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

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。