创建AJAX请求

最新推荐文章于 2022-11-19 20:29:01 发布

Wether or not

最新推荐文章于 2022-11-19 20:29:01 发布

阅读量164

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/Wehter/article/details/113731092

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

get方法

1、生成ajax对象

 var xhr =null;
      try{
        xhr = new XMLHttpRequest();
      }catch(error){
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
      }

2、open方法

 xhr.open('get','1.get.php?username=a&age=18&password=123abc',true);

3、调用send方法

xhr.send();

4、获取数据

xhr.onreadystatechange = function(){
	if(xhr.readyState == 4){
		console.log(xhr.responseText)
	}

全部：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script>
  window.onload = function (){
    var btn = document.getElementById('btn1');
    btn.onclick = function(){
      // 1、生成ajax对象
      var xhr = null;
      try{
        xhr = new XMLHttpRequest();
      }catch(error){
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
      }
      // 2、open方法
      xhr.open('get','1.get.php?username=a&age=18&password=123abc',true);
      // 3、调用send方法
      xhr.send();
      // 4、获取数据
      xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
          console.log(xhr.responseText)
        }
      }
    }
  }
</script>
<body>
  <button id='btn1'>get</button>
</body>
</html>

POST方法

window.onload = function (){
    var btn = document.getElementById('btn1');
    btn.onclick = function(){
      // 1、生成ajax对象
      var xhr =null;
      try{
        xhr = new XMLHttpRequest();
      }catch(error){
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
      }
      // 2、open方法
      xhr.open('get','1.post.php',true);
      
      // 这行代码写在send方法前面
      xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

      // 3、调用send方法
      xhr.send();
      // 4、获取数据
      xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
          console.log(xhr.responseText)
        }
      }
    }
  }

下面来封装一下

function ajax({type = 'get',url,data}){
	//1、生成ajax对象 
	var xhr =null;
	try{
      	xhr = new XMLHttpRequest();
    }catch(error){
      	xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    // 2、调用open方法
    if(type === 'get' && data){
		url += '?' + querystring(data);
	}
	xhr.open(type,url,true);

	// 3、调用send
	if(type === 'get'){
		xhr.send();
	}else{
		xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
		xhr.send(data && querystring(data));
	}

	// 4、拿到数据
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4){
			console.log(xhr.responseText);
		}
	}
}

// 先封装一个字符串的方法
function querystring(obj){
	var str = '';
	for(var attr in obj){
		str += `${arrt}=${obj[attr]}&`;
	}
	return str.substring(0,str.length - 1);
}

// 完毕


btn[0].onclick = function(){
	ajax({
		url:'';
		data:{
			username:'葫芦娃',
			age:18
			password:'123456'
		}
	})
}
btn[1].onclick = function(){
	ajax({
		url:'';
		type:'post'
		data:{
			username:'葫芦娃',
			age:18
			password:'123456'
		}
	})
}

Wether or not

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
创建AJAX请求

get方法1、生成ajax对象 var xhr =null; try{ xhr = new XMLHttpRequest(); }catch(error){ xhr = new ActiveXObject('Microsoft.XMLHTTP'); }2、open方法 xhr.open('get','1.get.php?username=a&age=18&password=123abc',true);3、调用s
复制链接

扫一扫