Ajax概述及使用

北木桥溪

已于 2024-06-11 10:38:01 修改

阅读量1k

点赞数

分类专栏： java 前端文章标签： ajax

于 2022-03-28 22:15:07 首次发布

本文链接：https://blog.csdn.net/weixin_54685622/article/details/123806500

版权

java 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

前端

18 篇文章 0 订阅

订阅专栏

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,同步还是异步)
第四步:发送请求(将请求数据传递服务端)
在这里插入图片描述
案例分析(打开百度首页，然后打开浏览器控制台，进行ajax访问分析)

Spring 工程中Ajax 请求快速实践
第一步:业务描述
通过触发页面上的按钮,向服务端发送ajax请求,并通过局部更新方式,将服务端响应结果更新到页面上,如图所示:
在这里插入图片描述
第二步:创建项目module,如图所示:

第三步,添加项目web依赖

<dependency> 
<groupId>org.springframework.boot</groupId> 
<artifactId>spring-boot-starter-web</artifactId>
</dependency>

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

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

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

<div>
<h1>The Ajax 01 page</h1> 
<button onclick="doAjaxStart()">do ajax start</button> 
<span id="result"></span> 
</div>

javascript 脚本元素如下:

<script>
//js中问题的解决方案:console.log(),debugger,排除法 
function doAjaxStart(){ 
debugger //js中断点 
//初始化span标记内部内容(可选) 
let span=document.getElementById("result"); span.innerHTML="Data is loading....." 
//创建XHR对象
 let xhr=new XMLHttpRequest();
  //设置状态监听 
  xhr.onreadystatechange=function(){ 
  if(xhr.readyState==4&&xhr.status==200){ 
  span.innerHTML=xhr.responseText; 
  } 
  }
  const url="http://localhost/doAjaxStart"; 
  //建立连接 
  xhr.open("GET",url,true);//true 表示异步 
  //发送请求
   xhr.send(null); } 
   </script>

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

第六步,启动服务进行访问测试.
启动服务,打开浏览器输入http://localhost/ajax-01.html,点击页面按钮进行访问,检测输出,如图所示:
!](https://img-blog.csdnimg.cn/eda6fb50a60549d6a31c3710b9c61b2f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YyX5pyo5qGl5rqq,size_20,color_FFFFFF,t_70,g_se,x_16)
在这里插入图片描述

Ajax 技术基本业务实现
业务描述
创建ajax-02页面,在页面上添加get,post,delete,put请求按钮,触发按钮时向服务端发送ajax异步请求,并处理响应结果,如图所示:
在这里插入图片描述
服务端设计及实现
在AjaxController中添加处理ajax请求的代码,关键代码如下:
初始数据准备
在AjaxController中添加List属性(模拟数据库),并通过构造函数进行数据初始化,关键代码如下:

@RestController
public class AjaxController {
    //假设这是数据库表(一个map对象对应一行记录)
    private List<Map<String, String>> dbList = new ArrayList<>();

    private AjaxController() {
        Map<String, String> map = new HashMap<>();//这个map中存储一些城市信息
        map.put("id", "100");
        map.put("city", "beijing");
        dbList.add(map);
        map = new HashMap<>();//这个map中存储一些城市信息
        map.put("id", "101");
        map.put("city", "shanghai");
        dbList.add(map);
    }

//添加处理put请求(一般用于更新)的服务端业务代码
    @PutMapping("/doAjaxPut")
    public String doUpdateObject(@RequestParam Map<String, String> paramMap) {
        String id = paramMap.get("id");
        Iterator<Map<String, String>> it = dbList.iterator();
        while (it.hasNext()) {
            Map<String, String> map = it.next();
            if (map.get("id").equals(id)) {
                map.put("city", paramMap.get("city"));
                //....
            }
        }
        return "update ok";
    }

    ;
//添加处理delete请求的代码
    @DeleteMapping("/doAjaxDelete/{id}")
    public String doDeleteObject(@PathVariable String id) {
        //基于迭代器执行删除操作
        Iterator<Map<String, String>> it = dbList.iterator();
        while (it.hasNext()) {
            Map<String, String> map = it.next();
            if (map.get("id").equals(id)) {
                it.remove();//基于迭代器执行删除操作
            }
        }
        return "delete ok";
    }

//添加处理post请求的服务端业务代码
    //接收post请求的普通表单数据
    @PostMapping("/doAjaxPost")
    public String doSaveObject(@RequestParam Map<String, String> map) {
        dbList.add(map);
        return "save ok";
    }

//假如客户端是post请求,并向服务端传递是json格式字符串,我们的代码需要采用如下方式进行设计
    //接收post请求方式json格式数据
    @PostMapping("/doAjaxPostJSON")
    public String doSaveJsonObject(@RequestBody Map<String, String> map) {
        dbList.add(map);
        return "save json ok";
    }

//添加处理Get请求的服务端业务代码
    //多个url映射为一个方法
    @GetMapping(path = {"/doAjaxGet/{city}", "/doAjaxGet"})
    public List<Map<String, String>> doAjaxGet(@PathVariable(required = false) String city) {

        if (city == null || "".equals(city)) return dbList;
        List<Map<String, String>> queryResult = new ArrayList<>();//基于此集合存储查询结果
        for (Map<String, String> map : dbList) {
            if (map.get("city").contains(city)) {
                queryResult.add(map);
            }
        }
        return queryResult;
    }
//    @RequestMapping("/doAjaxGet")
//    @ResponseBody
//    public List<Map<String,String>> doAjaxGet(){
//        return dbList;
//    }

    
}

客户端设计及实现
创建ajax-02.html页面,其关键html元素如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h1>The Ajax 02 Page</h1>
    <button onclick="doAjaxGet()">Do Ajax Get</button>
    <button onclick="doAjaxPost()">Do Ajax Post</button>
    <button onclick="doAjaxPostJson()">Do Ajax Post Json</button>
    <button onclick="doAjaxDelete()">Do Ajax Delete</button>
    <button onclick="doAjaxPut()">Do Ajax Put</button>
</div>
<div id="result"></div>
<script>
    //更新
    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方法内部
    }

    function doAjaxDelete() {
        debugger
        //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);
    }

    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方法内部
    }

    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方法内部
    }

    function doAjaxGet() {
        debugger
        //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);
    }
