Ajax笔记

2019年9月14日 142次阅读 来源: 刘雯

Ajax笔记

  • 什么是Ajax？简单来说，Ajax是无需刷新页面就能从服务器获取数据的一种方法。

  • Ajax技术的核心是XMLHttpRequest对象（简称XHR），XHR为从服务器获取数据提供了流畅的接口，再将获取的数据通过DOM插入页面中。现在来说，熟练掌握使用XHR对象已经成为现代web开发人员必须掌握的一种技能。

现在开始Ajax体验之旅：

一、创建XHR对象

 var xhr = new XMLHttpRequest();

  • 一行代码是不是很简单！此种方法只支持IE7及更高的版本。鉴于现在IE7早期版本用户群十分稀少，如果想支持更低版本的IE，可自行查阅书籍或GOOGLE。

二、XHR用法

  • open()

    xhr.open("get","liuwen.txt","false");

    • 这中间有三个参数，第一个参数要发送的请求类型，第二个参数是请求的URL，第三个参数是是否异步发送请求的布尔值。

    • 这行代码会启动一个针对liuwen.txt的get请求，需要注意的是：1.URL相对于执行代码的当前页面（也可以使用绝对路径）2.调用open()方法并不会真正的发送请求，只是启动等待发送。

  • send()

    xhr.send(null);

    • send()接收一个参数，作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入null，因为这个参数对某些浏览器来说是必须的。send()执行之后，请求就会被发送到服务器。

  • 上述的请求是同步的，javascript代码会等到服务器响应之后再继续执行。响应后，响应的数据会自动填充到XHR对象的属性。如下：

    responseText:作为响应主体被返回来的文本。
    resposeXML:如果响应的内容类型为”text/xml”或”application/xml”，这个属性中将保存包含着响应数据的XML DOM文档。
    status:响应的HTTP状态。
    statusText:HTTP状态说明书。

  • 接收到响应后，我们需要检查status属性，确定响应是否成功返回。

if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
     alert("xhr.responseText");
}else{
     alert("reaquest was unsuccessful: + xhr.status");
}

  • 一般来说，将HTTP状态码为200作为成功标志，状态码304表示请求的资源并没有被修改，可以直接使用浏览器中缓存的版本（也等于响应有效）。

  • 前面的都是同步请求，但是多数我们还是发送异步请求，才能让Javascript继续执行而不必等待响应，此时需要检测readyState属性，该属性表示请求／响应过程的当前活动阶段。当该值为4，所有数据都已经就绪。

  • HTTP头部信息
    : HTTP头部信息中部分对开发人员有用，XHR对象提供了操作这两种头部信息（请求头部和响应头部）的方法。

    • setRequestHeader()可以设置自定义的请求头部信息。有两个参数：头部字段的名称和头部字段的值，在open()之后和send()之前调用。

    • getResponseHeader()传入头部字段名称，可以取得相应的响应头部信息。

    • getAllResponseHeaders()可以取得一个包含所有头部信息的长字符串。

三、两种常用请求

GET请求是最常见的请求，用于向服务器查询某些信息。
POST请求使用频率仅次于GET，用于向服务器发送需要被保存的数据。

  • GET请求的效率接近POST的两倍。

四、安全

  • 通过XHR访问的URL也可以通过浏览器或者服务器来访问，比如下面这个URL

/getuserinfo.php?id=23

  • 如果向这个URL发送请求，可以推断会得到id为23的用户的个人数据，但是很有可能会被别人改成24，25。任何人的数据都可能被泄漏。因此为确保XHR的安全性通长的的做法是验证发送请求者是否有权限访问相应的信息。
    现有以下几种方式：

    • 以SSL连接来访问可以通过XHR请求的资源。（SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全（Transport Layer Security，TLS）是为网络通信提供安全及数据完整性的一种安全协议。TLS与SSL在传输层对网络连接进行加密。）

    • 每一次请求都要附带验证码。
      ps：上述两种方法一定程度上可以抵挡CRSF攻击。

    • 要求发送POST请求而不是GET——很容易改变。

    • 检查来源URL以确定是否可信——来源很容易伪造。

    • 基于cookie信息进行验证——同样很容易伪造。

  • XHR对象也提供了一些安全机制，但实际不可靠。切记！！实际open()还有用户名和密码两个参数，但千万不要写在js代码中，js调试器很容易破解它。

    原文作者：刘雯
    原文地址: https://segmentfault.com/a/1190000008398361
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