如何用原生JS封裝Ajax

阿新 • • 發佈：2019-01-14

編寫Ajax的四個步驟：

1、建立Ajax物件；

ActiveXObject("Microsoft.XMLHTTP")

XMLHttpRequest()//IE7+, Firefox, Chrome, Opera, Safari

2、傳送請求（準備資料，真正傳送）；

send()

3、連線伺服器；

4、接收伺服器返回的資料，進一步分析處理，然後進行DOM的操作；

非同步請求必須處理readystatechange事件。在非同步請求中，XMLHttpRequest物件提供了readyState屬性，該屬性包含一個數值，每個值都代表請求生存期中的特定狀態（http就緒狀態）。如：

0：已經建立物件，但還沒有呼叫open()方法。
1：已經呼叫open()方法，但還沒有傳送請求。
2：請求已經發送，標題和狀態已經收到，並可用。
3：接收到來自伺服器的響應。
4：接收完請求資料，表示已經完成請求。 IE7+：1，2，3，4 。沒有0。其他瀏覽器：2，3，4 。沒有0和1。

在web瀏覽器中您可能經常看到過這幾個狀態碼：

200：存在請求檔案
- 401：未經授權
- 403：禁止訪問
- 404：沒有找到網頁

原生未封裝的Ajax函式如下：

get方式完整程式碼如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				function $(id){
					return document.getElementById(id);
				}
				
				function getXHR(){
					//1號線：建立ajax物件
					var oAjax;
					if(window.XMLHttpRequest){
						//IE7+, Firefox, Chrome, Opera, Safari
						oAjax=new XMLHttpRequest();
					}
					else{
						oAjax=new ActiveXObject("Microsoft.XMLHTTP")
					}
				
					return oAjax;
				}
				
				//驗證ajax物件是否建立成功
				
				$('btn').onclick=function(){
					var xhr=getXHR();
					
					//2號線：傳送請求(準備資料，真正的傳送)
					//open(get,url,true)
					//第一個引數：資料傳輸方式 get  post
					//第二個引數：處理檔案  xx.php xx.txt ,要資料：直接寫路徑就好；提交資料：在地址那裡寫資料（get方式）
					//第三個引數：同步或者非同步方式，預設是非同步true
					var url='/checkName.php?time='+new Date()+'&name='+$('username').value;
					xhr.open('GET',url,true);
					//send() 如果是get方式，寫null或者為空
					//如果是post，引數那就直接寫要傳輸的內容
					xhr.send(null);
					
					//4號線：接收3號線傳來的資料，進行處理
					
					xhr.onreadystatechange=function(){
						//alert('現在的狀態是：'+xhr.readyState);
						if(xhr.readyState==4){
							//alert(xhr.responseText);
							$('inf').innerHTML=xhr.responseText;
						}
						
						
					}
				}
	
			}
		</script>
	</head>
	<body>
		<form action="checkName.php" method="post">
			使用者名稱：<input type="text" id="username" /><input type="button" name="btn" id="btn" value="驗證" /><span id="inf"></span><br />
			密碼：<input type="password" /><br />
			
			<input type="submit" value="註冊"/>
		</form>
	</body>
</html>

處理頁面checkName.php

<?php
	
	//3號線：獲取ajax傳來的資訊，做處理，再返回給ajax：後臺做，或者後臺協作
	$userName=$_GET['name'];
	
	if($userName=='admin'){ //把內容拿到，進行判斷，輸出資訊返回給ajax
		echo '該使用者名稱不能使用'; 
	}
	
	else{
		echo '該使用者名稱能使用';
	}
	
?>

原生封裝的Ajax函式如下：

//引數有四個：傳輸的方式，路徑，資料，回撥函式
function ajax(method,url,data,fnsuccess){
	//1號線：建立ajax物件
	
	var xhr;
	if(window.XMLHttpRequest){
		xhr=new XMLHttpRequest();
	}
	else{
		xhr=new ActiveXObject('Microsoft.XMLHTTP');
		
	}
	
	//2號線：傳送http請求（準備資料，真正的傳送）
	
	if(method=='GET' && data){
		//如果是get方式，並且有data：傳資料到伺服器
		url=url+'?'+data;
		
	}
	xhr.open(method,url,true);
	
	if(method=='GET'){
		xhr.send(null);
	}
	else{
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		xhr.send(data);
	}
	
	
	//4號線：拿到的資料返回給呼叫ajax函式的地方
	
	xhr.onreadystatechange=function(){
		if(xhr.readyState==4){
			if(xhr.status==200){
				if(fnsuccess){
					fnsuccess(xhr.responseText);//注意這裡只能接收字串，json和html資料。如果傳過來的是xml資料格式，要換用responseXML屬性
				}
				
			}
			else{
				alert('出差了，出錯狀態是：'+xhr.status);
			}
		}
	}
}

自己做工具--用原生js封裝一個AJAX外掛

