关于javascript:Ajax-技术应用

5次阅读

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

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.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.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.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.1 重难点剖析

客户端与服务端通信时的申请响应模型?(同步, 异步)
Ajax 编程的根本步骤
step1，create XMLHttpRequest Object– 入口对象 -
step2. 设置状态监听。
step3. 关上与服务端的连贯
```
step4. 发送申请
```
ajax 编程步骤小例子，如图所示：
Ajax 利用场景？
- 商品零碎。
- 评估零碎。
- 地图零碎。
- …..etc
JQuery 框架中 ajax 函数的根本利用？(ajax(),get(),getJSON(…)，post(…) …..)
JS 代码编写过程中断点 (debugger) 的利用形式？
```
具体步骤，如图所示![image](/img/bVbLcQH)
```