AJAX => 入门学习-CSDN博客

本文链接：https://blog.csdn.net/O_Yancey/article/details/50540083

学习内容

Ajax全接触(慕课网)

学习网站

学习笔记

1. 什么是Ajax?

Ajax全称Asynchronous JavaScript and XML（异步的JavaScript和XML）;
Ajax不是编程语言，仅仅是一种在无需重新加载整个页面情况下更新部分网页的技术。

2. 同步和异步：

简单来说，同步即严格按照顺序执行，异步即不按照顺序执行。如下所示：

function do() {
    openDoor();
    intoRoom();
    // 同步：先开门，才能进屋
}
function do() {
    setTimeout(openDoor(), 10000);
    intoRoom();
    // 异步：钥匙落在屋里，要先翻墙进屋拿钥匙才能开门
}

Ajax技术，即运用XMLHttpRequest对象和web服务器来进行数据的异步交换。

3. HTTP（HyperText Transfer Protocol）概念

HTTP是一种无状态的协议：无状态指的是不建立持久的连接。

3.1 一个完整的HTTP的请求过程，通常有一下七个步骤：

一、建立#连接（TCP是因特网中的传输层协议，使用三次握手协议建立连接）
二、浏览器向服务器发送请求命令
三、浏览器发送请求头信息
四、服务器应答
五、服务器发送应答头信息
六、服务器向浏览器发送数据
七、服务器关闭TCP连接

3.2 一个HTTP请求组成：

<request-line> /* 请求行：包含请求方法、要访问的资源、使用的HTTP版本 */
<headers> /* 请求头：客户端环境信息，身份验证等等信息 */
<blank line> /* 空行，空行之后为请求正文 */
[<request-body>] /* 请求体，也就是请求正文： 包含客户提交的查询字符串信息等等 */

请求方法：HTTP1.1支持7种，GET、POST、HEAD、OPTIONS、PUT、DELETE和TARCE。在Internet应用中，最常用的方法是GET和POST。他们的区别是：
GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量有限制，一般在2000字符
POST：一般用于修改服务器上的资源，对所发送信息的数量没有限制

3.3 一个HTTP响应组成：

<status-line> /* 状态行：返回状态码显示请求成功还是失败 */
<headers> /* 响应头：包含服务器类型，日期时间，内容类型，长度等 */
<blank line> /* 空行，空行之后为响应体 */
[<response-body>] /* 响应体*/

响应代码：
* 1XX 信息类，表示收到浏览器的请求，正在进一步处理。
* 2XX 成功，例如：200 OK，找到了该资源，并且一切正常。
* 3XX 重定向，表示没有成功，例如：304 NOT MODIFIED，该资源在上次请求之后没有任何修改。这通常用于浏览器的缓存机制。
* 4XX 客户端错误，例如：404 NOT FOUND，意味着在指定的位置不存在所申请的资源。
* 5XX 服务端错误，例如：500，表示服务器不能完成对请求的处理。

3.4 安全和幂等

所谓安全的意味着该操作用于获取信息而非修改信息。幂等的意味着对同一 URL 的多个请求应该返回同样的结果。完整的定义并不像看起来那样严格。换句话说，GET 请求一般不应产生副作用。从根本上讲，其目标是当用户打开一个链接时，她可以确信从自身的角度来看没有改变资源。比如，新闻站点的头版不断更新。虽然第二次请求会返回不同的一批新闻，该操作仍然被认为是安全的和幂等的，因为它总是返回当前的新闻。反之亦然。POST 请求就不那么轻松了。POST 表示可能改变服务器上的资源的请求。仍然以新闻站点为例，读者对文章的注解应该通过 POST 请求实现，因为在注解提交之后站点已经不同了（比方说文章下面出现一条注解）。

4. XMLHttpRequest对象

var request = new XMLHttpRequest();

请求
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求： method：请求的类型；GET 或 POST； url：文件在服务器上的位置； async：true（异步）或 false（同步）
send(string)	将请求发送到服务器： string：仅用于 POST 请求
setRequestHeader(header,value)	向请求添加 HTTP 头。 header: 规定头的名称 value: 规定头的值

响应
responseText	获得字符串形式的响应数据
responseXML	获得 XML 形式的响应数据

onreadystatechange 事件
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	状态码:当 readyState 等于 4 且状态为 200 时，表示响应已就绪

一个典型的Ajax

var request = new XMLHTTPRequest();
request.open(“GET”, “create.PHP”, true);
request.setRequestHeader(“Content-type”, “application/x-www-form-urlendecoded”);// 此行必须放在open()与send()之间
request.send();
request.onreadystatechange = function() {
    if (request.readyState === 4 && request.status === 200) {
        // do something
    }
}