AJAX和HTTP的理解

AJAX的全称：Asynchronous JavaScript and XML (异步的JavaScript和XML)

• XML：可扩展标记语言 （具有一定格式和规则的语言）
• HTML：超文本标记语言

1. Ajax概述

什么是同步，什么是异步

同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待  卡死状态

异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随  意做其他事情，不会被卡死

2. Ajax的运行原理

页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，在这段时间里，客户端可以进行任意操作，直到服务器端将数据返回给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种功能。Ajax异步请求与同步请求对比

3. 概念介绍

1.运用HTML和CSS来实现页面，表达信息

2.运用XMLHttpRequest和web服务器进行数据的异步交换

3.运用javascript操作DOM，实现动态局部刷新

4.创建过程

1.创建xhr核心对象

var xhr=new XMLHttpRequest();

2.调用open准备发送

• 参数一：请求方式
• 参数二: 请求地址
• 参数三：true异步，false 同步

xhr.open('post','http://www.baidu.com/api/search',true)

3.如果是post请求，必须设置请求头。

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

4.调用send 发送请求 （如果不需要参数，就写null）

xhr.send('user=tom&age=10&sex=女')

5.监听异步回调 onreadystatechange

• 判断readyState 为4 表示请求完成
• 判断status 状态码 为 200 表示接口请求成功
• responeseText 为相应数据。字符串类型。

  xhr.onreadystatechange=function(){
          if(xhr.readyState==4){ 
            if(xhr.status==200){
              console.log(xhr.responseText);
              var res=JSON.parse(xhr.responseText);
              console.log(res);
              if(res.code==1){
                modal.modal('hide');
                location.reload();
              }
            }
          }

备注：如果是post请求，想要传json格式数据。

设置请求头

xhr.setRequestHeader('Content-Type', 'application/json')

open发送数据

xhr.open({_id:xxx,user:xxxx,age:xxxx})

4.1. HTTP请求

 1. HTTP：超文本传输协议（客户端和服务端内容或数据的传输规则）
 2. HTTPS：更加安全的超文本传输协议
 3. FTP：资源文件传输协议（我们要把文件上传到服务器硬盘中，一般是通过FIP上传的）

4.1.1. 一个完整的HTTP请求过程，通常有下面7个步骤：

1.建立TCP连接

2.web浏览器向web服务器发送请求命令

3.web浏览器发送请求头信息

4.web服务器应答

5.web服务器发送应答头信息

6.web服务器向浏览器发送数据

7.web服务器关闭TCP连接

4.1.2. 一个HTTP请求一般由四个部分组成：

1.HTTP请求的方法或者动作，比如是GET还是POST请求

2.正在请求的URL，需要知道请求的地址是什么

3.请求头，包含一些客户端环境信息，身份验证信息等

4.请求体，也就是请求正文，请求正文中可以包含客户提交的查询字符串信息，表单的信息等

4.1.3. 一个HTTP响应一般由三部分组成：

1.一个数字和文字组成的状态码，用来显示请求是成功还是失败

2.响应头，响应头也和请求头一样包含许多有用的信息，例如服务器类型，日期时间，内容类型和长度等

3.响应体，也就是响应正文

4.1.4. HTTP状态码由3位数字构成，其中首尾数字定义了状态码的类型：

1XX: 信息类，表示收到web浏览器请求，正在进一步的处理中

2XX: 成功，表示用户请求被正确接收，理解和处理例如：200 ok

3XX: 重定向，表示请求没有成功，客户必须采取进一步的措施

4XX: 客户端错误，表示客户端提交的请求有错误，例如：404 NOT

5XX: 服务器端出现错误，表示服务器不能完成对请求的处理：例如 500

4.1.5. HTTP事务

Request+Response  必须请求和响应都要成功，才算一个HTTP事务完成，只要有一个			阶段失败，本次的HTTP请求就是失败的（HTTP事务没有完成）

4.1.6. HTTP报文

起始行 
首部（请求头、响应头） 
主体（请求体）