关于java:Ajax简单应用入门

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

总结

重难点剖析

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

FAQ剖析

Ajax技术有什么劣势,劣势?(劣势:按需异步加载,部分更新,改善用户体验)
Ajax技术中最外围对象?(XMLHttpRequest-入口对象)
客户端JS问题如何调试?(打桩console.log(),debugger,排除法)
对于一些js框架你是如何学习？官网(，demo，实际-浏览器测试，搜索引擎)

BUG剖析

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

图-7

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

失落括号，如图-8所示

图-8

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

关于java:Ajax简单应用入门

Ajax 是什么？

Ajax 技术利用场景？

Ajax入门代码繁难实现

Ajax 根本业务实现

根本业务形容

服务端要害代码实现

客户端要害代码实现

客户端要害代码实现

Ajax 技术进阶实现

Ajax 要害代码的封装

Ajax 编程框架根本实现(理解)

Ajax 技术在Jquery中利用

Jquery 简介

query 中罕用Ajax 函数

Jquery 中罕用Ajax 函数利用案例分享

总结

重难点剖析

FAQ剖析

BUG剖析

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于java:Ajax简单应用入门

Ajax 是什么？

Ajax 技术利用场景？

Ajax入门代码繁难实现

Ajax 根本业务实现

根本业务形容

服务端要害代码实现

客户端要害代码实现

客户端要害代码实现

Ajax 技术进阶实现

Ajax 要害代码的封装

Ajax 编程框架根本实现(理解)

Ajax 技术在Jquery中利用

Jquery 简介

query 中罕用Ajax 函数

Jquery 中罕用Ajax 函数利用案例分享

总结

重难点剖析

FAQ剖析

BUG剖析

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复