AJAX创建各个函数的功能

最新推荐文章于 2025-11-24 18:05:47 发布

原创最新推荐文章于 2025-11-24 18:05:47 发布 · 197 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #jquery

js 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了AJAX的基础知识，包括创建XMLHttpRequest对象、使用open()和send()方法进行GET和POST请求。重点讲述了AJAX的POST请求参数设置，通过设置请求头为application/x-www-form-urlencoded并使用send()传递参数。同时，讨论了xhr.onreadystatechange处理服务器响应，特别是当readyState为4且status为200时，解析返回的JSON对象。最后提到了AJAX的封装方法，用于简化请求和响应处理过程。

1.创建对象 let xhr = new XMLHttpRequest（）；

2. open（）功能：设置传参类型，请求地址和参数

参数：open（请求类型，url？参数，是否异步）

3.send（）功能：对get传参而言，只是发送参数功能

对post需要传参

AJAX post传参的特点：

1.设置请求头，将参数以form 表单post的方式发送在open下面创建：

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

2.参数在send中传递

key1=value1&key2=value2...

xhr.send("userName="+this.value);

4. xhr.onreadaystatechange = function（）{

readyState：xhr对象的状态码

0：刚创建对象后 1：open 方法调用结束 2：send方法调用请求发送出去 3：请求已经发送至服务器 4：服务器接受请求且完成解析，准备返回

status ：http 协议的状态码 200：通讯成功 404：网址有问题 500：服务器问题

responseText：服务器返回给前端的信息

}

Ajax 返回json对象

接口：与后端交互的标准，参数：请求参数返回数据：数据格式

返回json对象的两种方法：

1.返回json字符串

echo '{"name":xxx","age":18}';

2.通用php返回json数组

$arr = ["name"=>"xxx","age"=>19];

//遍历得到数值
function fun(resText){
		let json = JSON.parse(resText);
		
		for(let index in json){
			console.log(json[index]);
		}
	}

ajax 的封装

功能：发送请求，接收响应

参数：type：get还是post

url：服务器地址

isAsyn：是否异步

data：key1 = value1&key2=value2

callBack：用来接受responseText