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完之后的结果,还能够这样写
 }

Ajax 章节总结

重难点分析

  1. 客户端与服务端通信时的请求响应模型?(同步,异步)
  2. Ajax编程的基本步骤(入口对象-XMLHttpRequest),Ajax应用场景
  3. JQuery框架中ajax函数的基本应用？(ajax(),get(),getJSON(...).....)
  4. JS代码编写过程当中断点(debugger)的应用方式？

FAQ分析

  1. Ajax技术有什么优点,劣势?(优点:按需异步加载,局部更新,改善用户体验)
  2. Ajax技术中最核心对象?(XMLHttpRequest-入口对象)
  3. 客户端JS问题如何调试?(打桩console.log(),debugger,排除法)
  4. 对于一些js框架你是如何学习？官网(，demo，实践-浏览器测试，搜索引擎)
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程