原生Ajax五个基本步骤以及使用

刘远山

已于 2025-01-07 09:40:47 修改

阅读量4.6k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端专题学习汇总文章标签： javascript

于 2020-09-19 15:19:57 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_39218464/article/details/108680750

前端专题学习汇总专栏收录该内容

64 篇文章

订阅专栏

本文介绍了AJAX技术的基本概念及其运行原理。详细阐述了使用原生Ajax实现客户端与服务器交互的五个基本步骤，包括创建对象、设置请求参数、发送数据等，并提供了一个简单的HTML示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AJAX的概念

AJAX的全称是Asynchronous JavaScript And XML（异步的JS和XML），说明当初这门技术设想的最佳拍档是JS和XML，但是后来的发展过程中，以js对象为模板的json成为了主流。

Ajax运行原理

在这里插入图片描述

原生Ajax五个基本步骤

1、创建ajax对象
var xhr = new XMLHttpRequest();

2、用ajax对象的open方法设置连接服务器的参数
xhr.open( method,url,async);
method:请求类型，post或get
url：请求文件的具体地址
async:：是否异步（true为异步，false为同步）

3、设置发送数据的头部，一般用来说明数据格式，如：
xhr.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
注： multipart/form-data（一般在发送文件时使用，以二进制形式发送）和application/json（发送json格式数据）

4、发送请求，xhr.send(数据)
方法参数中get方法时添null或不添，推荐用post方法

5、判断通讯状态或接收返回数据，这个是写在第三个步骤回调函数里边的

xhr.onreadystatechange（）方法和readyState属性。
每次readyState属性发生变化的时候就会触发onreadystatechange事件。
readyState属性的变化也就是XMLHttpRequest对象请求状态的变化。
status
xmlHttp.onreadystatechange = function(){
            //判断数据是否正常返回
            if(xmlHttp.readyState==4&&xmlHttp.status==200){
                //6.接收数据
                var res = eval('('+xmlHttp.responseText+')');
                console.log(res);
}
}

在这里插入图片描述

当xhr.readyState4&&xht.status200
时，通过xhr.responseText可获取发送过来的数据。

实例

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div id="span1">
    
</div>
</body>
</html>

<script type="text/javascript">
	window.onload = function() {
		//1、创建ajax对象
		var xhr = new XMLHttpRequest();
		// 2、绑定监听--监听服务器是否已经返回对应数据（回调函数)
		xhr.onreadystatechange=function () {
            alert(xhr.readyState);
		if(xhr.readyState==4&&xhr.status==200){
                    //5、判断通讯状态或接收返回数据，这个是写在第三个步骤回调函数里边的
                    var res=xhr.responseText;
                    document.getElementById("span1").innerHTML=res;
                }
        }
        //3、绑定地址,及配置其他参数
        xhr.open("POST","./ajax.php",true);
        //4、发送请求
        xhr.send();        
	}
</script>

使用


$.ajax({
    url:"http://www.microsoft.com",    //请求的url地址
    dataType:"json",   //返回格式为json
    async:true,//请求是否异步，默认为异步，这也是ajax重要特性
    data:{"id":"value"},    //参数值
    type:"POST",   //请求方式
    beforeSend:function(){
        //请求前的处理
    },
    success:function(req){
        //请求成功时处理
    },
    complete:function(){
        //请求完成的处理
    },
    error:function(){
        //请求出错处理
    }
});