</script>

</body>
</html>

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

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

function ajax(jsonObj) {//jsonObj对象格式有要求
    //1.create xhr
    let xhr = createXHR(jsonObj.callback);
    //2.create connection
    let requestUrl = jsonObj.requestUrl;
    let requestParams = jsonObj.requestParams;
    let requestType = jsonObj.requestMethod;
    let url = requestType == "GET" ? `${requestUrl}/${requestParams}` : requestUrl;
    xhr.open(requestType, url, true);
    if (requestType == "POST") {
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    }
    //3.send request
    xhr.send(requestType == "POST" ? requestParams : null);
}

function ajaxGet(url, params, callback) {//封装ajax get 请求模板代码
    //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);
            }
        }
    }
    //3.open connection
    xhr.open("GET", `${url}/${params}`, true);
    //4.send request
    xhr.send();
}

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

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

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

//向服务端提交json格式字符串
function ajaxPostJSON(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/json");
    //3.send request
    xhr.send(JSON.stringify(params));//将json对象转换为json格式字符串提交到服务端
}

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h1>The Ajax 03 Page</h1>
    <button onclick="doAjaxGet()">Do Ajax Get</button>
    <button onclick="doAjaxPost()">Do Ajax Post</button>
    <button onclick="doAjaxPostJson()">Do Ajax Post Json</button>
    <button onclick="doAjaxDelete()">Do Ajax Delete</button>
    <button onclick="doAjaxPut()">Do Ajax Put</button>
    <button onclick="doAjax()">Do Ajax</button>
