Ajax實現(xiàn)步驟和原理解析
Ajax實現(xiàn)步驟和原理
一、什么是Ajax?
Ajax = 異步 JavaScript 和XML。
Ajax是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術。
通過在后臺與服務器進行少量數(shù)據(jù)交換，Ajax可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進行更新。
傳統(tǒng)的網(wǎng)頁（不使用 Ajax）如果需要更新內(nèi)容，必需重載整個網(wǎng)頁面。
二、Ajax工作原理
Ajax的工作原理相當于在用戶和服務器之間加了—個中間層(AJAX引擎),使用戶操作與服務器響應異步化。并不是所有的用戶請求都提交給服務器,像—些數(shù)據(jù)驗證和數(shù)據(jù)處理等都交給Ajax引擎自己來做, 只有確定需要從服務器讀取新數(shù)據(jù)時再由Ajax引擎代為向服務器提交請求。
Ajax（Asynchronous javascript and xml），實現(xiàn)了客戶端與服務器進行數(shù)據(jù)交流過程。使用技術的好處是：不用頁面刷新，并且在等待頁面?zhèn)鬏敂?shù)據(jù)的同時可以進行其他操作。
三、Ajax的使用及實現(xiàn)步驟
(1) 創(chuàng)建XMLHttpRequest對象,也就是創(chuàng)建一個異步調(diào)用對象.
(2) 創(chuàng)建一個新的HTTP請求,并指定該HTTP請求的方法、URL及驗證信息.
(3)設置響應HTTP請求狀態(tài)變化的函數(shù).
(4)發(fā)送HTTP請求.
(5)獲取異步調(diào)用返回的數(shù)據(jù).
(6)使用JavaScript和DOM實現(xiàn)局部刷新.
AJAX運行步驟與狀態(tài)值說明
在AJAX實際運行當中，對于訪問XMLHttpRequest（XHR）時并不是一次完成的，而是分別經(jīng)歷了多種狀態(tài)后取得的結(jié)果，對于這種狀態(tài)在AJAX中共有5種，分別是：
0 - (未初始化)還沒有調(diào)用send()方法
1 - (載入)已調(diào)用send()方法，正在發(fā)送請求
2 - (載入完成)send()方法執(zhí)行完成，
3 - (交互)正在解析響應內(nèi)容
4 - (完成)響應內(nèi)容解析完成，可以在客戶端調(diào)用了
對于上面的狀態(tài)，其中“0”狀態(tài)是在定義后自動具有的狀態(tài)值，而對于成功訪問的狀態(tài)（得到信息）我們大多數(shù)采用“4”進行判斷。
第一種：
通過 Promise 分裝的 Ajax
function Param(json) {
var arr = [];
for (var i in json) {
arr,
arr.push(i + "=" + json[i])
}
return arr.join("&");
}
function ajax(a) {
return new Promise(function(resolve, reject) {
a = a || {};
a.type = a.type || "get";
a.data = a.data || "";
var xhr = null;
// 處理兼容問題
xhr = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
if (a.type === "get") {
a.url += "?" + Param(a.data) + "&t=" + new Date().getTime();
//調(diào)用open()方法并采用異步方式
xhr.open("get", a.url, true);
//使用send()方法將請求發(fā)送出去
xhr.send();
} else if (a.type === "post") {
xhr.open("post", a.url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(Param(a.data))
}
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
resolve(JSON.parse(xhr.responseText));
} else {
reject("Err:" + xhr.status)
}
}
}
})
}第二種：
通過 class 構(gòu)造函數(shù)分裝的
Ajaxclass Ajax { constructor() {this.xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')
}
fn() {
this.xhr.onreadystatechange = () => {
if (this.xhr.readyState === 4) {
if (this.xhr.status === 200) {
if (responseType === 'json') {
resolve(JSON.parse(this.xhr.responseText))
} else {
resolve(this.xhr.responseText)
}
} else {
reject(new Error(this.xhr.status))
}
}
}
}
get(opt) {
return new Promise((resolve, reject) => {
let {
url,
async = true,
params = {},
responseType = 'json'
} = opt;
if (!url) {
return;
}
url = this.formatData(params) ? url + '?' + this.formatData(params) : url
this.xhr.open('get', url, async);
this.fn();
this.xhr.send();
})
}
post(opt) {
return new Promise((resolve, reject) => {
let {
url,
async = true,
params = {},
responseType = 'json',
paramsType = 'application/x-www-form-urlencoded'
} = opt;
if (!url) {
return;
}
this.xhr.open('post', url, async);
this.fn();
this.xhr.setRequestHeader('content-type', paramsType)
this.xhr.send(this.formatData(params, paramsType));
})
}
formatData(params, paramsType = 'application/x-www-form-urlencoded') {
if (paramsType === 'application/x-www-form-urlencoded') {
return Object.entries(params).map(val => val[0] + '=' + val[1]).join('&')
} else {
return JSON.stringify(params);
}
}
}AJAX狀態(tài)碼說明
1：請求收到，繼續(xù)處理
2：操作成功收到，分析、接受
3：完成此請求必須進一步處理
4：請求包含一個錯誤語法或不能完成
5：服務器執(zhí)行一個完全有效請求失敗*
再具體就如下：
100——客戶必須繼續(xù)發(fā)出請求
101——客戶要求服務器根據(jù)請求轉(zhuǎn)換HTTP協(xié)議版本
200——交易成功
201——提示知道新文件的URL
202——接受和處理、但處理未完成
203——返回信息不確定或不完整
204——請求收到，但返回信息為空
205——服務器完成了請求，用戶代理必須復位當前已經(jīng)瀏覽過的文件
206——服務器已經(jīng)完成了部分用戶的GET請求
300——請求的資源可在多處得到
301——刪除請求數(shù)據(jù)，重定向
302——在其他地址發(fā)現(xiàn)了請求數(shù)據(jù)
303——建議客戶訪問其他URL或訪問方式
304——客戶端已經(jīng)執(zhí)行了GET，但文件未變化
305——請求的資源必須從服務器指定的地址得到
306——前一版本HTTP中使用的代碼，現(xiàn)行版本中不再使用
307——申明請求的資源臨時性刪除
400——錯誤請求，如語法錯誤
401——請求授權失敗
402——保留有效ChargeTo頭響應
403——請求不允許
404——沒有發(fā)現(xiàn)文件、查詢或URl
405——用戶在Request-Line字段定義的方法不允許
406——根據(jù)用戶發(fā)送的Accept拖，請求資源不可訪問
407——類似401，用戶必須首先在代理服務器上得到授權
408——客戶端沒有在用戶指定的餓時間內(nèi)完成請求
409——對當前資源狀態(tài)，請求不能完成
410——服務器上不再有此資源且無進一步的參考地址
411——服務器拒絕用戶定義的Content-Length屬性請求
412——一個或多個請求頭字段在當前請求中錯誤
413——請求的資源大于服務器允許的大小
414——請求的資源URL長于服務器允許的長度
415——請求資源不支持請求項目格式
416——請求中包含Range請求頭字段，在當前請求資源范圍內(nèi)沒有range指示值，請求也不包含If-Range請求頭字段
417——服務器不滿足請求Expect頭字段指定的期望值，如果是代理服務器，可能是下一級服務器不能滿足請求
500——服務器產(chǎn)生內(nèi)部錯誤
501——服務器不支持請求的函數(shù)
502——服務器暫時不可用，有時是為了防止發(fā)生系統(tǒng)過載
503——服務器過載或暫停維修
504——關口過載，服務器使用另一個關口或服務來響應用戶，等待時間設定值較長
505——服務器不支持或拒絕支請求頭中指定的HTTP版本
Ajax前后端數(shù)據(jù)交互–SSM
前后臺數(shù)據(jù)交互均使用json。
框架ssm（spring+springmvc+mybatis）
@RequestBody注解實現(xiàn)接收http請求的json數(shù)據(jù)，將json數(shù)據(jù)轉(zhuǎn)換為java對象
@ResponseBody注解用于將Controller的方法返回的對象，通過HttpMessageConverter接口轉(zhuǎn)換為指定格式的數(shù)據(jù)如：json,xml等，通過Response響應給客戶端
1.導包
<dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.75</version> </dependency>
2.在配置映射器和適配器時使用
<mvc:annotation-driven></mvc:annotation-driven>
它默認加載了很多格式的解析器，例如JSON等，不需要手動配置。
案例
前端
// 跳轉(zhuǎn) 到tranferaddSub
$.ajax({
url : "/tranfermixtrue",
type : "POST",
dataType:"json",
contentType : "application/json;charset=UTF-8",
<!-- 向后端傳輸?shù)臄?shù)據(jù) -->
data : JSON.stringify({
id:getdate(),
accuracy:parseFloat(eval(right/50)),
exercises:cons,
degreeOfDifficulty:1
}),
success:function(result) {
},
error:function(result){
}
});后端
@RequestMapping(value = "/tranferaddSub")
public String tranferaddSub(@RequestBody Exercises exercises) {
// 作為addSUb的中轉(zhuǎn)站
ApplicationContext context = new ClassPathXmlApplicationContext("applicationContext.xml");
ExerciseSerivice serivice = context.getBean("ExerciseSeriviceImpl", ExerciseSerivice.class);
String jsonString = JSON.toJSONString(exercises);
Exercises exercisess = JSON.parseObject(jsonString, Exercises.class);
Map<String,Object> map = new HashMap<String,Object>();
map.put("date",exercisess.getId());
map.put("data",jsonString);
serivice.addExercise(map);
return "redirect:/addSub";
}
@RequestMapping(value = "/tranfermulDivide")
public String tranfermulDivide(@RequestBody Exercises exercises) {
// 作為mixtrue的中轉(zhuǎn)站
ApplicationContext context = new ClassPathXmlApplicationContext("applicationContext.xml");
ExerciseSerivice serivice = context.getBean("ExerciseSeriviceImpl", ExerciseSerivice.class);
String jsonString = JSON.toJSONString(exercises);
Exercises exercisess = JSON.parseObject(jsonString, Exercises.class);
Map<String,Object> map = new HashMap<String,Object>();
map.put("date",exercisess.getId());
map.put("data",jsonString);
serivice.addExercise(map);
return "redirect:/mulDivide";
}
@RequestMapping(value = "/tranfermixtrue")
public String tranfermixtrue(@RequestBody Exercises exercises) {
// 作為mixtrue的中轉(zhuǎn)站
ApplicationContext context = new ClassPathXmlApplicationContext("applicationContext.xml");
ExerciseSerivice serivice = context.getBean("ExerciseSeriviceImpl", ExerciseSerivice.class);
String jsonString = JSON.toJSONString(exercises);
Exercises exercisess = JSON.parseObject(jsonString, Exercises.class);
Map<String,Object> map = new HashMap<String,Object>();
map.put("date",exercisess.getId());
map.put("data",jsonString);
serivice.addExercise(map);
return "redirect:/mixtrue";
}
@RequestBody將傳入的json數(shù)據(jù)轉(zhuǎn)換位items對象，而@ResponseBody將return的i對象轉(zhuǎn)換成json格式返回給jsp頁面。
注：保證json的key和對應的pojo類的字段一致
到此這篇關于Ajax實現(xiàn)步驟和原理的文章就介紹到這了,更多相關Ajax實現(xiàn)步驟和原理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
- AJAX亂碼與異步同步以及封裝jQuery庫實現(xiàn)步驟詳解
- jquery?ajax實現(xiàn)文件上傳提交的實戰(zhàn)步驟
- 實現(xiàn)AJAX異步調(diào)用和局部刷新的基本步驟
- js 實現(xiàn)ajax發(fā)送步驟過程詳解
- 利用AjaxControlToolkit實現(xiàn)百度搜索時的下拉列表提示詳細步驟
- AJAX的原理—如何做到異步和局部刷新【實現(xiàn)代碼】
- 談談Ajax原理實現(xiàn)過程
- 利用iframe實現(xiàn)ajax跨域通信的實現(xiàn)原理(圖解)
- Ajax二級聯(lián)動菜單實現(xiàn)原理及代碼
- js/ajax跨越訪問-jsonp的原理和實例(javascript和jquery實現(xiàn)代碼)
相關文章
這篇文章主要介紹了Ajax上傳文件進度條Codular的相關資料,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了ajax同步驗證單號是否存在的方法,涉及基于ajax的數(shù)據(jù)交互相關操作技巧,需要的朋友可以參考下2016-08-08
比getjson好的底層函數(shù)是哪個有什么優(yōu)點
比getjson好的底層函數(shù)優(yōu)點在于如果網(wǎng)絡出問題了,可以通過error方法來告訴用戶出錯,需要的朋友可以參考下2014-02-02
這篇文章主要介紹了Ajax返回值類型與用法,結(jié)合實例形式分析了ajax返回值的xml類型與文本類型詳細分類、用法與相關操作注意事項,需要的朋友可以參考下2019-07-07
Django是一個開放源代碼的Web應用框架，由Python寫成，本文給大家介紹Django框架如何使用ajax的post方法，感興趣的朋友跟著小編一起來學習學習吧2015-09-09
這篇文章主要介紹了JSP+Ajax 添加、刪除多選框2006-10-10
SpringMVC+Jquery實現(xiàn)Ajax功能
SpringMVC：是基于Spring的一個子框架(MVC框架)，功能強于Spring，這個框架主要是解決咱們Controller這一層的問題。這篇文章主要介紹了SpringMVC+Jquery實現(xiàn)Ajax功能,需要的朋友可以參考下2019-06-06
Ajax 是一個令人誤導的名稱,Ajax 應用程序可能使用 XML 來傳輸數(shù)據(jù),但將數(shù)據(jù)作為純文本或 JSON 文本傳輸也同樣常見,本文給大家介紹ajax設置header指南教程,感興趣的朋友一起看看吧2023-10-10
本篇文章主要介紹了前端ajax的各種與后端交互的相關知識，具有很好的參考價值。下面跟著小編一起來看下吧2017-05-05
jquery1.8版本使用ajax實現(xiàn)微信調(diào)用出現(xiàn)的問題分析及解決辦法
這篇文章主要介紹了jquery1.8版本使用ajax實現(xiàn)微信調(diào)用出現(xiàn)的問題分析及解決辦法的相關資料,需要的朋友可以參考下2015-11-11