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'
}
})
}