ajax

作者: 郝加升 | 来源:发表于2018-10-09 21:11 被阅读0次

    new XMLHttpRequest来取得XHR对象。

    要使用XHR对象,要调用以下方法:

        open(要发送的请求类型,请求的url地址,是否异步发送请求):调用这个方法不会真正发送请求,而只是启动一个请求以备发送。

        send(作为请求主体发送的数据):调用这个方法就发送了特定的请求。如果不需要通过请求主体发送数据,则必须传入null。

    当服务器响应之后,响应的数据会自动填充XHR对象的属性,相关的属性简介如下:

        responseText:作为响应主体被返回的文本。无论内容类型是什么,响应主体的内容都会保存到这个属性中。

        responseXML:如果响应的内容类型是“text/xml”或“application/xml”,这个属性中将保存着响应数据的的XML DOM文档。对于非XML数据而言,这个属性的值为null。

        status:响应的HTTP状态,一般来说可以将HTTP状态代码200作为成功的标志。此外304表示请求的资源并没有被修改,可以直接使用浏览器中缓存的版本,当然,也意味着响应是有效的。

        statusText:HTTP状态的说明。

        readyState:表示请求/响应过程的当前活动阶段。它有以下几个可取的值:

        0:未初始化。尚未调用open()方法。

        1:启用。已经调用open方法,但尚未调用send()方法。

        2:发送。已经调用send()方法,但尚未接收到响应。

        3:接收。已经接收到部分响应数据。

        4:完成。已经接收到全部响应数据,而且已经可以在客户端使用了。

    只要readyState属性的值由一个值变为另外一个值,都会触发一次readystatechange事件。XHR对象还有一个abor()方法来取消异步请求。

    HTTP头部信息:

    默认情况下,在发送XHR请求的同时,还会发送下列头部信息:

        Accept:浏览器能够处理的内容类型。

        Accept-Charset:浏览器能够显示的字符集。

        Accept-Encoding:浏览器能够处理的压缩编码。

        Accept-Language:浏览器当前设置的语言。

        Connection:浏览器与服务器之间连接的类型。 

        Cookie:当前页面设置的任何cookie。

        Host:发送请求的页面所在的域。

        Referer:发送请求的页面的URI。

        User-Agent:浏览器的用户代理字符串。

        Content-Type: 指定请求和响应的HTTP内容类型。如果未指定 ContentType,默认为text/html。

    使用以下方法,可以设置自定义的请求头部信息:

        setRequestHeader(头部字段的名称,头部字段的值):这是XHR对象的方法,要成功发送请求头部信息,必须在调用open()方法之后且调用send()方法之前调用这个方法。

    调用XHR对象的以下方法可以取得相应的响应头部信息:

        getResponseHeader(头部字段名称):这个方法可以取得相应的响应头部信息。

        getAllResponseHeaders():这个方法可以取得包含所有头部信息的长字符串。

    GET请求:

        get请求将查询字符串参数追加到URL的末尾,查询字符串的每个参数的名称和值都必须使用encodeURIComponent()进行编码,然后才能放到URL的末尾。而且所有的名值对都必须由和号(&)分隔。

    POST请求:

        post请求发送过去的数据需要后端用程序处理。而表单发送过去的数据,处理起来更方便,所以一般都模拟表单的形式将数据发送给后端。模拟表单提交:

            1、首先将Content-Type头部信息用XHR的setRequestHeader()方法设置为application/x-www-form-urlencoded,也就是表单提交时的内容类型。

            2、以适当的格式创建一个字符串,post数据的格式与get查询字符串格式相同,名值对都需要使用encodeURIComponent()方法进行编码,以和号(&)分隔拼成字符串。

    FormData传送数据:

        FormData是一个构造函数,它的实例有一个append(键,值)方法:分别对应表单字段的名字和字段中包含的值,可以通过这个方法给实例添加多个键值对。也可以向FormData构造函数中传入表单元素,用于将表单元素的所有键值对传入其中。创建了实例以后可以将它直接传给XHR的send()方法。使用了FormData之后,不需要明确的在XHR对象上设置请求头部。XHR对象能够识别传入的数据类型是FormData的实例,并配置适当的头部信息。

    超时设定:

    以下都是XHR对象的属性或者方法:

        timeout:给这个属性设置一个数值,表示在等待多少毫秒之后还没有响应就会终止,并且触发XHR的timeout事件处理程序。

        timeout:这是XHR对象的事件处理程序,超时就会触发这个事件。

    进度事件:

    loadstart:在接收到响应数据的第一个字节时触发。

    progress:在接收响应期间持续不断的触发,必须在open()方法之前添加这个监听事件。这个事件有event对象,其中包含三个额外的属性:

        lengthComputable:表示进度信息是否可用的布尔值。

        position:表示已经接收的字节数。

        totalSize:表示根据Content-Length响应头部确定的预期字节数。

        chrometotalloadedlengthComputable这三个属性表示上列的信息。

    error:在请求发生错误时触发。

    abort:在因为调用了abort()方法而终止连接时触发。

    load:在接收到完整的响应数据时触发。只要浏览器接收到服务器的响应,不管状态如何,都会触发load事件。必须要检查status属性,才能确定数据是否真的可用了。

    loadend:在通信完成或者触发error、abort或load事件后触发。

    跨域源资源共享:

    在发送请求时,需要给它附加一个Origin头部,其中包含请求页面的完整地址。如果服务器认为这个请求可以接受,就在Access-Control-Allow-Origin头部中回发相同的源信息,也就是地址(如果是公共资源,可以回发*)。如果没有这个头部,或者有这个头部但源信息不匹配,浏览器就会驳回请求。请求和响应都不包含cookie信息。

    跨域安全限制:

    1、不能使用setRequestHeader()设置自定义头部,否则会返回空。

    2、不能发送和接收cookie。

    3、调用getAllResponseHeaders()方法总会返回空字符串。

    Preflignted Requests

    CORS通过一种叫做Preflignted Requests的透明服务器验证机制支持开发人员使用自定义的头部、GET或POST之外的方法,以及不同类型的主体内容。在使用下列高级选项来发送请求时,就会向服务器发送一个Preflight请求。这种请求使用OPTIONS方法,发送下列头部。

    Origin:与简单的请求相同。

    Access-Control-Request-Method:请求自身使用的方法。

    Access-Control-Request-Headers:(可选)自定义的头部信息,多个头部信息以逗号分隔。

    发送这个请求后,服务器可以决定是否允许这种类型的请求。服务器通过在响应中发送如下头部信息与浏览器沟通。

    Access-Control-Allow-Origin:与简单的请求相同。

    Access-Control-Allow-Methods:允许的方法,多个方法以逗号分隔。

    Access-Control-Allow-Headers:允许的头部信息,多个头部信息以逗号分隔。

    Access-Control-Max-Age:应该将这个Preflight请求缓存多长时间(以秒表示)。

    Preflight请求结束后,结果将按照响应中的指定时间缓存起来。而为此付出的代价只是第一次发送这种请求时会多一次HTTP请求。

    带凭据的请求:

    默认情况下,跨域请求不提供凭据(cookie、HTTP认证及客户端SSL证明等)。通过将XHR的withCredentials属性设为true,可以指定某个请求应该发送凭据。如果服务器接受带凭据的请求,会用下面的HTTP头部来响应。

    Access-Control-Allow-Credentials:true

    如果发送的事带凭据的请求,但服务器响应中没有包含这个头部,那么浏览器就不会把响应交给JavaScript(于是,responseText中将是空字符串,status的值为0,而且会调用onerror事件处理程序)。

    其它跨域技术

    图像ping

    创建一个图片,然后通过指定图片的src来发起请求,这样子的请求是不受同源策略影响。从而可以发起请求,但是发起请求后得不到信息,只能通过load或者error事件得到是否成功。

    JSONP

    创建一个script元素,然后指定src,通过返回的信息是在script标签内的,就会执行相应的内容,从而可以调用指定函数,并且通过参数传入数据。

    AjaxComet:

    SSE(服务器发送事件)

    这个事件是服务器能不间断的给客户端发送信息,发送的信息MIME类型必须是text/event-stream(data: foo),并且保持域服务器的活动链接,只能服务器给客户端发送。这个API需要创建一个新的EventSource对象,并且在实例化的时候传入连接的URL,这个对象有三个事件:

    open:在建立连接时触发。

    message:在从服务器接收到新事件时触发。

    error:在无法建立连接时触发。

    这个对象还可以通过close方法断开连接。

    Web Sockets

    它可以实现持久连接提供双向通信,但是它必须使用Web Socket协议。要创建Web Sockets,先实例一个WebSocket对象并传入要连接的URL。这个对象有这几个方法:

    close():关闭Web Socket连接。

    send(要发送的数据):向服务器发送数据,只能发送纯文本数据,可以传入json数据。

    WebSocket对象还有这几个事件:

    message:当服务器向客户端发来消息时,WebSocket对象就会触发这个事件。传入的数据存放在event.data属性中。只能是纯文本数据,可以传入json数据。

    open:在成功建立连接时触发。

    error:在发生错误时触发,连接不能持续。

    close:在连接关闭时触发。事件对象中包含着额外的三个属性:

    wasClean:是一个布尔值,表示连接是否已经明确的关闭。

    code:服务器返回的数值状态码。

    reason:服务器发回的信息。

    WebSocket对象不支持DOM2级事件监听,因此只能用DOM0级语法定义每个事件处理程序。

    相关文章

      网友评论

          本文标题:ajax

          本文链接:https://www.haomeiwen.com/subject/pdayaftx.html