Ajax的原生程式碼實現和jQuery實現
一、Ajax簡介
Ajax(Asynchhronous Javascript And XML)是指一種建立網頁應用的網頁開發技術。Ajax通過後臺與伺服器進行少量的資料交換,可以使網頁實現非同步更新,建立快速動態網頁,無需載入整個頁面的情況下,能夠更新部分網頁技術。Ajax不是一種新的程式語言,它是一種獨立於web伺服器軟體的瀏覽器技術。
在沒有Ajax的時候,客戶端提交資料後,會等待伺服器返回結果,期間出現假死狀態,直到伺服器返回結果才會載入新的頁面,呈現頁面請求結果。而使用Ajax就不會出現假死狀態,區域性重新整理資料而不影響整個頁面的呈現和使用,同時客戶端也沒有等待伺服器的返回結果的時間開銷,展現出良好的互動性。
Ajax的核心是XMLHttpRequest物件,這是一個Javascript物件。下面是XMLHttpRequest物件的一些方法描述:
方法 | 描述 |
Abort() | 停止當前請求 |
getAllResponseHeaders() | 把HTTP請求的所有響應首部作為鍵/值對返回 |
getResponseHeader("header") | 返回指定首部的串值 |
open("method","URL",[asyncFlag],["userName"],["password"]) | 建立對伺服器的呼叫。method引數可以是GET、POST或PUT。url引數可以是相對URL或絕對URL。這個方法還包括3個可選的引數,是否非同步,使用者名稱,密碼 |
send(content) | 向伺服器傳送請求 |
setRequestHeader("header", "value") | 把指定首部設定為所提供的值。在設定任何首部之前必須先呼叫open()。設定header並和請求一起傳送 ('post'方法一定要 ) |
接下來我們來看看實現Ajax的兩種方式(使用XMLHttpRequest物件做原生程式碼實現和基於Jquery實現),還有Ajax實現的GET和POST兩種方法。
二、原生程式碼實現Ajax
GET請求:
var request=false; function createRequest(){ try{ request=new XMLHttpRequest(); //建立XMLHttpRequest物件,大部分瀏覽器 }catch(trymicrosoft){ try{ request=new ActiveXObject("Msxml2.XMLHTTP"); //高版本Microsoft瀏覽器 }catch(othermicrosoft){ try{ request=new ActiveXObject("Microsoft.XMLHTTP"); //低版本Microsoft瀏覽器,如IE5、IE6 }catch(failed){ request=false; } } } if(!request){ alert("Error"); } } function getCustomerInfo(){ //1.建立非同步物件 createRequest(); //設定引數,與伺服器互動資訊 request.open("GET",url,true); //傳送請求 request.send(null); //註冊事件 request.onreadystatechange=function(){ //狀態碼 if(request.readyState==0||request.readyState==1||request.readyState==2||request.readyState==3){ //更新資料 document.getElementById("b").innerHTML="aaaaaaaa"; } if(request.readyState==4){ if(request.status==200){ //更新資料 document.getElementById("b").innerHTML=request.responseText; } } } }
POST請求:
var request=false;
function createRequest(){
try{
request=new XMLHttpRequest(); //建立XMLHttpRequest物件,大部分瀏覽器
}catch(trymicrosoft){
try{
request=new ActiveXObject("Msxml2.XMLHTTP"); //高版本Microsoft瀏覽器
}catch(othermicrosoft){
try{
request=new ActiveXObject("Microsoft.XMLHTTP"); //低版本Microsoft瀏覽器,如IE5、IE6
}catch(failed){
request=false;
}
}
}
if(!request){
alert("Error");
}
}
function getCustomerInfo(){
//1.建立非同步物件
createRequest();
//請求頭,POST請求必須要加
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//設定引數,與伺服器互動資訊
request.open("POST",url);
//傳送請求
request.send("name=iii&age=1");
//註冊事件
request.onreadystatechange=function(){
//狀態碼,判斷伺服器是否響應
if(request.readyState==4){
if(request.status==200){
//更新資料
}
}
}
}
注:onreadystatechange 是一個事件控制代碼。它的值 (state_Change) 是一個函式的名稱,當 XMLHttpRequest 物件的狀態發生改變時,會觸發此函式。狀態從 0 (uninitialized) 到 4 (complete) 進行變化。僅在狀態為 4 時,我們才執行程式碼。下面是有關的五個狀態:
狀態 | 名稱 | 描述 |
0 | Uninitialized | 初始化狀態。XMLHttpRequest 物件已建立或已被 abort() 方法重置。 |
1 | Open | open() 方法已呼叫,但是 send() 方法未呼叫。請求還沒有被髮送。 |
2 | Sent | Send() 方法已呼叫,HTTP 請求已傳送到 Web 伺服器。未接收到響應。 |
3 | Receiving | 所有響應頭部都已經接收到。響應體開始接收但未完成。 |
4 | Loaded | HTTP 響應已經完全接收。 |
三、基於jQuery
jQuery是一個快速、簡潔的JavaScript框架,它是一個優秀的JavaScript程式碼庫。利用它實現Ajax相對與原生程式碼實現好使多了。
GET請求:
$.get() 方法通過 HTTP GET 請求從伺服器上請求資料。
function ajax_get(){
$("button").click(function(){
//url請求地址,function 完成後執行的函式,引數為返回資料和狀態碼
$.get(url,function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
}
POST請求:
$.post() 方法通過 HTTP POST 請求從伺服器上請求資料。
function ajax_post(){
$("button").click(function(){
//url請求地址,請求傳送資料,完畢後執行函式
$.post(url,
{
name:"1",
},
function(data,status){
});
});
}
四、其他
下面談談jQuery簡單又強大的Ajax方法:loas() ,load()方法從伺服器載入資料,並把返回的資料放入被選元素中。
function test_load(){
$("button").click(function(){
//必需url,可選data與請求同一發送查詢字元,function方法完成後的執行函式
//responseTxt結果內容,statusTxt狀態,xhr包含 XMLHttpRequest 物件
$("#div1").load(url,data,function(responseTxt,statusTxt,xhr){
if(statusTxt=="success"){
}
if(statusTxt=="error"){
}
});
});
}
相關推薦
Ajax的原生程式碼實現和jQuery實現
一、Ajax簡介 Ajax(Asynchhronous Javascript And XML)是指一種建立網頁應用的網頁開發技術。Ajax通過後臺與伺服器進行少量的資料交換,可以使網頁實現非同步更
js和jQuery實現的Ajax
1. JS實現Ajax <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid
用JAVA和Jquery實現掃碼登入的原理和程式碼
貼上前端程式碼,供參考 <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <script type="text/javascript" src="js/jq
利用原生js和jQuery實現單選框的勾選和取消操作
根據以下的Demo,大概就可以看的明白 Demo: <html> <head> <script src='jquery-1.9.1.min.js'></sc
原生js和jQuery實現頁面跳轉的學習
js的實現 1.window.location.href方式 <script language="javascript" type="text/javascript">
網頁實時聊天之js和jQuery實現ajax長輪詢
js和jQuery實現ajax長輪詢眾所周知,HTTP協議是無狀態的,所以一次的請求都是一個單獨的事件,和前後都沒有聯絡。所以我們在解決網頁實時聊天時就遇到一個問題,如何保證與伺服器的長時間聯絡,從而源源不段地獲取資訊。一直以來的方式無非有這麼幾種:1、長連線,即伺服器端不斷
js和jquery實現回到頂層
left ret poi add 寬度 fadein soft 距離 jquery實現 js <!DOCTYPE html> <html> <head> <title>返回頂部</title> <styl
如何用CSS和jQuery實現一個側滑導航菜單
his 事件監聽 也有 font ajax size add tar 出現 為了建立導航菜單,讓我們先看看html結構:<!DOCTYPE html><html lang="en"><head> <meta charset="U
25.用js和jquery實現下拉列表的左右選擇
select2 hit color nts -type utf ctype block 標簽 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x
ajax的原生,偽造和jquery講解
ajaxjquery是對Ajax的一個封裝,真正的操作是封裝裏面的內容(基於內部調用原生的Ajax的XMLHTTPRequest)Ajax還有一種是偽造ajax,所為偽造就是不用XMLHTTPRequest,利用的瀏覽器的一種技術實現的 XmlHttpRequest對象介紹 XmlHttpRequest對象的
分別使用js和JQuery實現省市二級聯動
1.1html js中this指的是當前操作的物件 <tr> <td>籍貫</td> <td><select onchange="changeCity(this.value)" id="province" &g
分別使用js和JQuery實現全選和全不選
1.1html <table border="1" width="500" height="50" align="center"> <thead> <tr> <td colspan="4"><input type="butt
分別使用js和JQuery實現簡單的表格隔行變色以及高亮顯示
一、1.1隔行變色html 表格 使用<thead>和<tbody>標籤拆分表頭和內容 <table border="1" width="500" height="50" align="center" id="tb1"> <thead>
分別使用js和JQuery實現html首頁圖片輪播以及廣告圖片定時彈出
主要使用setInterval方法設定更新週期,clearInterval清除週期。(如果不清除會一直週期迴圈執行下去,而setTimeout只是在指定時間後執行一次,這裡完全可以替換為setTimeout方法) 一、js首頁輪播 第一步:確定事件(onload)併為
利用CSS和jquery 實現圓環統計圖
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>圓環統計圖</title> <script sr
Ajax原理以及實現(js實現以及jquery實現)
1.Ajax簡介 Ajax:非同步js,xml 非同步重新整理:如果網頁中某一個地方需要修改,非同步重新整理可以使只重新整理的地方修改,而不是全域性修改,比如,你看視訊點贊不可能你點一個贊就重新整理整個視訊頁面吧 2.js實現Ajax js: XMLHttpReques
利用html和Jquery實現照片牆(點選之後放大,再點選縮小)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jque
Ajax基礎學習筆記三—jQuery實現Ajax
1、 jQuery對Ajax操作進行封裝: 最底層採用的方法是:$.ajax(); 第二層是load(),$.get(),$.post(); 第三次是$.getScript()和$.getJSON(). 2、
js和jQuery實現雙擊表格變為可編輯狀態
看到別人的程式碼,自己分析加的備註,直接上程式碼! <style type="text/css"> body {font-size: 12px; } td {border-width: 1px;border-top-style: solid;border-rig
CSS3和jQuery實現的自定義美化Checkbox
效果圖: 是不是比預設的好看多了,個人的審美觀應該還是可以的。 接下來我們一起來看看實現這款美化版Checkbox的原始碼。主要思路是利用隱藏原來的checkbox和radiobox,用一個div來模擬checkbox/radiobox,並使用jQuery來完成選擇切換時的動畫效果。 先來看看H