Ajax實(shí)現(xiàn)步驟和原理解析
Ajax實(shí)現(xiàn)步驟和原理
一、什么是Ajax?
Ajax = 異步 JavaScript 和XML。
Ajax是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁的技術(shù)。
通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,Ajax可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下,對網(wǎng)頁的某部分進(jìn)行更新。
傳統(tǒng)的網(wǎng)頁(不使用 Ajax)如果需要更新內(nèi)容,必需重載整個(gè)網(wǎng)頁面。
二、Ajax工作原理
Ajax的工作原理相當(dāng)于在用戶和服務(wù)器之間加了—個(gè)中間層(AJAX引擎),使用戶操作與服務(wù)器響應(yīng)異步化。并不是所有的用戶請求都提交給服務(wù)器,像—些數(shù)據(jù)驗(yàn)證和數(shù)據(jù)處理等都交給Ajax引擎自己來做, 只有確定需要從服務(wù)器讀取新數(shù)據(jù)時(shí)再由Ajax引擎代為向服務(wù)器提交請求。
Ajax(Asynchronous javascript and xml),實(shí)現(xiàn)了客戶端與服務(wù)器進(jìn)行數(shù)據(jù)交流過程。使用技術(shù)的好處是:不用頁面刷新,并且在等待頁面?zhèn)鬏敂?shù)據(jù)的同時(shí)可以進(jìn)行其他操作。
三、Ajax的使用及實(shí)現(xiàn)步驟
(1) 創(chuàng)建XMLHttpRequest對象,也就是創(chuàng)建一個(gè)異步調(diào)用對象.
(2) 創(chuàng)建一個(gè)新的HTTP請求,并指定該HTTP請求的方法、URL及驗(yàn)證信息.
(3)設(shè)置響應(yīng)HTTP請求狀態(tài)變化的函數(shù).
(4)發(fā)送HTTP請求.
(5)獲取異步調(diào)用返回的數(shù)據(jù).
(6)使用JavaScript和DOM實(shí)現(xiàn)局部刷新.
AJAX運(yùn)行步驟與狀態(tài)值說明
在AJAX實(shí)際運(yùn)行當(dāng)中,對于訪問XMLHttpRequest(XHR)時(shí)并不是一次完成的,而是分別經(jīng)歷了多種狀態(tài)后取得的結(jié)果,對于這種狀態(tài)在AJAX中共有5種,分別是:
0 - (未初始化)還沒有調(diào)用send()方法
1 - (載入)已調(diào)用send()方法,正在發(fā)送請求
2 - (載入完成)send()方法執(zhí)行完成,
3 - (交互)正在解析響應(yīng)內(nèi)容
4 - (完成)響應(yīng)內(nèi)容解析完成,可以在客戶端調(diào)用了
對于上面的狀態(tài),其中“0”狀態(tài)是在定義后自動(dòng)具有的狀態(tài)值,而對于成功訪問的狀態(tài)(得到信息)我們大多數(shù)采用“4”進(jìn)行判斷。
第一種:
通過 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:完成此請求必須進(jìn)一步處理
4:請求包含一個(gè)錯(cuò)誤語法或不能完成
5:服務(wù)器執(zhí)行一個(gè)完全有效請求失敗*
再具體就如下:
100——客戶必須繼續(xù)發(fā)出請求
101——客戶要求服務(wù)器根據(jù)請求轉(zhuǎn)換HTTP協(xié)議版本
200——交易成功
201——提示知道新文件的URL
202——接受和處理、但處理未完成
203——返回信息不確定或不完整
204——請求收到,但返回信息為空
205——服務(wù)器完成了請求,用戶代理必須復(fù)位當(dāng)前已經(jīng)瀏覽過的文件
206——服務(wù)器已經(jīng)完成了部分用戶的GET請求
300——請求的資源可在多處得到
301——刪除請求數(shù)據(jù),重定向
302——在其他地址發(fā)現(xiàn)了請求數(shù)據(jù)
303——建議客戶訪問其他URL或訪問方式
304——客戶端已經(jīng)執(zhí)行了GET,但文件未變化
305——請求的資源必須從服務(wù)器指定的地址得到
306——前一版本HTTP中使用的代碼,現(xiàn)行版本中不再使用
307——申明請求的資源臨時(shí)性刪除
400——錯(cuò)誤請求,如語法錯(cuò)誤
401——請求授權(quán)失敗
402——保留有效ChargeTo頭響應(yīng)
403——請求不允許
404——沒有發(fā)現(xiàn)文件、查詢或URl
405——用戶在Request-Line字段定義的方法不允許
406——根據(jù)用戶發(fā)送的Accept拖,請求資源不可訪問
407——類似401,用戶必須首先在代理服務(wù)器上得到授權(quán)
408——客戶端沒有在用戶指定的餓時(shí)間內(nèi)完成請求
409——對當(dāng)前資源狀態(tài),請求不能完成
410——服務(wù)器上不再有此資源且無進(jìn)一步的參考地址
411——服務(wù)器拒絕用戶定義的Content-Length屬性請求
412——一個(gè)或多個(gè)請求頭字段在當(dāng)前請求中錯(cuò)誤
413——請求的資源大于服務(wù)器允許的大小
414——請求的資源URL長于服務(wù)器允許的長度
415——請求資源不支持請求項(xiàng)目格式
416——請求中包含Range請求頭字段,在當(dāng)前請求資源范圍內(nèi)沒有range指示值,請求也不包含If-Range請求頭字段
417——服務(wù)器不滿足請求Expect頭字段指定的期望值,如果是代理服務(wù)器,可能是下一級服務(wù)器不能滿足請求
500——服務(wù)器產(chǎn)生內(nèi)部錯(cuò)誤
501——服務(wù)器不支持請求的函數(shù)
502——服務(wù)器暫時(shí)不可用,有時(shí)是為了防止發(fā)生系統(tǒng)過載
503——服務(wù)器過載或暫停維修
504——關(guān)口過載,服務(wù)器使用另一個(gè)關(guān)口或服務(wù)來響應(yīng)用戶,等待時(shí)間設(shè)定值較長
505——服務(wù)器不支持或拒絕支請求頭中指定的HTTP版本
Ajax前后端數(shù)據(jù)交互–SSM
前后臺(tái)數(shù)據(jù)交互均使用json。
框架ssm(spring+springmvc+mybatis)
@RequestBody注解實(shí)現(xiàn)接收http請求的json數(shù)據(jù),將json數(shù)據(jù)轉(zhuǎn)換為java對象
@ResponseBody注解用于將Controller的方法返回的對象,通過HttpMessageConverter接口轉(zhuǎn)換為指定格式的數(shù)據(jù)如:json,xml等,通過Response響應(yīng)給客戶端
1.導(dǎo)包
<dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.75</version> </dependency>
2.在配置映射器和適配器時(shí)使用
<mvc:annotation-driven></mvc:annotation-driven>
它默認(rèn)加載了很多格式的解析器,例如JSON等,不需要手動(dòng)配置。
案例
前端
// 跳轉(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和對應(yīng)的pojo類的字段一致
到此這篇關(guān)于Ajax實(shí)現(xiàn)步驟和原理的文章就介紹到這了,更多相關(guān)Ajax實(shí)現(xiàn)步驟和原理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- AJAX亂碼與異步同步以及封裝jQuery庫實(shí)現(xiàn)步驟詳解
- jquery?ajax實(shí)現(xiàn)文件上傳提交的實(shí)戰(zhàn)步驟
- 實(shí)現(xiàn)AJAX異步調(diào)用和局部刷新的基本步驟
- js 實(shí)現(xiàn)ajax發(fā)送步驟過程詳解
- 利用AjaxControlToolkit實(shí)現(xiàn)百度搜索時(shí)的下拉列表提示詳細(xì)步驟
- AJAX的原理—如何做到異步和局部刷新【實(shí)現(xiàn)代碼】
- 談?wù)凙jax原理實(shí)現(xiàn)過程
- 利用iframe實(shí)現(xiàn)ajax跨域通信的實(shí)現(xiàn)原理(圖解)
- Ajax二級聯(lián)動(dòng)菜單實(shí)現(xiàn)原理及代碼
- js/ajax跨越訪問-jsonp的原理和實(shí)例(javascript和jquery實(shí)現(xiàn)代碼)
相關(guān)文章
比getjson好的底層函數(shù)是哪個(gè)有什么優(yōu)點(diǎn)
比getjson好的底層函數(shù)優(yōu)點(diǎn)在于如果網(wǎng)絡(luò)出問題了,可以通過error方法來告訴用戶出錯(cuò),需要的朋友可以參考下2014-02-02SpringMVC+Jquery實(shí)現(xiàn)Ajax功能
SpringMVC:是基于Spring的一個(gè)子框架(MVC框架),功能強(qiáng)于Spring,這個(gè)框架主要是解決咱們Controller這一層的問題。這篇文章主要介紹了SpringMVC+Jquery實(shí)現(xiàn)Ajax功能,需要的朋友可以參考下2019-06-06jquery1.8版本使用ajax實(shí)現(xiàn)微信調(diào)用出現(xiàn)的問題分析及解決辦法
這篇文章主要介紹了jquery1.8版本使用ajax實(shí)現(xiàn)微信調(diào)用出現(xiàn)的問題分析及解決辦法的相關(guān)資料,需要的朋友可以參考下2015-11-11