HTTP和AJAX(五、网络状态码和AJAX状态码)


**第三部分细节探究**
''''javascript(以下为基于原生JS实现AJAX的第三步的具体解析)
            //=>监听AJAX状态的改变,获取响应信息(获取响应头信息、获取响应主体信息)
            xhr.onreadystatechange=()=>{
                if(xhr.readyState===4&&xhr.status===200){
                    let result=xhr.responseText;//=>获取响应主体中的内容
                }
            };
            >
            let xhr new XMLHttpRequest;

            dir(xhr)
***Ajax状态码:描述当前AJAX操作的状态的
>xhr.readyState:包含从0到4,五种状态

        >0:UNSENT,未发送,只要创建一个AJAX对象,默认值就是0
        >1:OPENED,我们已经执行了xhr.open这个操作
        >2:HEADERS_RECEIVED当前AJAX的请求已经发送,并且已经接收到服务器端返回的响应头信息了
        >3:LOADING,相应主体的内容正在返回的路上
        >4:DONE,响应主体内容已经返回到客户端

***HTTP网络状态码
>HTTP网络状态码:记录了当前服务器返回信息的状态:xhr.status(百度查看即可)
        >成功:200,一个完整的HTTP事务完成(以2开头的状态码一般都是成功)
        >以3开头的一般也是成功,只不过服务器端做了很多特殊的处理
             301:Moved Permanently 永久转移(永久重定向),,一般应用于域名的迁移,,如360buy,会转到京东网站上
             302:Moved  temporarily 临时转移(临时重定向,新的HTTP版本中任务307是临时重定向)
                        '''一般用于服务器的负载均衡:当前服务器处理不了,我把当前请求临时交给其他的服务器处理
                         (一般图片请求经常出现302,很多公司都有单独的图片服务器)
             304:Not Modified 从浏览器缓存中获取数据‘把一些不经常更新的文件或者内容缓存到浏览器中,下一次从缓存中获取,减轻服务器压力,也提高页面的加载速度’
         >以4开头的,一般都是失败,而且客户端的问题偏大
             400:请求参数错误(参数不够或者参数错误)
             401:无权限访问
             404:访问地址不存在
        >以5开头的,一般都是失败,而且服务器的问题偏大
            >500:Internal Server Error 未知的服务器错误
            >503:Service Unavailable 服务器超负载
        >

**-AJAX中其它常用的属性和方法-**
>面试题:AJAX中总共支持几个方法:
  let xhr=new XMLHttpRequest():
    dir(xhr)
        >1.readystate:存储的是当前AJAX的状态码
         2.response/responseText/responseXML:都是用来接收服务器返回的响应主体中的内容,
                只是根据服务器返回内容格式不一样,我们使用不同属性接受即可
                ++responseText:是最常用的,接收到的结果是字符串格式的(一般服务器返回的数据都是JSON格式字符串)
                ++responseXML:偶尔会用到,如果服务器端返回的是XML文档数据,我们需要使用这个属性接受
         3.    status:记录了服务器端返回的HTTP状态码
                statusTEXT:对返回状态码的描述
         4.timeout:设置当前AJAX请求的超时时间,假设我们设置筛检为3000(MS),从AJAX请求发送开始,3秒后响应主体内容还没返回,浏览器会把当前AJAX请求任务强制断开    
         
 [方法]
         >1.abort():强制中断AJAX请求
         >2.getAllResponseHeaders():获取全部的响应头信息(获取的结果是一堆字符串文本)
         >3.getResponseHeader(key):获取指定属性名的 响应头信息,例如:xhr.getResponseHeader('date') 获取响应头中存储的服务器的时间
         >4.open():打开一个URL地址
         >5.overrideMimeType():重写数据的MIME类型
         >6.send():发送AJAX请求(括号中书写的内容是客户端基于请求主体把信息传递给服务器)
         >7.setRequestHeader(key,value):设置请求头信息(可以是设置的自定义请求头信息)

 
 [事件]
         >1.onabort:当AJAX被中断请求触发这个事件
         >2.onreadystatechange:AJAX状态发生改变,会触发这个事件
         >3.ontimeout:当AJAX请求超时,会触发这个事件
         >......
         >
 ******JavaScript(同步时间的代码实现)
    //获取客户端时间
         let xhr=new XMLHttpRequest();
         xhr.open('get','temp.json?_='+Math.random(),true);//=>????清除缓存
         xhr.setRequestHeader('aaaa','xxx');//=>请求头部的内容不能是中文字符;;设置请求头信息必须在OPEN之后和SEND之前
         
         //=>设置超时
         xhr.timeout=100000;
         xhr.ontimeout=()=>
         {
             console.log('当前请求已经超时')
             xhr.abort();
         }

 //获取服务器端的时间呈现在客户端
         xhr.onreadystatechange=()=>{
            let(readyState:state,status)=xhr;
            //=>说明请求数据成功了
            if(!/^(2|3)\d{2}$/.test(status)) return;
            };
            //=>在状态为2的时候就可以获取响应头信息了
            
                if (state===2){
                    let headerAll=xhr.getAllResponseHeaders();
                            serverDate=xhr.getResponseHeader('date');//=>获取的服务器时间是格林尼治时间(相比于北京时间差了8小时)
                    console.log(headerAll,new date(serverDate));//=>new参数serverDate后,把时间转化为北京时间
                    return;
                    }
                //=>在状态为4的时候响应主体内容就已经回来了
                if(state===4)
                {
                    let valueText=xhr.responseText();//=>获取到的结果一般都是Json字符串(可以使用JSON.PARSE把其转换为对象)
                            valueXML=xhr.responseXML('date');//=>获取到的结果是XML格式的数据(可以通过XML的一些常规操作获取存储的指定信息)   如果服务器返回的是XML文档,responseText获取的结果是字符串而responseXML获取的是标准XML文档
                            console.log(valueText,valueXML);
                }
            }
         xhr.send('name=zxt&age=28&sex=man');

猜你喜欢

转载自blog.csdn.net/Swampis/article/details/82184482