JavaScript之AjAX

Posted 2020-10-06 阿苍老师

一：AJAX一词的实际意义为“不发生页面跳转，异步载入内容并改写页面内容的技术”，异步处理的优点是不会让用户白白等待

1.1  XMLHttpRequest：如果要通过javascript动态的向服务器发送请求，则需要使用XMLHttpRequest对象，基本的处理流程如下，在创建了XMLHttpRequest对象之后，就需要对服务器的url进行指定，以发送请求

 1 var xhr = new XMLHttpRequest();
 2 xhr.onreadystatechange = function(){
 3     if(xhr.readState ==4){
 4           if(xhr.status == 200){
 5                alert(xhr.responseText);
 6           }
 7     }
 8 };
 9 xhr.open(‘GET‘,‘http://example.com/something‘);
10 xhr.setRequestHeader(‘If-Modiified-Since‘,‘Thu 01 Jun 1970 00:00;00 GMT‘);
11 xhr.send(null);

1.1.1     readyState的含义：0：open()尚未被调用，1：send()尚未被调用，  2：服务器尚未返回响应    3：正在接受来自服务器的响应    4：完成了对来自服务器的响应接受

1.1.2     status中包含了响应的状态码，如果通信正常结束，该值为200.关于http响应的其他状态码请参考其他书籍

1.1.3     在responseText中包含了服务器响应的字符串形式。而对于XML的情况，响应会以DOM对象的形式包含于responseXML之中。根据情况选择合适的响应类型即可。不过无论响应的形式如何，在responseText中都会含有相应的值，所以只要使用responseText的值就不会有什么问题

1.1.4  传递给open（）的参数是HTTP请求类型及通信目标服务器的URL，其实它还可以再接受第三个参数，如果第三个参数为false，这时XMLHttpResponse则会执行同步通信

1.1.5   setRequestHeader用于请求头部设置

1.1.6   实际向服务器发送请求的是send（），如果是post请求类型，则会将参数发送给服务器，如果是GET或HEAD请求等不需要发送数据的请求，则参数为null

1.2 超时处理：在同步通信时，通信过程很费时，则会在send（）处等待，所以最好设置合适的超时时间，如果超时则取消改操作，进行下一步或则再次请求

 1 var xhr = new XMLHttpRequest();
 2 var timerId = window.setTimeout(funtion(){
 3        xhr.abort();
 4 },500);//五秒后将会超时
 5 xhr.onreadystatechange = funtion(){
 6       if(request.readyState===4){
 7          //取消超时处理
 8           window.clearTimeout(timeId);
 9       }
10 };

1.3 跨域通信：