Spring Boot(day08)

時間 2020-12-03

標籤 javascript html java jquery ajax 編程 json 設計模式 api 瀏覽器欄目 Spring 简体版

原文原文鏈接

Ajax 基本業務實現

基本業務描述

構建ajax-02頁面,首先,在文本框中註冊焦點事件,基於焦點事件判斷輸入內容是否存在.其次點擊save按鈕時,將用戶內容異步提交到服務器端.javascript

服務端關鍵代碼實現

在服務端AjaxConotroller中添加以下代碼,處理客戶端請求:html

private List<String> names=new ArrayList<String>();//假設這是存儲數據的表
 /**經過此方法校驗名字是否存在*/
 @RequestMapping("doCheck")
 @ResponseBody
 public String doCheck(String name) {
if(names.contains(name))
return "名字"+name+"已經存在,請選擇其它名字";
return "名字"+name+"不存在,能夠註冊";
 }

 /**將客戶端請求數據寫入到names對應的集合*/
 @RequestMapping("doSave")
 @ResponseBody
 public String doSave(String name) {
 System.out.println("name="+name);
 names.add(name);
 return "save ok";
 }

客戶端關鍵代碼實現

構建ajax-02頁面,而後添加關鍵元素.java

第一步:html關鍵表單元素設計jquery

<h1>The Ajax 02 Page</h1>
<fieldset>
 <legend>Ajax 表單請求</legend>
 <form>
 <input type="text" name="name" id="nameId" onblur="doCheck()" onfocus="doClear()">
 <input type="button" onclick="doSave()" value="Save">
 </form>
 <span id="result"></span>
</fieldset>

第二步:添加JS關鍵業務代碼ajax

<script type="text/javascript">
 function doClear(){
 document.getElementById("result").innerHTML="";
 }

 function doSave(){
 //1.建立XHR對象
 var xhr=new XMLHttpRequest();
 //2.設置狀態監聽
 xhr.onreadystatechange=function(){
  if(xhr.readyState==4&&xhr.status==200){
  document.getElementById("result").innerHTML="<font color='red'>"+xhr.responseText+"</font>";
  }
 };
 //3.打開連接
 //var name=document.getElementById("nameId").value;
 var  name=document.forms[0].name.value;
 xhr.open("POST","/doSave",true);
 //post請求要設置請求頭(規定)
 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 //4.發送請求
 xhr.send("name="+name);//Post請求send方法傳值
 }

 function doCheck(){//在此函數中向服務端發起異步請求,檢測name是否存在
 //1.建立XHR對象
 var xhr=new XMLHttpRequest();
 //2.設置狀態監聽
 xhr.onreadystatechange=function(){
  if(xhr.readyState==4&&xhr.status==200){
  document.getElementById("result").innerHTML="<font color='red'>"+xhr.responseText+"</font>";
  }
 };
 //3.打開連接
 //var name=document.getElementById("nameId").value;
 var  name=document.forms[0].name.value;
 console.log("name",name);
 xhr.open("GET","/doCheck?name="+name,true);
 //4.發送請求
 xhr.send(null);//Get請求send方法傳值
 }

Ajax 技術進階實現

Ajax 關鍵代碼的封裝

在實際編程過程當中咱們一般會封裝代碼共性,提取代碼特性.而後來提升代碼的可重用性.例如:編程

第一步:封裝AJax Get請求，關鍵代碼分析以下：json

