AJAX基础

最新推荐文章于 2026-01-05 10:53:07 发布

原创最新推荐文章于 2026-01-05 10:53:07 发布 · 118 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #java #python #js #vue

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了AJAX（异步JavaScript和XML）的基本概念，包括异步通信的工作原理和两种主要实现方式：原生JavaScript和jQuery。原生JS中，通过XMLHttpRequest对象创建GET和POST请求，设置回调函数处理响应数据。jQuery则提供了.ajax(), .get()和.post()等简洁的API来实现相同功能。这些方法简化了异步请求的编写，使得客户端能够实现不阻塞的交互体验。

概念

ASynchronous JavaScript And XML —— 异步的JavaScript和XML

异步和同步： 客户端和服务器端相互通信的基础上

客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
客户端不需要等待服务器端的响应。在服务器端处理请求的过程中，客户端可以进行其他的操作。

实现方法

原生的JS实现方法

GET请求

<script>
    document.querySelector('input').onclick = function(){
    //查找input标签并添加点击事件
        var xhr = new XMLHttpRequest();
        //创建异步对象
        xhr.open('get','URL?name='+value);
        //添加请求方式为get，URL为请求的地址(get请求数据写在URL后面)
        xhr.onreadystatechange = function(){
        //设置回调函数
            if (xhr.readyState==4&&xhr.status==200) {
            //readyState==4表示请求完成，数据都获取到了，status==200表示请求的页面一定存在
             console.log(xhr.responseText);
             //获取数据
                }
            }
        xhr.send(null);
        //请求发送主体，get请求为空或者写null
    }
</script>

POST请求

<script>
    document.querySelector('input').onclick = function () {
        //查找input标签并添加点击事件
        var xhr = new XMLHttpRequest();
        //创建异步对象
        xhr.open('post', 'URL');
        //添加请求方式为post，URL为请求的地址
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        //设置请求头(将Content-type的值设置为application/x-www-form-urlencoded才能实现提交数据)
        xhr.onreadystatechange = function () {
            //设置回调函数
            if (xhr.readyState == 4 && xhr.status == 200) {
                //readyState==4表示请求完成，数据都获取到了，status==200表示请求的页面一定存在
                console.log(xhr.responseText);
                //获取数据
            }
        }
        xhr.send('name='+value);
        //请求发送主体，post请求数据写在发送主体中，若无发送的数据则为null
    }
</script>

JQeury实现方法

** $. a j a x () * * 语法： ‘$ .ajax({键值对});`

$.ajax({
	url:"xxx", // 请求路径
	type:"POST", //请求方式
	//data:"username=xxx&age=xxx",//请求参数
	data:{"username":"xxx","age"=xxx},
	success:function (data){
		alert(data)
	},//响应成功后的回调函数
	error:function(){
		alert("出错了！")
	},//如果请求响应出现错误，会执行的回调函数
	dataType:"text"//设置接收到的响应数据的格式
});