原生实现ajax

在这里将get和post请求用原生实现ajax稍做整理。
在此之前先了解一下方法

xhr.open(method,url,async)

• method：请求的类型；GET 或 POST
• url：文件在服务器上的位置
• async：true（异步）或 false（同步）

onreadystatechange事件

• 当请求被发送到服务器时，我们需要执行一些基于响应的任务。

• 每当 readyState 改变时，就会触发 onreadystatechange 事件。

• readyState 属性存有 XMLHttpRequest 的状态信息。

readyState

• 0: 请求未初始化

• 1: 服务器连接已建立

• 2: 请求已接收

• 3: 请求处理中

• 4: 请求已完成，且响应已就绪

status http状态码

• 200: “OK”
• 404: 未找到页面

get请求

var xhr=new XMLHttpRequest();//实例化
xhr.open('get','/abc?username=lili',true);
xhr.send();				//将请求发送到服务器
xhr.onreadystatechange=function(){
    if(xhr.readyState===4){
        if(xhr.status===200){
            $('.h1').html(xhr.responseText);
        }else{
            $('.h1').html('ERROR');
        }
    }
}

post请求

var xhr=new XMLHttpRequest();
xhr.open('post','/abc',true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send('username=weiwei&age=19');
xhr.onreadystatechange=function(){
    if(xhr.readyState===4){
        if(xhr.status===200){
            console.log(JSON.parse(xhr.responseText));
        }else{
            console.log('ERROR');
        }
    }
}