1.Ajax 简介(背景介绍)

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

传统Web利用中繁难的同步模型剖析，如图-1所示：

基于Ajax技术的异步申请响应模型剖析，如图-2所示：

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

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

1.3Ajax 技术时序模型剖析？
传统Web利用中的，同步申请利用时序模型剖析，如图-3所示：

在图-3中，客户端向服务端向服务端发送申请须要期待服务端的响应后果，服务端返回数据当前，客户端能够持续发送申请。

基于Ajax技术的Web异步申请响应模型如图-4所示：

2.Ajax 疾速入门

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

2.2 Ajax 编程根本步骤剖析
第一步：基于dom事件创立XHR对象(XMLHttpRequest对象)

    //1.创立XHR对象  var xhr=new XMLHttpRequest();

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

        //2.设置状态监听         xhr.onreadystatechange=function(){             if(xhr.readyState==4&&xhr.status==200){                  console.log(xhr.responseText);                           }        };

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

 //3.建设连贯         xhr.open("GET","http://localhost/doAjaxGet",true);//true示意异步(底层会启动线程与服务端通信)

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

//4.发送申请        xhr.send();

第五步：通过回调（callback）函数，取得响应后果并进行数据更新.(非阻塞)

2.3 Ajax 申请响应编程操作实际

2.3.1 Ajax Get 申请操作实现
基于ajax技术中的XMLHttpRequest对象，向服务端发动异步Get申请，要害代码剖析如下：

          }       } //3.创立与服务端的连贯 xhr.open("GET",url+"?"+params,true);//true示意异步  //4.发送申请 xhr.send(null); //Get申请，send办法不传内容  //5.对响应后果进行解决(在回调函数中解决)。  }function doAjaxGet(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对象，咱们能够借助responseText获取响应后果 callback(xhr.responseText);            }       } //3.创立与服务端的连贯 xhr.open("GET",url+"?"+params,true);//true示意异步  //4.发送申请 xhr.send(null); //Get申请，send办法不传内容  //5.对响应后果进行解决(在回调函数中解决)。  }

课堂练习：基于时序图剖析，进行代码设计和实现，如图-5所示：

图-5中波及到的相干代码参考如下：

 @RequestMapping("doFindGoods") @ResponseBody  public List<Goods> doFindGoods(String name)throws Exception{                    List<Goods> list=goodsService.findGoods(name); return list;            }

服务端管制层要害代码实现：在管制层的doFindGoods办法中，通过业务层获取商品信息，并通过@ResponseBody注解对办法进行形容，用于通知SpringMVC将办法返回值转换为json格局的字符串。

}

客户端要害代码实现：在客户端页面通过doFindGoods办法，基于ajax技术异步获取商品信息，并将获取的商品信息更新到页面上。

function doFindGoods(){ //1.定义申请url  var url="doFindGoods"; //2.定义申请参数  var params=""; //3.发送异步申请 doAjaxGet(url,params,function(result){//callback  //将服务端响应的后果输入到控制台  console.log("result",result);//jsonStr  //解决响应后果(将响应后果更新到页面上)  doHandleResponseResult(result);                })        }

通过doHandleResponseResult办法将ajax取得的响应后果出现在页面上。

 function doHandleResponseResult(result){ //1.将json格局字符串转换为json格局的JS对象(字符串无奈间接提取内容)  var jsonObj=JSON.parse(result);//JSON为JS中的一个类  //2.迭代jsonObj数组对象，并将内容出现在tbody中  //2.1 将每一行内容封装到tr对象中  var trs=""  for(var i=0;i<jsonObj.length;i++){//循环一次取一行 trs+="<tr>"+ "<td>"+jsonObj\[i\].id+"</td>"+ "<td>"+jsonObj\[i\].name+"</td>"+ "<td>"+jsonObj\[i\].remark+"</td>"+ "<td>"+ new Date(jsonObj\[i\].createdTime).toLocaleString()+ "</td>"+ "<td>delete</td>"+ "</tr>" } //2.2将所有的tr增加到tbody中  var tBody=document.getElementById("tbodyId");                tBody.innerHTML=trs;        }

2.3.2 Ajax Post 申请操作实现
基于ajax中XMLHttpRequest对象，向服务端发动异步Post申请。对于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.对响应后果进行解决(在回调函数中解决)。  }

课堂练习：基于时序图剖析，进行代码设计和实现，如图-6所示：

图-6中波及到的相干代码参考如下：

@RequestMapping("doSaveGoods") @ResponseBody  public String doSaveGoods(Goods goods)throws Exception{ goodsService.saveGoods(goods); return “save ok”;            }

服务端管制层要害代码实现：在管制层的doSaveGoods办法中，通过业务层获取商品信息，并通过@ResponseBody注解对办法进行形容，用于通知SpringMVC将办法返回值转换为json格局的字符串。

 function doSaveGoods(){ //1.定义申请url  var url="doSaveGoods"; //2.定义申请参数  var nameObj=document.getElementById("nameId"); var remarkObj=document.getElementById("remarkId"); var params="name="+nameObj.value+"&remark="+remarkObj.value+; //3.发送异步申请 doAjaxPost(url,params,function(result){//callback alert(result)；                })        }

3.Ajax 技术在Jquery中利用

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

3.2.Jquery 中罕用Ajax 函数
jQuery中基于规范的ajax api 提供了丰盛的Ajax函数利用，基于这些函数能够编写大量代码，便能够疾速实现Ajax操作。罕用函数有：

  • ajax(…)
  • get(…)
  • getJSON(…)
  • post(…)
  • …

阐明:jquery 中ajax相干函数的语法可参考官网(jquery.com).

4.Ajax 章节总结

4.1重难点剖析

  1. 客户端与服务端通信时的申请响应模型?(同步,异步)

  2. Ajax编程的根本步骤
    step1，create XMLHttpRequest Object--入口对象-
    step2.设置状态监听。
    step3.关上与服务端的连贯

    step4.发送申请

    ajax编程步骤小例子，如图所示：

  3. Ajax利用场景？

    • 商品零碎。
    • 评估零碎。
    • 地图零碎。
    • …..etc
  4. JQuery框架中ajax函数的根本利用？(ajax(),get(),getJSON(...)， post(…) .....)

  5. JS代码编写过程中断点(debugger)的利用形式？

    具体步骤，如图所示![image](/img/bVbLcQH)

4.2FAQ剖析

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