本文共 11646 字，大约阅读时间需要 38 分钟。

Ajax 技术应用

Ajax 技术简介

背景

在互联网高速发展的今天，传统的WEB应用，对于高并发、高性能、高可靠性的要求已迫在眉睫。单线程方式的客户端与服务端交互方式已经不能满足现阶段的需求.我们需要以异步、按需加载的方式从服务端获取数据并及时刷新，来提高用户体验，于是Ajax技术诞生。

Ajax 概述

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

Ajax 应用场景分析

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

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

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

Ajax 技术快速入门

Ajax 请求响应模型

传统方式是web请求与响应(客户端要等待响应结果),如图所示:

Ajax方式的请求与响应(关键是客户端不阻塞),如图所示:

Ajax 模板代码(四个步骤)

编程步骤分析:(重点是ajax技术的入口-XMLHttpRequest-XHR对象)

第一步:基于dom事件创建XHR对象

第二步:在XHR对象上注册状态监听(监听客户端与服务端的通讯过程) 第三步:与服务端建立连接(指定请求方式,请求url,同步还是异步) 第四步:发送请求(将请求数据传递服务端)

模板代码分析:

let xhr=new XMLHttpRequest();xhr.onreadystatechange=function(){   if(xhr.readyState==4){      if(xhr.status==200){         console.log(xhr.responseText);      }   }}xhr.open("GET",URL,TRUE);xhr.send(null);

Spring 工程中Ajax 请求快速实践

第一步:业务描述

通过触发页面上的按钮,向服务端发送ajax请求,并通过局部更新方式,将服务端响应结果更新到页面上,如图所示:

第二步:创建项目module,如图所示:

第三步,添加项目web依赖

      
    
     org.springframework.boot
       
    
     spring-boot-starter-web
    
   

第四步:创建AjaxController处理客户端请求,代码如下:

package com.cy.pj.ajax.controller;@RestControllerpublic class AjaxController{      @GetMapping("/doAjaxStart")      public String doAjaxStart(){          return "request ajax start result"      }}

第五步:在项目中static目录下,创建一个页面ajax-01.html,代码如下:

html元素代码如下:

   
   
    
The Ajax 01 page
   
    do ajax start   
    
   

javascript 脚本元素如下:

其中,readyState4表示服务端响应到客户端的数据已经接收完成,status200 表示服务端处理过程OK的,500表示异常.

第六步,启动服务进行访问测试.

启动服务,打开浏览器输入http://localhost/ajax-01.html,点击页面按钮进行访问,检测输出,如图所示:

Ajax 技术基本业务实现

业务描述

创建ajax-02页面,在页面上添加get,post,delete,put请求按钮,触发按钮时向服务端发送ajax异步请求,并处理响应结果,如图所示:

服务端设计及实现

在AjaxController中添加处理ajax请求的代码,关键代码如下:

初始数据准备

在AjaxController中添加List属性(模拟数据库),并通过构造函数进行数据初始化,关键代码如下:

private List

添加处理Get请求的服务端业务代码

