ajax基础

一、什么是ajax？

简单来说，ajax相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部刷新页面数据，从而提高用户体验。
ajax的图解

二、ajax的实现步骤

1.创建ajax对象

创建XHR对象：

var xhr = new XMLHTTpRequest()

如果检测原生XHR对象不存在，且检测另一个对象ActiveX对象也不存在，就抛出一个错误。然后就要使用下面的代码在浏览器中创建XHR对象。
```
var xhr = createXHR();
```

2.告诉ajax请求以及请求的方式

open()方法

接收三个参数：

（1）要发送的请求的类型（“get”，“post”等）

（2）请求的URL（服务器上文件的地址）

（3）表示是否发送异步请求的布尔值。

例：

xhr.open("get","example.php",false);

3.发送请求

send（）方法

接收一个参数：即要作为主体发送的数据。如果不需要通过请求主体发送数据，则必须传入null。调用send（）后，请求就会被分派到服务器。例：

xhr.open("get","example.php",false);
xhr.send(null);

4.获取服务器端给与用户端的响应数据

为XHR对象添加onreadystatechange响应函数
判断响应是否完成：XHR对象的readyState属性值为4的时候
判断响应是否可用：XHR对象的status属性值为200

获得服务器响应（responseText和responseText属性）

即：

var xhr = createXHR();
xhr.onreadystatechange = function(){
    if(xhr.readyState==4){
      if(xhr.status>=200&&xhr.status<300)||xhr.status==304{
            alert(xhr.responseText);
        }
        else{
            alert("Request was unsucceful:"+xhr.status);
        }
    }
}

三、请求的方法

GET请求

最常用于向服务器查询某些信息。必要时，可以将查询的字符串参数追加到URL的末尾，以便将信息发送给服务器。

POST请求

通常用于向服务器发送应该被保存的数据。post请求的主体可以包含非常多的数据，而且格式不限。

GET和POST请求的区别

get比post更简单更快，可用于大多数情况下。

不过，在以下情况尽量始终使用POST：

缓存文件不是选项（更新在服务器上的文件或数据库）
向服务器发送大量数据（post无大小限制）
发送用户输入（可包含未知字符），post比get更强大更安全

四、setRequestHeader()

使用该方法可以设置自定义的请求头部信息。该方法接收两个参数：

（1）头部字段的名称

（2）头部字段的值

要成功发送请求，必须在调用open（）方法之后且调用send（）方法之前调用，如下：

xhr.open("post","example.php",true);
xhr.setRequestHeader("myHeader","myvalue");
xhr.send(null);

五、HTTP的头部信息

XHR对象提供了操作请求头部和响应头部信息的方法。在默认的情况下，在发送XHR请求的同时，还会发送下列头部信息：

Accept：浏览器能够处理的内容类型
Accept-Charset：浏览器能够处理的字符集
Accept-Encoding：浏览器能够处理的压缩编码
Accept-Language:浏览器当前设置的语言
Connection：浏览器与服务器之间连接的类型
Cookie：当前页面设置的任何cookie
Host：发出请求的页面所在域
Referer：发出请求的页面的URL
处理的压缩编码
Accept-Language:浏览器当前设置的语言
Connection：浏览器与服务器之间连接的类型
Cookie：当前页面设置的任何cookie
Host：发出请求的页面所在域
Referer：发出请求的页面的URL
User-Agent：浏览器的用户代理字符串

来源：oschina

链接：https://my.oschina.net/u/4256309/blog/4410364

标签

XHR