java学习day03---Ajax 技术应用

1.Ajax 是什么？ 

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

1.2Ajax 技术应用场景？

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

• 商品系统。

• 评价系统。

• 地图系统。

• ...

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

2.Ajax 快速入门

2.1Ajax 请求响应过程分析

所有的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对象获取的通讯状态，对响应数据进行处理
        //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.对响应结果进行处理(在回调函数中处理)。
 }

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

@Controller
@RequestMapping("/ajax/")
public class AjaxController {
    
    @RequestMapping("doAjaxGetRequest")
    @ResponseBody//将响应内容以串的形式进行返回
    public String doAjaxGetRequest(String key) {
        return "ajax get response result"+key;
    }
}

客户端关键代码实现：

       //JS 调试技巧：断点，console.log(...),排除法
        function doAjaxGetRequest(){
            //debugger //断点调试法(那点是断点加在哪里)
            //定义请求url
            var url="/ajax/doAjaxGetRequest";
            //定义请求参数
            var params="key=A";
            //发送ajax请求
            doAjaxGet(url,params,function(result){
                var obj=document.getElementById("result");
                //innerHTMl表示将result内容以html方式显示在obj对象内部
                 obj.innerHTML=result;
            });
        }

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.对响应结果进行处理(在回调函数中处理)。
 }

服务端控制层关键代码实现：

    @RequestMapping("doAjaxPostRequest")
    @ResponseBody//将响应内容以串的形式进行返回
    public String doAjaxPostRequest(String key,String value) {
        
        return "ajax get response result"+key+value;
    }

客户端关键代码实现：

       function doAjaxPostRequest(){
            //定义请求url
            var url="/ajax/doAjaxPostRequest";
            //定义请求参数
            var params="key=A&value=100";
            //发送ajax请求
            doAjaxPost(url,params,function(result){
                alert(result);
            });
        }

2.3.3.Ajax 编程框架基本实现

关键代码分析如下：

(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();
})()

3.Ajax 章节总结：

3.1重难点分析

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

2. Ajax编程的基本步骤(入口对象-XMLHttpRequest),Ajax应用场景？

3. JQuery框架中ajax函数的基本应用？(ajax(),get(),getJSON(...).....)

4. JS代码编写过程中断点(debugger)的应用方式？

3.2FAQ分析

1. Ajax技术有什么优势,劣势?(优势:按需异步加载,局部更新,改善用户体验,劣势：不支持跨域)

2. Ajax技术中最核心对象?(XMLHttpRequest-入口对象)

3. 客户端JS问题如何调试?(打桩console.log(),debugger,排除法)

4. 对于一些js框架你是如何学习？(官网，demo，实践-浏览器测试，搜索引擎)