@GetMapping(path={"/doAjaxGet/{city}","/doAjaxGet")public List

添加处理post请求的服务端业务代码

@PostMapping("/doAjaxPost")public String doAjaxPost(@RequestParam Map
   
      map){     dbList.add(map);     return "save ok";}
   

假如客户端是post请求,并向服务端传递是json格式字符串,我们的代码需要采用如下方式进行设计

@PostMapping("/doAjaxPostJson")public String doAjaxPost(@RequestBody Map
   
      map){     dbList.add(map);     return "save ok";}
   

添加处理put请求(一般用于更新)的服务端业务代码

@PostMapping("/doAjaxPut")public String doAjaxPut(@RequestParam Map
   
      paramMap){     for(Map
    
      map:dbList){          if(map.get("id").equals(paramsMap.get("id"))){               map.put("city",paramMap.get("city"))          }     }     return "update ok";}
    
   

添加处理delete请求的代码

@DeleteMapping("/doAjaxDelete/{id}")    public String doDeleteObject(@PathVariable  String id){           //基于迭代器执行删除操作          Iterator

客户端设计及实现

创建ajax-02.html页面,其关键html元素如下:

   
    
    
The Ajax 02 Page
    
    Do Ajax Get    
    Do Ajax Post    
    Do Ajax Post Json    
    Do Ajax Delete    
    Do Ajax Put
   

AjaxGet请求方式,关键代码如下:

function doAjaxGet(){          //1.创建XHR对象          let xhr=new XMLHttpRequest();          //2.设置状态监听          xhr.onreadystatechange=function(){              if(xhr.readyState==4){                  if(xhr.status==200){                    let div=document.getElementById("result");                    div.innerHTML=xhr.responseText;                  }              }          }          //3.建立连接          //let params="b";          let params="";          xhr.open("Get",`http://localhost/doAjaxGet/${params}`,true);          //4.发送请求          xhr.send(null);      }

Ajax Post请求方式,关键代码如下:

function doAjaxPost(){          //1.创建XHR对象          let xhr=new XMLHttpRequest();          //2.设置状态监听          xhr.onreadystatechange=function(){              if(xhr.readyState==4){                  if(xhr.status==200){                      let div=document.getElementById("result");                      div.innerHTML=xhr.responseText;                  }              }          }          //3.建立连接          let params="id=102&city=shenzhen"          xhr.open("post",`http://localhost/doAjaxPost`,true);          //post请求必须要设置请求头          xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");          //4.发送请求          xhr.send(params);//post请求可以将参数放到send方法内部  }

Ajax Post请求代码,发送JSON格式数据到服务端,关键代码如下:

function doAjaxPostJson(){          //1.创建XHR对象          let xhr=new XMLHttpRequest();          //2.设置状态监听          xhr.onreadystatechange=function(){              if(xhr.readyState==4){                  if(xhr.status==200){                      let div=document.getElementById("result");                      div.innerHTML=xhr.responseText;                  }              }          }          //3.建立连接          let params={id:103,city:"xiongan"}          let paramsStr=JSON.stringify(params);//将json对象转换为json字符串          console.log("jsonStr",paramsStr);          xhr.open("post",`http://localhost/doAjaxPostJSON`,true);          //post请求必须要设置请求头          xhr.setRequestHeader("Content-Type","application/json");          //4.发送请求          xhr.send(paramsStr);//post请求可以将参数放到send方法内部      }

Ajax Delete请求方式关键代码如下:

function doAjaxDelete(){          //1.创建XHR对象          let xhr=new XMLHttpRequest();          //2.设置状态监听          xhr.onreadystatechange=function(){              if(xhr.readyState==4){                  if(xhr.status==200){                      let div=document.getElementById("result");                      div.innerHTML=xhr.responseText;                  }              }          }          //3.建立连接          //let params="b";          let params="102";          xhr.open("delete",`http://localhost/doAjaxDelete/${params}`,true);          //4.发送请求          xhr.send(null);  }

Ajax Put请求方式,关键代码如下:

function doAjaxPut(){          //1.创建XHR对象          let xhr=new XMLHttpRequest();          //2.设置状态监听          xhr.onreadystatechange=function(){              if(xhr.readyState==4){                  if(xhr.status==200){                      let div=document.getElementById("result");                      div.innerHTML=xhr.responseText;                  }              }          }          //3.建立连接          let params="id=101&city=tianjin"          xhr.open("put",`http://localhost/doAjaxPut`,true);          //put请求必须要设置请求头          xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");          //4.发送请求          xhr.send(params);//put请求可以将参数放到send方法内部  }

启动服务,进行访问测试.

Ajax 技术进阶实现(封装共性)

共性模板代码的封装

在实际编程过程中我们通常会封装代码共性,提取代码特性.然后来提高代码的可重用性.例如在static目录下创建js目录，添加ajax.js文件，其关键代码如下：

xhr对象的创建

function createXHR(callback){    //1.create XHR object    let xhr=new XMLHttpRequest();    //2.set onreadystatechange    xhr.onreadystatechange=function(){        if(xhr.readyState==4){            if(xhr.status==200){                callback(xhr.responseText);            }        }    }    return xhr;}

Get请求

function ajaxGet(url,params,callback){//封装ajax get 请求模板代码    //1.create xhr and set onreadystate change    let xhr=createXHR(callback);    //2.open connection    xhr.open("GET",`${url}/${params}`,true);    //3.send request    xhr.send();}

Post请求

function ajaxPost(url,params,callback){//封装ajax get 请求模板代码    //1.create xhr and set onreadystate change    let xhr=createXHR(callback);    //2.open connection    xhr.open("POST",url,true);    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    //3.send request    xhr.send(params);}

post 请求，传递json数据

function ajaxPostJSON(url,params,callback){    //1.create xhr and set onreadystate change    let xhr=createXHR(callback);    //2.open connection    xhr.open("POST",url,true);    xhr.setRequestHeader("Content-Type","application/json");    //3.send request    xhr.send(JSON.stringify(params));//将json对象转换为json格式字符串提交到服务端}

Put请求

function ajaxPut(url,params,callback){//封装ajax get 请求模板代码    //1.create xhr and set onreadystate change    let xhr=createXHR(callback);    //2.open connection    xhr.open("put",url,true);    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    //3.send request    xhr.send(params);}

delete请求

function ajaxDelete(url,params,callback){//封装ajax get 请求模板代码    //1.create xhr and set onreadystate change    let xhr=createXHR(callback);    //2.open connection    xhr.open("delete",`${url}/${params}`,true);    //3.send request    xhr.send();}

创建ajax-03.html页面，在页面中分别调用如上函数进行访问测试，关键代码如下：

   
      
    
The Ajax 03 Page
      
    Do Ajax Get      
    Do Ajax Post      
    Do Ajax Post Json      
    Do Ajax Delete      
    Do Ajax Put  
   
  
   
    

Ajax 编程框架的简易实现(了解)

我们在实际的js编程中经常会以面向对象的方式进行实现，例如ajaxGet函数,如何以对象方式进行调用呢？关键代码分析如下：(如下代码的理解需要具备JS中面向对象的基础知识,假如不熟可暂时跳过)

(function(){    //定义一个函数，可以将其连接为java中的类     var ajax=function(){}    //在变量ajax指向的类中添加成员，例如doAjaxGet函数，doAjaxPost函数     ajax.prototype={        ajaxGet: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方法不写内容     },        ajaxPost: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();//构建ajax对象并赋值给变量全局变量Ajax})()

此时外界再调用doAjaxGet和doAjaxPost函数时，可以直接通过Ajax对象进行实现。

JQuery框架中Ajax技术的应用

简介

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

常用ajax 函数分析

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

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

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

Jquery 中ajax 函数应用实践

业务描述

构建一个html页面,例如jquery-ajax-01.html,并通过一些button事件,演示jquery中相关ajax函数的基本应用,如图所示:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BerbiC9s-1611209329048)(D:\TCGBIII\DEVDOCS\Day10\ajax.assets\image-20210105183916162.png)]

客户端关键html代码实现分析

   
       
    
The Jquery Ajax 01 Page
       
    $.ajax(...)       
    $.get(...)       
    $.post(...)       
    $(...).load("...")   
   
   
   

客户端关键JS代码码实现分析

转载地址：https://blog.csdn.net/weixin_40597409/article/details/112939854 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！