1. 程式人生 > >如何用原生JS封裝Ajax

如何用原生JS封裝Ajax

編寫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判斷戶名存在核心代碼 附:原生jsAjax代碼

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

原生jsajax請求簡單封裝

小總結:  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.開始封裝函式

原生jsajax的請求函式封裝

    // 請求方式 // 請求地址 // 請求引數 // 返回值 <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

原生jsajax封裝

!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