get 请求
//1.创建异步对象
var ajax = new XMLhttpRequest();
//2.设置请求参数 请求方式 和 请求地址
ajax .open ('get','xxxx/xxxx?xx=xxxx');
//3.发送请求
ajax.send();
//4.注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function (){
if(ajax.readyState == 4 && ajax.staus == 200 ){
//5.请求成功
console.log(ajax.responsetext)
}
}
post 请求
// 1.创建异步对象
var xhr = new XMLHttpRequest();
// 2.设置请求方式和请求地址
// post 请求要设置请求头
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.open('post','xxx/xxxx');
//3.发送请求
// a.不需要数据的时候
xhr.send()
// b.需要发送data
xhr.send('name=xl&age=22')
//4.注册事件 onreadystatechange 状态改变就会调用
xhr.onreadystatechange = function (){
if(xhr.readyState == 4 && xhr.staus == 200 ){
//5.请求成功
console.log(xhr.responsetext)
}
总结:
1.创建XMLHTTPRequest对象
2.使用open方法设置和服务器的交互信息
3.设置发送的数据,开始和服务器端交互
4.注册事件
5.更新界面
为了方便使用,我们可以把他封装进方法里面,要用的时候,直接调用就好了
function ajax_method(url,data,method,success) {
// 异步对象
var ajax = new XMLHttpRequest();
// get 跟post 需要分别写不同的代码
if (method=='get') {
// get请求
if (data) {
// 如果有值
url+='?';
url+=data;
}else{
}
// 设置 方法 以及 url
ajax.open(method,url);
// send即可
ajax.send();
}else{
// post请求
// post请求 url 是不需要改变
ajax.open(method,url);
// 需要设置请求报文
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 判断data send发送数据
if (data) {
// 如果有值 从send发送
ajax.send(data);
}else{
// 木有值 直接发送即可
ajax.send();
}
}
// 注册事件
ajax.onreadystatechange = function () {
// 在事件中 获取数据 并修改界面显示
if (ajax.readyState==4&&ajax.status==200) {
// console.log(ajax.responseText);
// 将 数据 让 外面可以使用
// return ajax.responseText;
// 当 onreadystatechange 调用时 说明 数据回来了
// ajax.responseText;
// 如果说 外面可以传入一个 function 作为参数 success
success(ajax.responseText);
}
}
}