Ajax的封装

何迟

于 2018-12-13 22:27:46 发布

阅读量181

点赞数

分类专栏： Ajax PHP 前端开发也蛮有意思的

本文链接：https://blog.csdn.net/qq_42036616/article/details/84996002

版权

前端开发也蛮有意思的同时被 3 个专栏收录

82 篇文章 5 订阅

订阅专栏

PHP

7 篇文章 0 订阅

订阅专栏

Ajax

5 篇文章 0 订阅

订阅专栏

要点：

1、因为Ajax是异步请求，想要返回请求结果，必须要在异步操作完成之后，readyState = 4才能有结果，导致在内部返回值，不能返回到封装函数的外部只是返回出请求步骤内部而已，所以通过事件的委托完成，即获取到数据后，并执行传入的处理函数。

2、因为主要的请求方式两种post和get他们的方式会有不同，所以对头文件是否声明和是否有query都要通过判断做出不同的操作。

3、这个例子中，我们可以传入JSON格式数据，再通过join（）方法转换成['key1=value1&key2=value2']服务端需要的格式。

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>AJAX封装</title>
</head>
<body>
	<script type="text/javascript">
		function ajax(methon,url,params,fn){
			methon = methon.toUpperCase()
			// 请求方式统一成大写字母
            
            var xhr = new XMLHttpRequest()
            // 创建请求代理对象

            if(typeof params == 'object'){
                var tempArr = []
                for(var key in params){
                	var value = params[key]
                	tempArr.push(key + '=' + value)
                }
                // tempArr格式: ['key1=value1','key2=value2'],中间的,是push()方法自动添加的
                params = tempArr.join('&')
                // 将自动添加的,替换成&,而形成一个完整的字符串['key1=value1&key2=value2']
            }
            // 如果传入的参数是json格式是对象,可以通过 for - in循环遍历数据,并完成字符串拼接

            if(methon == 'GET'){
            	url += '?' + params
            }
            // 如果get请求,直接请求写成query

            xhr.open(methon,url)
            // 设置请求行，请求方式和地址

            var data = null
            // 将数据对象定义为空

            if(methon == 'POST'){
            	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
            }
            // 如果是post请求,需要指定响应体信息

            xhr.onreadystatechange = function(){
            	if(this.readyState != 4) return
            	fn(this.responseText)
                //异步操作完成后,拿到数据了调用传入的处理函数 
            }
            xhr.send(data)
            // 返回得到的数据
		}


		var fn = function(res){
			console.log(res)
			console.log('自习室敲代码,需要一身正气才不冷')
		}
		// 定义处理函数
       
        ajax('post','test.php',{},fn)
        // 调用

	</script>
</body>
</html>

php代码：

<?php
header('Content-Type: application/json');
// 声明服务端的数据格式
?>
{"success":true,"data":[{"id":1,"name":"chenxiaoshuai","qq":"2323010676"},{"id":2,"name":"陈小帅","qq":"3199578835"},{"id":3,"name":"陈帅帅","qq":"2323010676"},{"id":4,"name":"陈大帅","qq":"3199578835"},{"name":"chenxiaosh","qq":"2222222","id":5}],"total_count":192}

效果：