欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Ajax實(shí)現(xiàn)步驟和原理解析

 更新時(shí)間:2023年11月13日 10:22:51   作者:高橋涼介@  
Ajax是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁的技術(shù),Ajax的工作原理相當(dāng)于在用戶和服務(wù)器之間加了—個(gè)中間層(AJAX引擎),使用戶操作與服務(wù)器響應(yīng)異步化,這篇文章主要介紹了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)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論