function doAjaxGet(url,params,callback){
 //1.建立XmlHttpRequest對象
 var xhr=new XMLHttpRequest();
 //2.設置狀態監聽，監聽XmlHttpRequest對象與服務端通信的過程(例如鏈接是否創建，請求是否在處理，響應是否已產生)
 xhr.onreadystatechange=function(){//callback(回調函數)
 //基於xhr對象獲取的通信狀態，對響應數據進行處理

 //readyState狀態說明

 //0：未初始化，還沒有調用open() 方法

 //1：啓動。已經調用open() 方法，但還沒有調用send() 方法

 //2：發送。已經調用send() 方法，但還沒有接收到響應

 //3：接收。已經接收到部分響應

 //4：完成。已經接收到所有響應數據，並且已經能夠在客戶端使用了

 if(xhr.readyState==4&&xhr.status==200){//500表示服務端出錯了
  //服務端響應的結果會傳遞給XHR對象，咱們能夠藉助responseText獲取響應結果
  callback(xhr.responseText);
 }
 }
 //3.建立與服務端的鏈接
 xhr.open("GET",url+"?"+params,true);//true表示異步
 //4.發送請求
 xhr.send(null); //Get請求，send方法不傳內容
 //5.對響應結果進行處理(在回調函數中處理)。
}

第二步:封裝AJax Post請求，關鍵代碼分析以下：設計模式

function doAjaxPost(url,params,callback){
//1.建立XmlHttpRequest對象
var xhr=new XMLHttpRequest();
//2.設置狀態監聽，監聽XmlHttpRequest對象與服務端通信的過程.
xhr.onreadystatechange=function(){//callback(回調函數)
//基於xhr對象獲取的通信狀態，對響應數據進行處理
if(xhr.readyState==4&&xhr.status==200){//500表示服務端出錯了
//服務端響應的結果會傳遞給XHR對象，
 //咱們能夠藉助xhr.responseText獲取響應結果
callback(xhr.responseText);
}
}
//3.建立與服務端的鏈接
xhr.open("POST",url,true);//true表示異步
xhr.setRequestHeader("Content-Type",
 "application/x-www-form-urlencoded");
//4.發送請求
xhr.send(params); //post請求將參數寫到send方法
//5.對響應結果進行處理(在回調函數中處理)。
}

第三步:在業務方法中應用封裝好的代碼,例如:api

保存業務的關鍵客戶端代碼分析及實現.瀏覽器

function doSave(){
 //1.定義請求url
 var url="doSave";
 //2.定義請求參數
 var params="name="+document.forms[0].name.value;
 //3.發送異步的post請求
 doAjaxPost(url,params,function(result){
 document.getElementById("result").innerHTML=result;
 })
 }

檢查名字是否存在的關鍵客戶端代碼實現

function doCheck(){//在此函數中向服務端發起異步請求,檢測name是否存在
 //1.定義請求url
 var url="doCheck";
 //2.定義請求參數
 var name=document.forms[0].name.value;
 var params="name="+name;
 //3.發送異步Get請求
 doAjaxGet(url,params,function(result){
 document.getElementById("result").innerHTML=result;
 })
 }

調用過程分析：

斷點：調試分析：

Ajax 編程框架基本實現

咱們在實際的js編程中常常會以面向對象的方式進行實現，例如doAjaxGet函數如何以對象方式進行調用呢？關鍵代碼分析以下：

(function(){
//定義一個函數，能夠將其鏈接爲java中的類
var ajax=function(){}
//在變量ajax指向的類中添加成員，例如doAjaxGet函數，doAjaxPost函數
ajax.prototype={
 doAjaxGet:function(url,params,callback){
 //建立XMLHttpRequest對象，基於此對象發送請求
 var xhr=new XMLHttpRequest();
 //設置狀態監聽(監聽客戶端與服務端通信的狀態)
 xhr.onreadystatechange=function(){//回調函數，事件處理函數
 if(xhr.readyState==4&&xhr.status==200){
 //console.log(xhr.responseText);
 callback(xhr.responseText);//jsonStr
 }
 };
 //創建鏈接(請求方式爲Get,請求url,異步仍是同步-true表示異步)
 xhr.open("GET",url+"?"+params,true);
 //發送請求
 xhr.send(null);//GET請求send方法不寫內容
 },
 doAjaxPost:function(url,params,callback){
 //建立XMLHttpRequest對象，基於此對象發送請求
 var xhr=new XMLHttpRequest();
 //設置狀態監聽(監聽客戶端與服務端通信的狀態)
 xhr.onreadystatechange=function(){//回調函數，事件處理函數
 if(xhr.readyState==4&&xhr.status==200){
 //console.log(xhr.responseText);
 callback(xhr.responseText);//jsonStr
 }
 };
 //創建鏈接(請求方式爲POST,請求url,異步仍是同步-true表示異步)
 xhr.open("POST",url,true);
 //post請求傳參時必須設置此請求頭
 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 //發送請求
 xhr.send(params);//post請求send方法中傳遞參數
 }
}
window.Ajax=new ajax();//構建ajax對象並賦值給變量全局變量Ajax
})()

