AJAX使用

伴君

于 2023-03-21 11:35:49 发布

阅读量295

点赞数

分类专栏： # 计算机网络编程文章标签： ajax javascript ecmascript

本文链接：https://blog.csdn.net/AAAA202012/article/details/129666933

版权

计算机网络编程专栏收录该内容

16 篇文章 4 订阅

订阅专栏

1.AJAX概述

AJAX(Asynchronous JavaScript And XML)概述：
1、AJAX是Asynchronus JavaScript And XML的缩写；
2、AJAX是一种用于创建快速动态网页的技术；
3、AJAX不是新的编程语言，而是一种使用现有标准的新方法
4、AJAX最大的优点是在不重新加载整个网页的情况下，可以与服务器交换数据并更新部分网页内容。传统的网页(不使用AJAX)如果需要更新内容，必须重载整个网页面；
5、AJAX不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行；
6、有很多使用AJAX的应用程序案例：新浪微博、Google地图、开心网等等。

AJAX是基于现有的Internet标准
AJAX是基于现有的Internet标准，并且联合使用它们：
1、XMLHttpRequest对象(异步的与服务器交换数据)；
2、JavaScript/DOM(信息显示/交互);
3、CSS(给数据定义样式);
4、XML(作为转换数据的格式)
浏览器是借助js与服务器通信的，js可以从浏览器获取数据，也可以更新浏览器的数据。
在这里插入图片描述
浏览器与服务器通信采用的就是AJAX技术，AJAX核心是XMLHttpRequest对象；这个对象有很多方法可以实现浏览器与服务器之间的传递信息。

通过JavaScript的XMLHttpRequest对象完成发送请求到服务器并返回结果的任务，然后使用JavaScript更新局部的网页；具有异步特征(消息的出现是随机的，通信双方不需要简历同步时钟)

2.AJAX原理

浏览器与服务器之间的传递过程
在这里插入图片描述

AJAX局部更新网页流程图：
在这里插入图片描述

异步流程：
1、创建对象；
2、设置回调函数，fun函数;
3、open创建服务器请求；
4、send向服务器发送请求；
5、服务器有结果会自动调用fun回调函数(在回调函数里面根据服务器返回的响应信息更新用户界面)。

3.XMLHttpRequest

3.1 根据不同的浏览器创建异步请求对象

创建一个XMLRequest对象

function getXMLRequest()
{
	var xmlhttp = null;
	if(window.XMLHttpRequest) //自动检测当前浏览器的版本，如果是IE5.0以上的高版本的浏览器
	{
		//code for IE7+,Firefox,Chrome,Opera,Safari
		xmlhttp = new XMLHttpRequest(); //创建请求对象
	}
	else{ //如果浏览器是低版本的
		//code for IE6,IE5
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  //创建请求对象
	}
	return xmlhttp;	//返回请求对象
}

在js文件中开始定义这个函数，其他js函数直接调用就能创建一个异步请求对象。

3.2 标准的XMLHttpRequest属性

Onreadystatechange 每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数。
状态：
readyState:请求的状态
0：未初始化；1：正在加载；2：已加载；3：交互中；4：完成
status:服务器的HTTP状态码
200对应OK，404对应Not Found(未找到)

状态的改变会触发异步函数，调用回调函数。

不是每一种状态改变都要处理，一般在readyState状态值为4，status状态值为200的时候，处理服务器应答，所以在回调函数里写一个判断，判断readyState为4，status为200，再做处理。

responseText和responseXML就是服务器反馈的结果。

属性	描述
Onreadystatechange	每个状态改变时都会出发这个事件处理器，通常会调用一个JavaScript函数
readyState	请求的状态。0 = 未初始化，1 = 正在加载，2 = 已加载，3 = 交互中，4 = 完成
responseText	服务器的响应，表示为一个字符串
responseXML	服务器的响应，表示为XML。这个对象可以解析为一个DOM对象
status	服务器的HTTP状态码（200对应OK，404对应Not Found(未找到)）
statusText	HTTP状态码的相应文本(OK或Not Found(未找到)等等)

3.2 标准的XMLHttpRequest方法

方法	描述
abort()	停止当前请求
getAllResponseHeaders()	把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader(“header”)	返回指定首部的串值
open(“method”,“url”,true)	建立对服务器的请求。methos参数可以是GET、POST，urrl参数可以是相对URL或绝对URL，true:异步；false:同步
send(content)	向服务器发送请求
setRequestHeader(“header”,“value”)	把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()

异步流程
1、创建对象；
2、设置回调函数；
3、open创建服务器请求；
4、Send向服务器发送请求（服务器有结果会自动调用fun回调函数）。
同步流程
1、创建对象；
2、open建立起对服务器的请求；
3、send向服务器发送请求；
4、fun函数处理，服务器反馈结果。

//ajax.js

//获取XMLHttpRequest对象
function get_xmlreq(){
	var xmlhttp = null;
	if(window.XMLHttpRequest){
		xmlhttp = new XMLHttpRequest();
	}
	else{
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	return xmlhttp;
}

//function deal_request(){
//创建XMLHttpRequest对象
var xmlhttp = null;
xmlhttp = get_xmlreq();

//设置回调函数并结构服务器的状态
xmlhttp.onreadystatechange = function(){
	//如果服务器的状态为4表示完成，状态码为200表示OK，则可以获取服务器返回的数据
	if(xmlhttp.readState ==4 && xmlhttp.status ==200){
		//获取数据并对网页执行局部操作
		var ret = xmlhttp.resonseText;
		document.getElementById("mylabel").innerHTML = ret;
	}
	
	//创建http请求，并发送服务器
	xmlhttp.open("GET","file.txt",true);
	//清理缓存
	xmlhttp.setRequestHeader("If-Modified-Since", "0");
	//发送请求
	xmlhttp.send();

	//创建http请求
	
}

}

<!DOCTYPE html>
<html>
	<head>
		<title>获取服务器指定文件的内容</title>
	</head>
	<script type = "text/javascript" src = ajax.js> </script>
	<body>
		<div align = "center">
			<h2>获取服务器指定文件的内容</h2>
			<br>
			<br>
			<input type = "button" value = "发送请求" onclick = "deal_request()">
			<br>
			<br>
			<label  id = "mylabel">^_^</label>
		</div>
	</body>
</html>

在这里插入图片描述

伴君

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX使用

不是每一种状态改变都要处理，一般在readyState状态值为4，status状态值为200的时候，处理服务器应答，所以在回调函数里写一个判断，判断readyState为4，status为200，再做处理。通过JavaScript的XMLHttpRequest对象完成发送请求到服务器并返回结果的任务，然后使用JavaScript更新局部的网页；传统的网页(不使用AJAX)如果需要更新内容，必须重载整个网页面；浏览器是借助js与服务器通信的，js可以从浏览器获取数据，也可以更新浏览器的数据。
复制链接

扫一扫