AJAX 发送请求

最新推荐文章于 2024-11-14 23:57:40 发布

GotYouBaby

最新推荐文章于 2024-11-14 23:57:40 发布

阅读量174

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/GotYou_Ac/article/details/107419468

版权

本文深入讲解了AJAX（异步的JavaScript和XML）技术，它是一种利用现有标准进行局部网页更新的方法，无需重新加载整个页面。文章详细介绍了如何通过实例化请求对象、设置请求地址、发送请求以及监听服务器响应来实现AJAX功能。此外，还提供了处理响应数据的示例代码，帮助读者理解AJAX的工作原理。

摘要由CSDN通过智能技术生成

什么是AJAX？

Asynchronous JavaScript and XML ( 异步的JavaScript 和 XML )
AJAX 不是新的编程语音，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
( 新浪微博，GooGle 地图，开心网等中都有涉及)

如何向服务器发送请求

先实例化请求对象

var xhr = new XMLHttpRequest():

声明请求的地址

var url = 'http://musicapi.leanapp.cn/artist/list'

发送请求

xhr.open("GET",url); //	参数一：请求方式 get/post，参数二：请求地址，参数三：get 请求参数
xhr.send(); //	参数：post 的请求参数，string 类型

如何接收响应？

onreadystatechange 监听服务器响应的事件，同时也是一个异步函数

xhr.onreadystatechange = function(){
	//	判断请求成功
	if( xhr.status == 200 && xhr.readyState == 4){
		//	status 获取 http的状态码，200为成功
		//	readyState 响应状态 4 为响应成功
		var res = xhr.response; //	获取【响应体】中的数据
	}else{
		res = {
			error:'请求失败‘
		};
	}
}

如何处理被接收响应的数据

response 一般都为 json数据格式或 XML

由于接收响应的事件为异步程序，这里需要用回调函数来处理异步。

为了便于理解(懒得打字)，直接上全部代码

//	封装请求方法
//	method 请求方法，url 请求地址，callback 回调函数接收响应数据
function ajax(method,url,callback){
	var res = {}; // 接收响应数据
	var xhr = new XMLHttpRequest():
	//	发送请求
	xhr.open("GET",url);
	xhr.send();

	//	接收
	xhr.onreadystatechange = function(){
		if( xhr.status == 200 && xhr.readyState == 4 ){
			res = xhr.response;
			callback(res); // 请求成功后，执行回调函数
		}else{
			res = {
				error:'请求失败'
			};
			callback(res);
		}
	};
};

var url = 'http://musicapi.leanapp.cn/artist/list';
ajax("GET",url,function(data){
	//	将响应数据传给data，再转换为对象
	var data = JSON.parse(data);
	console.log(data);
})