Ajax详细剖析

前言

手写Ajax是前端面试常考的，所以对于手写Ajax是很必要的，不过我们不只要会默写更要理解。

基本模板

下面是Ajax请求的基本模板

var xhr=new XMLHttpRequest();
xhr.open("GET",url);
xhr.onreadystatechange=function(){
       if(xhr.readyState==4 && xhr.status==200){
            console.log(xhr.responseText);
       }
    }
xhr.send();

理解

接下来我们一句一句的来解释一下什么意思。

var xhr=new XMLHttpRequest();

获取一个XMLHttpRequest 对象，XMLHttpRequest 用于和服务器交换数据。

xhr.open("GET",url)

open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步默认）或 false（同步）

xhr.onreadystatechange=function(){
       if(xhr.readyState==4 && xhr.status==200){
            console.log(xhr.responseText);
       }
    }

onreadyStateChange事件是在readyState属性发生改变时触发的，readyState的值表示了当前请求的状态，在事件处理程序中可以根据这个值来进行不同的处理。 readyState有五种可取值0：尚未初始化，1：正在加载，2：加载完毕，3：正在处理；4：处理完毕。一旦readyState属性的值变成了4，就可以从服务器返回的响应数据进行访问了。
status 返回了XMLHttpRequest 响应中的数字状态码。status 200 代表一个成功的请求。如果服务器响应中没有明确指定status码，XMLHttpRequest.status 将会默认为200。
上面代码意思就是：当请求处理完毕并成功的时候打印信息

xhr.send();

send() 方法用于发送 HTTP 请求。如果是异步请求（默认为异步请求），则此方法会在请求发送后立即返回；如果是同步请求，则此方法直到响应到达后才会返回。

GET请求

var xhr=new XMLHttpRequest();
var url="http://127.0.0.1:8080/xxx.do?username=testuser&userno=123";

xhr.open("GET",url);
xhr.onreadystatechange=function(){
   if(xhr.readyState==4 && xhr.status==200){
          console.log(xhr.responseText);
    }
 }
xhr.send();

POST请求

var xhr=new XMLHttpRequest();
var url="http://127.0.0.1:8080/xxx.do";

xhr.open("POST",url);
xhr.setRequestHeader("Content-type","application/www-form-urlencoded")
xhr.onreadystatechange=function(){
   if(xhr.readyState==4 && xhr.status==200){
          console.log(xhr.responseText);
    }
 }
xhr.send("username=testuser&usernum=123");

解释一下GET和POST请求的一些区别：

1. setRequestHeader
   语法：myReq.setRequestHeader(header, value);

通 常在HTTP协议里，客户端像服务器取得某个网页的时候，必须发送一个HTTP协议的头文件，告诉服务器客户端要下载什么信息以及相关的参数。而 XMLHTTP 就是通过HTTP协议取得网站上的文件数据的，所以也要发送HTTP头给服务器。 但是 XMLHTTP 默认的情况下有些参数可能没有说明在HTTP头里，这是当我们需要修改或添加这些参数时就用到了
setRequestHeader 方法

一般GET请求不需要设置，因为get的请求直接拼接在url后面，例如：var url="http://127.0.0.1:8080/xxx.do?username=testuser&userno=123"; 但是post请求一般就需要设置请求头。
常见的：CONTENT-TYPE:application/x-www-form-urlencoded含义是表示客户端提交给服务器文本内容的编码方式 是URL编码，即除了标准字符外，每字节以双字节16进制前加个“%”表示

2. send
   GET请求一般直接send()为空，因为GET请求不需要发送数据，请求已经拼接在URL后面了，而POST一般就需要，例如：xhr.send("username=testuser&usernum=123");这里send里面写的就是postdata。