Ajax封装

最新推荐文章于 2024-06-22 12:23:42 发布

街头嗳昧℡

最新推荐文章于 2024-06-22 12:23:42 发布

阅读量121

点赞数

分类专栏： js 文章标签： ajax jquery javascript

本文链接：https://blog.csdn.net/m0_58845957/article/details/120750941

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Ajax
说道ajax到底什么是ajax？ ajax是一种创建交互网页应用的一门技术。

ajax的应用场景有：（地图）实时更新，表单验证等等....

ajax的优缺点：
优点：1.实现局部更新（无刷新状态下），2.减轻了服务器端的压力
缺点：1.破坏了浏览器前进和后退机制（因为ajax自动更新机制）
2.一个Ajax请求多了，也会出现页面加载慢的情况。
3.搜索引擎的支持程度比较低。
4.ajax的安全性问题不太好（可以用数据加密解决）。

首先说明：如果要使用ajax必须要有后端环境的支持（服务器端）。

HTTP请求
HTTP请求有两种方式
GET：用于获取数据，GET是在URL上传递数据（网址后面的东西），存储量较少，安全系数比较低。
POST：用于上传数据，POST安全性一般比（GET好一些），容量几乎是无限（多用于表单）。
Ajax的使用
使用ajax一共有4个步骤：1.创建ajax、2.连接服务器、3.发送请求、4.接受返回值。

创建Ajax
创建ajax必须考虑兼容性处理，IE6以上：new XMLHttpRequest()、IE6：new ActiveXObject("Microsoft.XMLHTTP")
兼容处理

var xhr = null;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
} else{
    xhr = new ActiveXObject("Mricosoft.XMLHTTP");
}

连接服务器
上面创建的ajax对象xhr，使用xhr.open（"请求方式（GET/POST）"，url路径，“异步/同步”）。
第三个参数：true===》异步、false===》同步。
当请求方式为POST的时候，代码写法如上；
当请求方式为GET的时候，使用xhr.open（"请求方式（GET/POST）"，url路径 + “？”请求数据 + ，“异步/同步”）。
发送请求
使用xhr.send（）发送请求
当请求方式为GET的时候，发送请求为xhr.send(null).
当请求方式为POST的时候，发送请求为xhr.send(请求数据)。
此外使用POST的时候必须在xhr.send（请求数据）上面添加

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

接收返回值
使用ajax会想用一个事件readystatechange事件：当请求被发送到服务器时，我们需要执行一些基于响应的操作。
当readystatechange改变的时候，就会触发这个事件执行。
readyState：请求的状态，返回的是状态码（0 - 4）：0（未初始化）open还没有调用、1（载入）已经调用了send（）正在发送请求、2（载入完成）send方法已经完成已经收到了全部的响应内容、3（解析）正在解析响应内容、4（完成）响应内容解析完成可以在客户端用了。
responseText：返回请求的内容。
status：返回请求的结果码：返回200（成功）、返回404（未找到）、返回5**（5开头）（服务器错误）

封装Ajax
在封装ajax的时候会使用到参数传递，因此必须写个方法作为对象属性转换为ajax请求数据的方法
下面是ajax封装，并举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			function ajax(obj) {
				var xhr = null;
				var params = formsParams(obj.data)
				if(window.XMLHttpRequest){
					xhr = new XMLHttpRequest()
				}else {
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
				if(obj.type === 'GET'){
					xhr.open(obj.type,obj.url + "?"+ params,obj.async)
					xhr.send(null)
				}else if(obj.type === 'POST'){
					xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
					xhr.open(obj.type,obj.url + "?"+ params,obj.async)
					xhr.send(params)
				}
				xhr.onreadystatechange = function(){
					if(xhr.readyState === 4) {
						if(xhr.status >= 200 && xhr.status < 300){
							 obj.success(xhr.responseText);	
						}
					}
				}
			}
			function formsParams(data) {
				var arr = []
				for(let index in data) {
					arr.push(data[index])
				}
				arr.join('&')
			}
			ajax({
				type:'GET',
				url:'https://api.apiopen.top/getJoke',
				data:{
					 /* name : "张三",
					  age : 18 */
				},
				async:true,
				success:function(res){
					console.log(res);
				}
			})
			
			
		</script>
		
		
		
	</body>
</html>

街头嗳昧℡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax封装

Ajax 说道ajax到底什么是ajax？ ajax是一种创建交互网页应用的一门技术。 ajax的应用场景有：（地图）实时更新，表单验证等等.... ajax的优缺点：优点：1.实现局部更新（无刷新状态下），2.减轻了服务器端的压力缺点：1.破坏了浏览器前进和后退机制（因为ajax自动更新机制） 2.一个Ajax请求多了，也会出现页面加载慢的情况。 ...
复制链接

扫一扫

专栏目录