ajax的简单知识学习-CSDN博客

本文链接：https://blog.csdn.net/RequirementJava/article/details/100186228

AJAX(上)

异步的Javascript and xml，是一种网页的局部刷新技术，即在请求后台时，页面全局不会进行刷新，只是页面某一部分刷新，应用场景十分广泛，比如：表单验证，分页，前端数据展示。ajax不是一项新技术，在js的基础上实现新应用，全局通过一个XMLHttpRequest的对象实现跟后台交互。

AJAX使用步骤:

创建一个XMLHttpRequest对象
打开连接(请求后他)
发送请求
当请求状态发生改变时触发回调函数
1. 判断请求状态(readyState：4)
2. 判断响应状态(status：200)
3. 获取服务端数据(responseText)

创建XMLHttpRequest对象

var xhr;
if(XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

####打开连接

xhr.open('GET','请求地址')；

####发送请求1 - get请求

xhr.send(null)；

####发送请求2 - post请求

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.send(data);//data表示需要提交的数据

####当准备状态发生改变时触发回调函数

xhr.onreadystatechange=function(){
    if(xhr.readyState == 4 && xhr.status == 200){
        //获取服务端响应的数据
        var data = xhr.responseText;
    }
}

AJAX封装

为了让使用ajax变得更简单，这里可以通过封装的思想将ajax请求封装为一个函数，这样，以后对ajax的使用就只需要少量的代码即可完成:

####封装AJAX工具函数（base.js）

function ajax(method,url,data,callback){
	var xhr = null;
	//创建XMLHttpRequest对象（考虑浏览器兼容性）
	if(XMLHttpRequest){
		xhr = new XMLHttpRequest();
	}else{
		xhr = new ActiveXObject('Microsoft.XMLHTTP');//IE5,IE6
	}
	//打开连接
	xhr.open(method,url);
	//判断method是否post
	if(method.toLowerCase() === 'post'){
		//对于post请求需要设置请求头
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	}
	//发送请求
	xhr.send(data);
	//设置当请求状态发生改变时触发回调函数
	xhr.onreadystatechange=function(){
		if(xhr.readyState == 4 && xhr.status == 200){
			var data = xhr.responseText;
			//通过回调机制将数据传递到外部
			callback(data);
		}
	}
}

####使用封装的工具函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        
        <button id="load">加载数据</button>

        <!-- 引入js插件 -->
        <script src="js/base.js"></script>
        <script>
            var btn = document.getElementById('load');
            btn.addEventListener('click',function(){
                //发送ajax请求
                ajax('get','http://hk.softeem.top/mymusic/list',null,function(data){
                    //将json字符串转换为JS对象 
                    data = JSON.pase(data);
                    console.info(data);
                })
            })
        </script>
    </body>
</html>