Ajax技术的应用入门

心已赠人 2023-02-27 03:24 10阅读 0赞

### 文章目录 ###

*   *  一、Ajax 简介
     *   *  1.1 Ajax 是什么？
         *  1.2Ajax 技术应用场景？
         *  1.3Ajax 技术时序模型分析？
     *  二、Ajax 快速入门
     *   *  2.1 Ajax 请求响应过程分析
         *  2.2 Ajax 编程基本步骤分析
         *  2.3 Ajax 请求响应编程操作实践
         *   *  2.3.1 Ajax Get 请求操作实现
             *  2.3.2 Ajax Post 请求操作实现
         *  2.4 Ajax 编程框架基本实现
     *  三、Ajax 技术在Jquery中应用
     *   *  3.1 Jquery 简介
         *  3.2 Jquery 中常用Ajax 函数
     *  四、Ajax 章节总结
     *   *  4.1 重难点分析
         *  4.2 FAQ分析

--------------------

## 一、Ajax 简介 ##

--------------------

### 1.1 Ajax 是什么？ ###

Ajax (Asynchronous JavaScript and XML) 是一种Web应用技术,可以借助客户端脚本(javascript)与服务端应用进行异步通讯，获取服务端数据以后,可以进行局部刷新。进而提高数据的响应和渲染速度。

① 传统Web应用中简易的同步模型分析：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70]  
② 基于Ajax技术的异步请求响应模型分析：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 1]

### 1.2Ajax 技术应用场景？ ###

Ajax技术最大的优势就是底层异步,然后局部刷新,进而提高用户体验,这种技术现在在很多项目中都有很好的应用,例如:

*  商品系统。
 *  评价系统。
 *  地图系统。
 *  ……

AJAX可以仅向服务器发送并取回必要的数据，并在客户端采用JavaScript处理来自服务器的响应。这样在服务器和浏览器之间交换的数据大量减少，服务器响应的速度就更快了。但Ajax技术也有劣势，最大劣势是不能直接进行跨域访问。

### 1.3Ajax 技术时序模型分析？ ###

（1）传统Web应用中的，**同步请求**应用时序模型分析：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70_pic_center]  
客户端向服务端向服务端发送请求需要等待服务端的响应结果，服务端返回数据以后，客户端可以继续发送请求。

（2）基于Ajax技术的Web **异步请求** 响应模型：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70_pic_center 1]  
客户端可以向服务端发送异步请求，客户端无需等待服务端的响应结果，可以不断向服务端发送请求。

--------------------

## 二、Ajax 快速入门 ##

--------------------

### 2.1 Ajax 请求响应过程分析 ###

所有的Ajax 请求都会基于DOM(HTML元素)事件，通过XHR（XMLHttpRequest）对象实现与服务端异步通讯局部更新  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 2]

### 2.2 Ajax 编程基本步骤分析 ###

第一步：基于dom事件创建XHR对象(XMLHttpRequest对象)  
第二步：注册XHR对象状态监听，通过回调函数(callback)处理状态信息。  
第三步：创建与服务端的连接  
第四步：发送异步请求实现与服务端的通讯  
第五步：通过回调（callback）函数，获得响应结果并进行数据更新.(非阻塞)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 3]

### 2.3 Ajax 请求响应编程操作实践 ###

#### 2.3.1 Ajax Get 请求操作实现 ####

基于ajax技术中的XMLHttpRequest对象，向服务端发起异步Get请求，关键代码分析如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70_pic_center 2]  
过程分析图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 4]  
案例分析：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 5]

动手尝试： 基于时序图分析，进行代码设计和实现  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70_pic_center 3]  
（1）服务端控制层关键代码实现：  
在控制层的doFindGoods方法中，通过业务层获取商品信息，并通过 @ResponseBody注解对方法进行描述，用于告诉SpringMVC将方法返回值转换为json格式的字符串。

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

（2）客户端关键代码实现：  
在客户端页面通过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请求在发送请求执行需要设置请求头,见红色代码部分。

动手尝试： 基于时序图分析，进行代码设计和实现  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70_pic_center 4]  
（1）服务端控制层关键代码实现：  
在控制层的doSaveGoods方法中，通过业务层获取商品信息，并通过@ResponseBody注解对方法进行描述，用于告诉SpringMVC将方法返回值转换为json格式的字符串。

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

（2）客户端关键代码实现：  
在客户端页面中，通过doSaveGoods方法，基于ajax技术异步提交商品信息到服务端，由服务端对象方法将数据写入到数据库。

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)；
    	})
    }

### 2.4 Ajax 编程框架基本实现 ###

我们在实际的js编程中经常会以面向对象的方式进行实现，例如2.3章节中doAjaxGet函数如何以对象方法进行应用呢？关键代码分析如下：

外界可以通过ajax.doAjaxPost或者ajax.doAjaxGet调用此js函数里面的方法，和面向对象类似,new一个对象,可以调用本类里面的属性和方法（此说法仅供参考），但是需要引入，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 6]

--------------------

## 三、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][]).

--------------------

## 四、Ajax 章节总结 ##

--------------------

### 4.1 重难点分析 ###

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

### 4.2 FAQ分析 ###

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70]: /images/20230209/c06da2e2d8e74e8ba94a921f0895f2f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 1]: /images/20230209/704deef2ce024ccca2a4e7314dd25241.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20230209/a4afba11eab5429a938044cc250d6b28.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230209/b3c47f4af2704a35a59dbbef7940ce33.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 2]: /images/20230209/db881f77826044d8a4619bd5f7a25273.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 3]: /images/20230209/b6b8d932629f438995ba8b0fb149cc78.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20230209/cf66255e0f2a4a7cbaf9c957e8d2c78d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 4]: /images/20230209/e9002fa4a01b47ef9db01614769ba263.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 5]: /images/20230209/82c1c38f3aa24508a4d7d324843fe353.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20230209/c726e5cd2383498d9e765fc5dbe49d5f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20230209/f7580898eef84454a8d96c8d50a1f1f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 6]: /images/20230209/155a369445224c81906284224dbbef39.png
[jquery.com]: https://api.jquery.com/