Ajax 技术应用

1.Ajax 简介

1.1Ajax 是什么？  

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

传统Web应用中简易的同步模型分析，如图-1所示：

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

1.2Ajax 技术应用场景？

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

• 商品系统。
• 评价系统。
• 地图系统。
• …..

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

1.3Ajax 技术时序模型分析？

传统Web应用中的，同步请求应用时序模型分析，如图-3所示：

在图-3中，客户端向服务端向服务端发送请求需要等待服务端的响应结果，服务端返回数据以后，客户端可以继续发送请求。

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

在图-4中，客户端可以向服务端发送异步请求，客户端无需等待服务端的响应结果，可以不断向服务端发送请求。

2.Ajax 快速入门

2.1 Ajax 请求响应过程分析

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

2.2 Ajax 编程基本步骤分析

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

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

第三步：创建与服务端的连接

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

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

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

2.3.1 Ajax Get 请求操作实现

 

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

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中涉及到的相关代码参考如下：

 

服务端控制层关键代码实现：在控制层的doFindGoods方法中，通过业务层获取商品信息，并通过@ResponseBody注解对方法进行描述，用于告诉SpringMVC将方法返回值转换为json格式的字符串。

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

客户端关键代码实现：在客户端页面通过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中涉及到的相关代码参考如下：

 

服务端控制层关键代码实现：在控制层的doSaveGoods方法中，通过业务层获取商品信息，并通过@ResponseBody注解对方法进行描述，用于告诉SpringMVC将方法返回值转换为json格式的字符串。

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

客户端关键代码实现：在客户端页面中，通过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)；               })       }

 

3.Ajax 技术在Jquery中应用

3.1Jquery 简介

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

3.2Jquery 中常用Ajax 函数

          jQuery中基于标准的ajax api 提供了丰富的Ajax函数应用，基于这些函数可以编写少量代码，便可以快速实现Ajax操作。常用函数有：

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

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

4.Ajax 章节总结

4.1重难点分析

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

4.2FAQ分析

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

5. 4.3BUG分析

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

8. 问题分析：点击错误提示中的54行代码，看看是不单词拼写错误，检查param单词在哪定义了。

9. 丢失括号，如图-8所示
10. 
11. 问题分析：点击错误提示中的59行代码，看看是不是丢失了小括号“)”。

 

 

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.0.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.cy</groupId>
    <artifactId>CGB-AJAX-01</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>CGB-AJAX-01</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>
 

 

server.port=80

 

//封装共性，提取特性
        function doAjaxGet(url,params,callback){//定义函数(函数声明方式)
            //1.创建XHR对象
            var xhr=new XMLHttpRequest();
            //2.定义XHR对象的状态监听函数
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4&&xhr.status==200){
                    callback(xhr.responseText);//回调函数
                }
                }
            //3.建立连接
            xhr.open("GET",`${url}?${params}`,true);//true表示异步
            //4.发送请求 
            xhr.send(null);
        }
        
        function doAjaxPost(url,params,callback){
            //1.创建XHR对象
            var xhr=new XMLHttpRequest();
            //2.定义XHR对象的状态监听函数
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4&&xhr.status