採用面向物件的思想封裝,相容get/post方式 1.get和post區別（1）get方式通過url位址列傳遞引數，post通過表單形式傳遞資料（2）傳輸的資料大小，get方式：普通瀏覽器只能傳輸2K資料，chrome瀏覽器傳輸8K，post方式：原則上不受限制，但

原生JS封裝Ajax

tex urlencode new text repl ons xmlhttp tolower 字符 function json2url(json){ 　　//json參數轉字符串　　json.t=‘‘+Math.random(); 　　json.t=json.t.rep

原生Js封裝ajax方法

() www toupper -type get data function form encodeuri // ajax封裝function ajax(options) { /** * 傳入方式默認為對象 * */ options = opti

用原生js實現ajax、jsonp

原生js 斜杠 lang settime 發送數據 tro upper 類型之前一、原生js實現ajax $.ajax({ url: ‘‘, type: ‘post‘, data: {name: ‘zhaobao‘, age: 20}, dataTy

用原生js封裝輪播圖

round this getc 行間樣式 gets -m ++ fun ted 原生js封裝輪播圖對於初學js的同學來說，輪播圖還是一個難點，尤其是原生js封裝輪播圖代碼，下面是我之前做的一個輪播圖項目中封裝好的一些代碼，有需要的同學可以看一下，有什麽不懂的可以看註釋，

原生JS封裝ajax以及request

一、封裝原生的xhr為ajax類 xhr以及用法見之前的文章 1、根據url確定請求的頭部以及別的資訊。 var _headerConfig = {}; if(url.indexOf('getcaptcha') !== -1) { _

如何用原生JS封裝Ajax

編寫Ajax的四個步驟： 1、建立Ajax物件； ActiveXObject("Microsoft.XMLHTTP") XMLHttpRequest()//IE7+, Firefox, Chrome, Opera, Safari 2、傳送請求（準備資料，真正傳送）； s

原生JS封裝AJAX函式

AJAX（Asynchronous Javascript And XML）非同步操作XML（JSON） function output(data){ console.log(JSON.parse(data)); }

Ajax (Asynchronous javascript xml) 搜索框核心代碼(JQuery) Ajax判斷用戶名存在核心代碼附:原生js的Ajax代碼

align tps 代碼 cati tco tst words mic var 前端 <script type="text/javascript"> $(function(){ $("#tid").keyup(function(){

用原生JS&PHP簡單的AJAX實例

show passwd script pos ner ID title 服務器端更改功能介紹： 1）file.html 使用 xmlhttp 請求服務器端文件 text ，並更新 file.html 的部分內容 2）update.html 使用 xmlhttp 通過 f

Ajax基礎之原生js封裝

既然要經常用到Ajax請求，封裝函式就很必要了，下面栗子的js程式碼，我們來進行封裝。 window.onload = function() { var oBtn = document.getElementById('bt

原生js的ajax請求簡單封裝

小總結： function ajax({url,type,data,dataType}){ return new Promise(function(open,err){ //1. 建立xhr物件 var xhr=new XMLHttpRequest(); /

JavaScript：使用原生JS封裝一個ajax相容性方法

ajax請求過程：需要有個裝置的支援，就是瀏覽器，沒瀏覽器ajax是發不出去的。需要有一個ajax物件。規定請求的方式，獲取誰家的資料。 ajax.open(method，url，true)初始化請求方式、請求資料地址、選擇非同步（true）還是同步（fal

ajax總結(四):原生js封裝a和jQurey版ajax介紹

一.為什麼要封裝? 發現很多地方都要用ajax請求，但是大部分程式碼都是一樣的，所以根據封裝的思想，相同的程式碼封裝成函式，在需要用的地方來呼叫,這樣會很方便. 二.js封裝ajax過程: 1.先了解結構程式碼和後臺程式碼: 結構: 後臺: 3.開始封裝函式

原生js的ajax的請求函式封裝

// 請求方式 // 請求地址 // 請求引數 // 返回值 <script> // 請求方式 // 請求地址 // 請求引數 // 返回值 function ajaxTools(pattern,url,parameter,func){ //

利用原生js封裝一個ajax api（一）

此係列文章主要分享一下如何利用原生js，自己封裝一個ajax api。本篇文章先來為此做一些前提準備，瞭解一下ajax請求少不了的XMLHttpRequest類。瀏覽器在XMLHttpRequest類上定義了他們的HTTP API。這個類的每一個例

使用原生js封裝的ajax（相容jsonp）

/* 封裝ajax函式 * @param {string}opt.type http連線的方式，包括POST和GET兩種方式 * @param {string}opt.url 傳送請求的url

原生js的ajax封裝

!function() { $z = {}; $z.isEmpty = function(arg) { return Boolean(arg === "" || arg === undefined || arg === null)

原生js實現Ajax方法及promise封裝

/* 1. open(method, url, async) 方法需要三個引數: 　 method：傳送請求所使用的方法（GET或POST）；與POST相比，GET更簡單也更快，並且在大部分情況下都能用；然而，在以下情況中，請使用POST請求：無法使用快取檔案

原生js封裝的ajax請求

function ajax(json){ var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new A

如何用原生JS封裝Ajax

相關推薦