此時外界再調用doAjaxGet和doAjaxPost函數時，能夠直接經過Ajax對象進行實現。

Ajax 技術在Jquery中應用

===================

Jquery 簡介

jQuery是一個快速、簡潔的JavaScript庫框架，是一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是「write Less，Do More」，即倡導寫更少的代碼，作更多的事情。它封裝JavaScript經常使用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操做、事件處理、動畫設計和Ajax交互。

Jquery 中經常使用Ajax 函數

jQuery中基於標準的ajax api 提供了豐富的Ajax函數應用，基於這些函數能夠編寫少許代碼，即可以快速實現Ajax操做。經常使用函數有：
ajax(…)
get(…)
getJSON(…)
post(…)
說明:jquery 中ajax相關函數的語法可參考官網(jquery.com).

Jquery 中經常使用Ajax 函數應用案例分享

get函數應用,代碼以下

//向服務端發送Ajax Get 請求
 function doGet(){
  //1.定義請求的url
  var url="doAjaxGet";
  //2.定義請求的參數
  var params="msg=hello jquery ajax get";
  //3.發送異步Get請求
  //這裏的$符號爲jQuery中的一個對象
  //get(url[,params][,callback][,dataType])爲jquery中的一個ajax函數
  $.get(url,params,function(result){
  //document.getElementById("result").innerHTML=result;
  $("#result").html(result);
  },"text");//在這個函數中你看到ajax的代碼了嗎?
 }

post函數應用,代碼以下

//向服務端發送Ajax Post 請求
 function doPost(){
  //1.定義請求的url
  var url="doAjaxPost";
  //2.定義請求的參數
  var params="msg=hello jquery ajax Post";
  //3.發送異步POST請求
  //這裏的$符號爲jQuery中的一個對象
  //post(url[,params][,callback][,dataType])爲jquery中的一個ajax函數
  $.post(url,params,function(result){//post請求通常用於向服務端提交數據
  $("#result").html(result);
  });//在這個函數中你看到ajax的代碼了嗎?
 }

ajax函數應用

//向服務端發送Ajax Post 請求
 function doAjax(){
  //1.定義請求的url
  var url="doAjaxGet";
  //2.定義請求的參數
  var params="msg=hello jquery ajax request";
  //3.發送異步Get請求
  //這裏的$符號爲jQuery中的一個對象
  $.ajax({
  type:"GET",//表示get請求(默認爲get),省略不寫爲Get
  url:url,//":"左邊的內容爲語法定義,咱們不能修改.":"右邊爲咱們本身定義
  data:params,//請求參數
  async:true,//true表示異步
  success:function(result){ //回調函數
  $("#result").html(result);
  }
  });//在這個函數中你看到ajax的代碼了嗎?
 }

load函數應用

function doLoad(){
  //1.定義請求的url
  var url="doAjaxGet";
  //2.定義請求的參數
  var params="msg=hello jquery ajax request";
  //3.發送異步Get請求
  //在指定位置異步加載url對象的資源,
  //在當前應用中表示把url對象的資源呈現到#result位置.
  //$("#result").load(url,params,function(){//回調函數,資源加載完成執行此函數
  //  console.log("load complete");
  //});
  $("#result").load(url);//假如不向服務端傳值,不須要處理load完之後的結果,還能夠這樣寫
 }