WEB前端第六十课——原生Ajax与HTTP协议

1.Ajax简述

  全名:Asynchronous JavaScript and xml,

    是指围绕“由js向服务器发起http请求”这个功能而开发的一整套完整的方法。

    因此,引入jQuery封装好的Ajax会浪费很多资源,实际利用到的功能只是很少一部分,

    而原生ajax则可以根据实际需求编写代码,减少内存耗用。

  原生Ajax模块在处理网络请求时,包括以下四步骤:

    ⑴ 创建“xhr”对象

    ⑵ 构建“xhr”属性和方法

    ⑶ 通过“xhr”对象发出HTTP请求

    ⑷ 通过“xhr”对象的方法接收服务器回传的数据

  说明:

    Ajax可以发出同步请求,也可以发出异步请求。

    但多数情况下指的是异步请求,因为同步的Ajax请求对浏览器会产生“阻塞效应”。

2.xhr对象

  在Ajax中对整个请求从创建到发送,有着一整套严格的流程标准。

  需要至少以下几个步骤:

    ⑴ 通过 XMLHttpRequest 类创建 xhr 对象;

    ⑵ 为 xhr 对象添加属性和回调方法;

    ⑶ xhr 对象执行 open() 方法,设置请求发送的目标url地址;

    ⑷ xhr 对象执行 send() 方法,发出请求。

  语法:var xhr = new XMLHttpRequest();

  说明:

    XMLHttpRequest 对象用于在“浏览器”与“服务器”之间传送数据。

3.xhr对象常用属性和方法

  ⑴ onreadystatechange 属性

    该属性指向一个回调函数,当页面加载状态发生改变时,readyState属性值就会随即发生变化,

    此时,readystatechange属性所对应的回调函数就会自动被调用。

    语法:xhr.onreadystatechange = function(){}

  ⑵ readyState 属性

    该属性为只读属性,用一个整数和对应的常量来表示XMLHttpRequest请求当前所处的状态。

    一般只会用在 onreadystatechange 事件的回调函数中,

    通过判断 readyState属性的值,进而执行不同状态对应的函数。

    语法:xhr.onreadystatechange = function(){

         if(xhr.readystate==n){

           //执行相应的函数

         }

       }

    readyState属性值说明:

      0 值,对应常量“UNSENT”,

        表示XMLHttpRequest实例已经生成,但是 open() 方法还没有被调用;

      1 值,对应常量“OPEND”,

        表示 send() 方法还没被调用,仍可以使用 setRequestHeader() 设定HTTP请求头;

      2 值,对应常量“HEADERS_RECEIVED”

        表示 send() 方法已经执行,并且头信息和状态码已经收到;

      3 值,对应常量“LOADING”,

        表示正在接收服务器传来的body部分的数据,如果 responseType的属性

        是 text 或者 空字符串,responseText 就会包含已经收到的部分信息;

      4 值,对应常量“DONE”,

        表示服务器数据已经完全接收,或者本次接收已经失败了。

  ⑶ status 属性

    表示本次请求所得到的的HTTP状态码,是一个整数。

    语法:if(xhr.readyState==4){

         if(xhr.status==200){

           //请求通信成功

         }

       }

    说明:

      该属性为只读属性;

      该属性有以下几种可能值:

        200,OK,访问正常;  //一般情况下作为通信成功的标志。

        301,Moved Permanently,永久移动;

        302,Move Temporarily,暂时移动;

        304,Not Modified,未修改;

        307,Temporary Redirect,暂时重定向;

        401,Unauthorized,未授权;

        403,Forbidden,禁止访问;

        404,Not Found,未发现指定网址;

        500,Internal Server Error,服务器发生错误。

  ⑷ statusText 属性

    表示服务器发送的状态提示,是一个只读字符串。

    语法:xhr.shtatusText;

    说明:该属性不同于 status,属性值为返回状态码所对应的状态信息,如“OK”。

  ⑸ responseText 属性

    用于获取从服务器接收到的 字符串 内容,该属性为只读。

    如果本次请求没有成功或者数据不完整,则属性值等于 null;

    如果服务器返回的数据格式是 JSON,则可以使用 responseText属性进行数据解析。

    语法:xhr.responseText;

    说明:

      后台返回数据时,使用 echo json_encode();进行编码;

      前台接收数据时,直接接收到的返回结果为字符串,使用 JSON.parse();进行解析。

  ⑹ open() 方法

    表示要将请求发往目标地址,但只是设置而不是发送。

    语法:xhr.open('请求类型','目标url地址',是否异步);

    说明:

      第一个参数“请求类型”用于设置 get 或 post 请求;

      第二个参数“url地址”用于设置请求要发送到的地址链接;

      第三个参数为布尔值,用于设置是否异步发送,默认false表示同步发送

  ⑺ setRequestHeader() 方法

    用于设置HTTP头信息。

    HTTP协议要求客户端在向服务器发送请求时,必须发送HTTP协议的头文件。

    在HTTP协议头信息中设置要获取数据的相关信息及参数。

    setRequestHeader()方法则是XMLHTTP为添加或修改http头信息提供的一个接口方法。

    语法:xhr.setRequestHeader('header','value');

      参数header,规定头信息的名称;参数value,规定头的值。

    说明:

      本方法必须在 open() 之后、send() 之前被调用;

      该方法用于设置在请求发送时,一并被发出的一些辅助信息;

      需要设置或修改系统默认头信息是使用此方法。

      如:xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        使用POST方法提交时,value参数为Content-Type默认编码类型(url编码)。

        xhr.setRequestHeader('Content-Type', 'application/json');

        xhr.setRequestHeader('Content-Length', JSON.stringify(data).length);

  ⑻ send() 方法

    用于实际发出HTTP请求。

    语法:xhr.send(formData);

    说明:

      send() 方法的参数是表单数据,为post请求准备;

      如果请求类型是 get请求,则参数直接写 null 即可。

4.Ajax请求代码示例

<script>
    var uName = document.querySelector('.userName').value;
    var uCode = document.querySelector('.userCode').value;
    var xhr=new XMLHttpRequest();   //创建对象,准备发送Ajax请求
    xhr.onreadystatechange=function () {    //监听后台接收请求状态的变化
        if (xhr.readyState==4){             //判断当前请求进行到何种状态,属性值 4 表示后台已经接收到前台请求
            if (xhr.status==200){           //判断前台是否准确接收到后台反馈的数据,属性值 200 表示通信成功
                console.log(xhr.responseText);  //获取后台反馈的完整数据,json串
                console.log(typeof xhr.responseText);   //返回结果为 string 类型
                console.log(JSON.parse(xhr.responseText));   //将返回结果转换为对象
            }
        }
    }
    xhr.open('get','xhr.php?name=uName&code=uCode',true);
    xhr.send(null);
</script>

 

posted @ 2021-01-22 09:07  后来喵  阅读(137)  评论(0编辑  收藏  举报