关于java:Ajax简单应用入门

44次阅读

共计 10644 个字符，预计需要花费 27 分钟才能阅读完成。

Ajax 是什么？

Ajax (Asynchronous JavaScript and XML) 是一种 Web 利用技术, 能够借助客户端脚本 (javascript) 与服务端利用进行异步通信，获取服务端数据当前, 能够进行部分刷新。进而进步数据的响应和渲染速度。

Ajax 技术利用场景？

Ajax 技术最大的劣势就是底层异步, 而后部分刷新, 进而进步用户体验, 这种技术当初在很多我的项目中都有很好的利用, 例如:

  • 商品零碎。
  • 评估零碎。
  • 地图零碎。
  • …..

    AJAX 能够仅向服务器发送并取回必要的数据，并在客户端采纳 JavaScript 解决来自服务器的响应。这样在服务器和浏览器之间替换的数据大量缩小，服务器响应的速度就更快了。但 Ajax 技术也有劣势，最大劣势是不能间接进行跨域拜访。

    Ajax 申请响应过程剖析

所有的 Ajax 申请都会基于 DOM(HTML 元素)事件，通过 XHR（XMLHttpRequest）对象实现与服务端异步通信部分更新，如图 - 4 所示：

图 -4

基于图 - 4 的剖析,Ajax 利用的编程步骤如下:

第一步：基于 dom 事件创立 XHR 对象(XMLHttpRequest 对象)

第二步：注册 XHR 对象状态监听，通过回调函数 (callback) 解决状态信息。

第三步：创立与服务端的连贯

第四步：发送异步申请实现与服务端的通信

Ajax 入门代码繁难实现

业务形容, 设计如下页面, 在页面上点击 Get Request 按钮时, 向服务端发送异步申请获取服务端数据, 而后将响应后果更新到页面上.

第一步: 服务端代码设计

创立 AjaxController 类, 用于解决客户端申请

package com.cy.ajax.controller;@Controller
@RequestMapping("/")
public class AjaxController {@RequestMapping("doAjax01UI") 
public String doAjax01UI() {return "ajax-01";} 
           // 解决 ajax 申请的服务端设计         
          @RequestMapping("doAjaxGet")
          @ResponseBody // 将办法返回值以字符串模式进行输入  
          public String doAjaxGet() throws Exception{System.out.println("==doGet()=="); 
                  //Thread.sleep(3000);
                  // 模仿耗时操作  return "Ajax Get request result";
          }
          
}

第二步: 客户端代码设计

客户端页面要害 dom 元素设计:

 <!-- Ajax 形式的异步申请测试 -->
  <fieldset> <!-- 分组设置 -->
    <legend> 异步申请 </legend>
    <button onclick="doAjaxGet()">Get Request</button>
    <span id="ajaxResultId">loading data ....</span>
  </fieldset>

客户端页面中要害 Ajax 代码设计与实现

//Ajax 形式的申请 
function doAjaxGet(){// 谬误调试:debugger,console.log(), 排除法  
//1. 创立 XHR 对象 var xhr=new XMLHttpRequest(); 
//2. 设置状态监听(将服务端响应的后果更新到 ajaxResultId 地位) 
xhr.onreadystatechange=function(){ //console.log(xhr.readState);  
if(xhr.readyState==4&&xhr.status==200){console.log(xhr.responseText);
 document.getElementById("ajaxResultId").innerHTML=xhr.responseText;
                }
           }; 
 //3. 建设连贯 
 xhr.open("GET","http://localhost/doGet",true);
 //true 示意异步(底层会启动线程与服务端通信) 
 //4. 发送申请 xhr.send();}

Ajax 根本业务实现

根本业务形容

构建 ajax-02 页面, 首先, 在文本框中注册焦点事件, 基于焦点事件判断输出内容是否存在. 其次点击 save 按钮时, 将用户内容异步提交到服务器端.

服务端要害代码实现

在服务端 AjaxConotroller 中增加如下代码, 解决客户端申请:

 private List<String> names=new ArrayList<String>();
 // 假如这是存储数据的表  
 @RequestMapping("doAjax02UI") 
 public String doAjax02UI() {return "ajax-02";} 
 /** 通过此办法校验名字是否存在 */ 
          @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 页面, 而后增加要害元素.

第一步:html 要害表单元素设计

 <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-02 页面, 而后增加要害元素.

第一步:html 要害表单元素设计

 <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 要害业务代码

<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. 关上链接  
     
     //varname=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 办法传值 }
<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. 关上链接               //varname=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. 关上链接  
           
           //varname=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 申请，要害代码剖析如下：

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. 对响应后果进行解决(在回调函数中解决)。}

第三步: 在业务办法中利用封装好的代码, 例如:

保留业务的要害客户端代码剖析及实现.

 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 编程中常常会以面向对象的形式进行实现，例如 2.3 章节中 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 技术在 Jquery 中利用

Jquery 简介

jQuery 是一个疾速、简洁的 JavaScript 框架，是一个优良的 JavaScript 代码库（或 JavaScript 框架）。jQuery 设计的主旨是“write Less，Do More”，即提倡写更少的代码，做更多的事件。它封装 JavaScript 罕用的性能代码，提供一种简便的 JavaScript 设计模式，优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互。

query 中罕用 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 完当前的后果, 还能够这样写 }

总结

重难点剖析

  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，实际 - 浏览器测试，搜索引擎)

BUG 剖析

  1. 单词拼写错误, 如图 - 7 所示：

图 -7

问题剖析：点击谬误提醒中的 54 行代码，看看是不单词拼写错误，查看 param 单词在哪定义了。

  1. 失落括号，如图 - 8 所示

图 -8

问题剖析：点击谬误提醒中的 59 行代码，看看是不是失落了小括号“)”。

正文完
java
发表至： java
2020-11-10
 0
关于java:Elasticsearch-Logstash-Kibana搭建ELK日志分析平台官方推荐的BEATS架构
关于java:Mybatis如何执行Select语句你真的知道吗
Java并发编程（一）Thread详解
视觉中国进入“黑洞”，区块链维权什么也不能做吗？