</div>
<div id="result"></div>
<script src="/js/ajax.js"></script>
<script>
    function doAjax() {
        ajax({
            requestUrl: "/doAjaxPost",
            requestParams: "id=105&city=guangzhou",
            requestMethod: "POST",
            callback: function (result) {//result为服务端响应到客户端的数据
                document.querySelector("#result").innerHTML = result;
            }
        });
    }

    //ajax delete request
    function doAjaxDelete() {
        const url = "/doAjaxDelete";
        const params = "101";
        ajaxDelete(url, params, function (result) {//回调函数
            alert(result);
        })
    }

    //ajax post put
    function doAjaxPut() {
        const url = "/doAjaxPut";
        const params = "id=100&city=shenzhen";
        ajaxPut(url, params, function (result) {//回调函数
            alert(result);
        })
    }

    //ajax post request
    function doAjaxPostJson() {
        const url = "/doAjaxPostJSON";
        const params = {id: "103", city: "xiongan"};//服务端需要@RequestBody
        ajaxPostJSON(url, params, function (result) {//回调函数
            alert(result);
        })
    }

    //ajax post request
    function doAjaxPost() {
        const url = "/doAjaxPost";
        const params = "id=102&city=shenzhen";
        ajaxPost(url, params, function (result) {//回调函数
            alert(result);
        })
    }

    //ajax get request
    function doAjaxGet() {
        const url = "/doAjaxGet";
        const params = "";
        ajaxGet(url, params, function (result) {//回调函数
            document.querySelector("#result").innerHTML = result;
        });//封装了ajax操作的四个步骤
    }

</script>
</body>
</html>

Ajax 编程框架的简易实现
我们在实际的js编程中经常会以面向对象的方式进行实现，例如ajaxGet函数,如何以对象方式进行调用呢？关键代码分析如下：

(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技术的应用
简介
Query是一个快速、简洁的JavaScript库框架，是一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
常用ajax 函数分析
jQuery中基于标准的ajax api 提供了丰富的Ajax函数应用，基于这些函数可以编写少量代码，便可以快速实现Ajax操作。常用函数有：
在这里插入图片描述
Jquery 中ajax 函数应用实践
业务描述
构建一个html页面,例如jquery-ajax-01.html,并通过一些button事件,演示jquery中相关ajax函数的基本
应用,如图所示:

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h1>The Jquery Ajax 01 Page</h1>
    <button onclick="doAjax()">$.ajax(...)</button>
    <button onclick="doGet()">$.get(...)</button>
    <button onclick="doPost()">$.post(...)</button>
    <button onclick="doLoad()">$(...).load("...")</button>
</div>
<div id="result"></div>
<script src="/js/jquery.min.js"></script>
<script>
    function doLoad() {
        let requestUrl = "/doAjaxGet";
        //load函数会在指定位置通过ajax方法加载数据,并将数据更新到这个位置
        $("#result").load(requestUrl, function () {//可选
            console.log("==load complete==");//加载完成以后执行
        });
    }

    function doPost() {
        let requestUrl = "/doAjaxPost";
        let params = "id=104&city=shijiazhuang";
        $.post(requestUrl, params, function (result) {
            alert(result);
        })
    }

    function doGet() {
        let requestUrl = "/doAjaxGet";
        let params = "";
        $.get(requestUrl, params, function (result) {
            $("#result").html(result);
        }, "text");//默认为json
    }

    function doAjax() {
        let requestUrl = "/doAjaxGet";
        let params = "";
        //$符号在这里代表jquery对象
        //ajax({})为jquery种的一个ajax函数,底层封装了ajax请求过程
        $.ajax({
            url: requestUrl,//key必须为url
            data: params,
            //type:"GET",//可以省略,默认为Get请求
            dataType: "text",//服务端响应到客户端的数据格式,默认为json
            //async:true,//默认异步
            //contentType:"application/json",//假如需要向服务端传递json串
            success: function (result) {//callback 回调函数
                console.log("result", result);
                //JS原生写法
                //document.querySelector("#result").innerHTML=result;
                //Jquery种的封装简化写法
                $("#result").html(result);
            }
        });
        //假如服务端响应到客户端的数据为json格式字符串,底层会默认将其转换为json对象
    }
</script>
</body>
</html>

北木桥溪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax概述及使用

Ajax 技术应用Ajax 技术简介背景在互联网高速发展的今天，传统的WEB应用，对于高并发、高性能、高可靠性的要求已迫在眉睫。单线程方式的客户端与服务端交互方式已经不能满足现阶段的需求.我们需要以异步、按需加载的方式从服务端获取数据并及时刷新，来提高用户体验，于是Ajax技术诞生。Ajax 概述Ajax (Asynchronous JavaScript and XML) 是一种Web应用客户端技术,可以借助客户端脚本(javascript)与服务端应用进行异步通讯(可以有多个线程同时与服务器交互
复制链接

扫一扫