Ajax笔记

时间 2019-12-05

标签 ajax 笔记栏目 Ajax 繁體版

原文原文链接

Ajax笔记

什么是Ajax？简单来讲，Ajax是无需刷新页面就能从服务器获取数据的一种方法。javascript
Ajax技术的核心是XMLHttpRequest对象（简称XHR），XHR为从服务器获取数据提供了流畅的接口，再将获取的数据经过DOM插入页面中。如今来讲，熟练掌握使用XHR对象已经成为现代web开发人员必须掌握的一种技能。php

如今开始Ajax体验之旅：

1、建立XHR对象

var xhr = new XMLHttpRequest();

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

2、XHR用法

open()web
```
xhr.open("get","liuwen.txt","false");
```
- 这中间有三个参数，第一个参数要发送的请求类型，第二个参数是请求的URL，第三个参数是是否异步发送请求的布尔值。浏览器
- 这行代码会启动一个针对liuwen.txt的get请求，须要注意的是：1.URL相对于执行代码的当前页面（也可使用绝对路径）2.调用open()方法并不会真正的发送请求，只是启动等待发送。缓存
send()安全
```
xhr.send(null);
```
- send()接收一个参数，做为请求主体发送的数据。若是不须要经过请求主体发送数据，则必须传入null，由于这个参数对某些浏览器来讲是必须的。send()执行以后，请求就会被发送到服务器。服务器
上述的请求是同步的，javascript代码会等到服务器响应以后再继续执行。响应后，响应的数据会自动填充到XHR对象的属性。以下：cookie

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()能够取得一个包含全部头部信息的长字符串。

3、两种经常使用请求

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

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

4、安全

经过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调试器很容易破解它。