AJAX使用【入门】

最新推荐文章于 2025-12-23 21:19:24 发布

原创最新推荐文章于 2025-12-23 21:19:24 发布 · 548 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #javascript #safari

本文介绍了AJAX技术及其在网页异步请求中的应用，包括创建XMLHttpRequest对象、处理异步请求步骤。同时，文章探讨了Axios框架如何简化AJAX操作，并列举了各种请求方法的别名。此外，还提到了JSON作为数据载体的重要性以及快速进行JSON对象与Java对象转换的方法。

简述

AJAX(Asynchronous JavaScript And XML)：异步的JavaScript和XML，可以利用AJAX完成网页请求的异步操作。

创建 XMLHttpRequest 对象

用于与服务器交换数据，但不同浏览器的差异，还需判断创建不同的对象；


	var xmlHttp;

    var xmlHttp = new XMLHttpRequest() ;
    if(window.XMLHttpRequest){
        // code for IE7+、Firefox、Chrome、Oprea、Safari
        xmlHttp = new XMLHttpRequest();
    }
    else{
        // code for IE6、IE5
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

异步请求步骤

绑定相关事件

    xmlHttp.onreadystatechange = function(){
    //这里是异步请求成功的条件
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
        //这里是异步请求成功后的处理，一般都会直接获取响应的内容，
        console.log(xmlHttp.responseText);
        }
            
    }

开始请求

	xmlHttp.open("GET",url);
	xmlHttp.send();

Axios框架

Axios框架实现了对原生AJAX代码的封装，简化书写。

引入Axios框架

<script src = "js/axios-0.27.2.js"></script>

使用Axios框架

       axios({
            method:"POST",
            url:"CheckUsernameServlet",
            data:"username=zhangsan",

        }).then(function (resp) {
			//回调函数，处理响应的数据
        })

请求方式别名

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

使用JSON作为AJAX的数据载体

//json 对象的定义
var json = {
	"key1":value1,
	"key2":value2,
	...
	"keyn":valuen
}

JSON字符串与Java对象互转

Maven项目先引入坐标，阿里巴巴提供的高性能功能完善的json库

 <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.62</version>
    </dependency>

String json = JSON.toJSONString(obj);
User user = JSON.parseObject(json,User.class);