Ajax的post和get请求
get无参数的请求
document.querySelector('button').onclick=function(){
//1.创建XMLHTTP对象
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
console.log(xhr.status,xhr.readyState);
if(xhr.readyState==2){
document.write('正在加载。。。。。。');
}else if(xhr.readyState==4){
document.write('收到服务器数据。。。。。');
}
};
//2.打开链接
xhr.open('GET',"http://localhost:4000");
//3.发送信息
xhr.send(null);
//4.监听状态改变
// xhr.onreadystatechange=function(){
// if(xhr.readyState==2){
// document.write('正在加载。。。。。。');
// }else if(xhr.readyState==4){
// document.write('收到服务器数据。。。。。');
// }
// };
};
get携带参数的请求
var oName=document.querySelector('#txtName');
var oPwd=document.querySelector('#txtPwd');
document.querySelector('button').onclick=function(){
//
let url="http://localhost:5000";
let newURL=`${url}?username=${oName.value}&pwd=${oPwd.value}`;
let xhr=new XMLHttpRequest();
xhr.open('GET',newURL);
xhr.send(null);
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
//读取服务器数据
//responseText
console.log(xhr.responseText);
// console.log(xhr.responseXML);
}
};
};
主要需要在原有地址上拼接上参数
post无参数的请求
document.querySelector('button').onclick=function(){
let xhr=new XMLHttpRequest();
xhr.open('POST','http://localhost:5000');
xhr.send(null);
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
console.log(xhr.responseText);
}
};
}
post携带参数的请求
var oName=document.querySelector('#txtName');
var oPwd=document.querySelector('#txtPwd');
document.querySelector('button').onclick=function(){
//
let url="http://localhost:5000/login";
//请求参数
let parm=`username=${oName.value}&pwd=${oPwd.value}`;
// let parm="username=jack";
let xhr=new XMLHttpRequest();
// xhr.open('POST',url,false);//同步
xhr.open('POST',url,true);//异步
// xhr.onreadystatechange=function(){
// if(xhr.readyState==4){
// console.log(xhr.responseText);
// }
// };
//添加头
//注意:使用ajax发送带有参数的post请求,需要加header
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// xhr.send(null);
xhr.send(parm);
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
// console.log(xhr.responseText,typeof xhr.responseText);
let obj=JSON.parse(xhr.responseText);
console.log(obj,obj.name,obj.age);
}
};
console.log('end');
};
使用ajax发送带有参数的post请求,需要加header!
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// xhr.send(null);
封装Ajax方法
实现从客户端请求服务器
@parm method POST GET
@url 服务器地址
@parms 请求参数
@fn 回调函数
function ajax(method,url,parms){
return new Promise(function(resolve,reject){
var xhr=new XMLHttpRequest();
method=method.toUpperCase();//转换为大写
//GET并且有参数
if(method==="GET"&&parms!=undefined){
// xhr.open(method,url,true);
url=url+"?"+parms;
}
xhr.open(method,url,true);
if(method=="POST" && parms!=undefined){
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(parms);
}else{
xhr.send(null);
}
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status ==200){
// console.log(xhr.responseText);
// fn(xhr.responseText);
resolve(xhr.responseText);
}
};
});
利用promise封装
function getdata(method, url, parms) {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
if (method === "get" && parms !== undefined) {
url = `${url}?${parms}`;
}
xhr.open(method, url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
resolve(xhr.responseText);
}
};
if (method === 'get') {
xhr.send(null);
} else {
xhr.send(parms);
}
}).then(data => {
console.log(data);
}).catch(err => {
console.log("错误信息为:"+err);
});
}
发起网络请求
post请求不完整
let url='http://localhost:5000/login';
let data="username=tom&pwd=123456";
//get 无参
// ajax("GET",url);
//get 有参数
// ajax('GET',url,data);
//post 无参
// ajax('POST',url);
//post 有参数
// ajax('POST',url,function(res){
// // console.log(res);
// var person=JSON.parse(res);
// document.querySelector('#box').innerHTML=`姓名:${person.name},年龄:${person.age}`;
// },data);
ajax('POST',url,data).then(function(data){
console.log(data);
});
/*
fetch(url).then()
fetch(url,{
method:"POST",
body:{},
headers:{},
});
//实现封装
*/