Ajax简单使用与Http协议

允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.

一、AJAX

1、介绍

• JavaScript：更新局部的网页

• XML：一般用于请求数据和响应数据的封装

• XMLHttpRequest对象：发送请求到服务器并获得返回结果（AJAX核心）

• CSS：美化页面样式

• 异步：发送请求后不等返回结果，由回调函数处理结果

AJAX属于异步操作

2、好处：

• 避免网页频繁刷新造成的不良用户体验。

• 减少刷新将会减少服务器的执行压力。

• 此种交互方式提高服务器程序的公用性。

3、异步刷新技术

二、HTTP协议（超文本传输协议）

HTTP是一个基于请求与响应模式的、无状态的、应用层的协议，常基于TCP的连接方式，绝大多数的Web开发，都是构建在HTTP协议之上的Web应用。

1、响应模式

2、主要特点

• 1.支持客户/服务器模式。

• 2.简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单，使得HTTP服务器的程序规模小，因而通信速度很快。

• 3.灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。

• 4.无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。

• 5.无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。

3、请求request

• 1、HTTP请求包结构
  
  http请求由三部分组成，分别是：请求行、请求头部、请求包体(正文)

请求行以一个方法符号开头，以空格分开，后面跟着请求的URI和协议的版本，
格式：Method Request-URL HTTP-Version CRLF

Method：表示请求方法；
Request-URI：表示一个统一资源标识符；
HTTP-Version：表示请求的HTTP协议版本；
CRLF：表示回车和换行（除了作为结尾的CRLF外，不允许出现单独的CR或LF字符）。

• 2、Http请求方式
  方法--------描述
  GET--------请求指定url的数据,请求体为空(例如打开网页)。
  POST-------请求指定url的数据，同时传递参数(在请求体中)。
  HEAD ------类似于get请求，只不过返回的响应体为空，用于获取响应头。
  PUT--------从客户端向服务器传送的数据取代指定的文档的内容。
  DELETE----请求服务器删除指定的页面。
  CONNECT---HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
  OPTIONS---允许客户端查看服务器的性能。
  TRACE------回显服务器收到的请求，主要用于测试或诊断。
  常用只有Post与Get

4、响应response

• 1、HTTP响应包结构
  
  HTTP响应也是由三个部分组成，分别是：状态行、消息报头、响应正文

格式：HTTP-Version Status-Code Reason-Phrase CRLF
HTTP-Version：表示服务器HTTP协议的版本；
Status-Code：表示服务器发回的响应状态代码；
Reason-Phrase：表示状态代码的文本描述。

• 2、响应状态码

状态代码有三位数字组成，第一个数字定义了响应的类别，且有五种可能取值：
1xx：指示信息--表示请求已接收，继续处理
2xx：成功--表示请求已被成功接收、理解、接受
3xx：重定向--要完成请求必须进行更进一步的操作
4xx：客户端错误--请求有语法错误或请求无法实现
5xx：服务器端错误--服务器未能实现合法的请求

常见状态代码 --状态描述--说明：

• 200 OK //客户端请求成功
• 400 Bad Request //客户端请求有语法错误，不能被服务器所理解
• 401 Unauthorized //请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用
• 403 Forbidden //服务器收到请求，但是拒绝提供服务
• 404 Not Found //请求资源不存在，eg：输入了错误的URL
• 405 //方法不被允许
• 500 Internal Server Error //服务器发生不可预期的错误
• 503 Server Unavailable //服务器当前不能处理客户端的请求，一段时间后,可能恢复正常

三、使用Ajax

1、XMLHttpRequest

XHR对象：是XMLHttpRequest对象的缩写，封装在window对象中，封装了发送AJAX请求、接收响应的属性以及方法。JavaScript对象XMLHttpRequest是整个Ajax技术的核心，它提供了异步发送请求的能力

1、XHR对象的创建：

如果XMLHttpRequest对象存在，则把 xhr 的值设为该对象的新实例。如果不存在，就去检测 ActiveObject 的实例是否存在，如果答案是肯定的，则把微软 XMLHTTP 的新实例赋给 xhr

2、常用方法

3、常用属性

• setRequestHeader(header,value):设定响应头，响应头用于描述元数据。
  --header： 响应头的名字;
  如果用 POST 请求向服务器发送数据，需要将 “Content-type” 的首部设置为 “application/x-www-form-urlencoded”.它会告知服务器正在发送数据，并且数据已经符合URL编码了
  --value：响应头的值
  注意事项：该方法必须在open()之后才能调用
• onreadystatechange：指定回调函数
• readystate: XMLHttpRequest的状态信息

• status：HTTP的状态码（200对应OK，404对应NotFount等）

• statusText：HTTP状态码的相应文本（OK或NotFount等）
• responseText：获得响应的文本内容，表示一个字符串
• responseXML：获得响应的XML文档对象，可以解析为DOM对象

就绪状态是4而且状态码是200，才可以处理服务器数据

四、示例

 <h2>AJAX请求数据</h2>
    <div>
        <p id="title"></p>
        <i id="content"></i>
    </div>

   // 1、创建XMLHttpRequest对象
    const xhr = new window.XMLHttpRequest;
    //2、建立连接 open(请求方式，url地址，是否异步);
    xhr.open('GET', 'http://192.168.0.100:8089/api/list', true);
    // 3、发送请求 send()
    xhr.send();
    // 4、接收响应
    xhr.onreadystatechange = e => {
        // 判断ajax响应状态
        if (e.target.readyState == 4) {//readyState=4：响应的内容解析完毕，可以在客户端使用了--完成
            // 判断是否响应成功
            if (e.target.//xhr.status:获取当前服务器的响应状态  200=>成功
                status == 200) {
                const pElment = document.getElementById('title');
                pElment.innerHTML = e.target.responseText;
            } else {//请求出错将状态码显示出来
                const iEmlent = document.getElementById('content');
                iEmlent.innerHTML = e.target.status;
            }
        }
    }

得到服务器JSON对象：

五、封装调用

• 封装js

let XMLHttpPromiseObj = (method, url, parmas) => {
    return new Promise((resovled, rejected) => {
        // 1、创建XMLHttpRequest对象
        const xhr = new window.XMLHttpRequest;
        //2、建立连接 open(请求方式，url地址，是否异步);        
        xhr.open(method, url, true);
        // 如果想要使用post提交数据,必须添加此行
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        // 3、发送请求 send()
        xhr.send(parmas);
        // 4、接收响应
        xhr.onreadystatechange = e => {
            // 判断ajax响应状态
            if (e.target.readyState == 4) {//readyState=4：响应的内容解析完毕，可以在客户端使用了--完成
                // 判断是否响应成功
                if (e.target.status == 200) {//xhr.status:获取当前服务器的响应状态  200=>成功
                    let data = e.target.responseText //返回成功的值
                    resovled(data);
                } else {
                    let err = e.target.status //返回失败的响应码
                    rejected(`请求错误：${err}`);
                }
            }
        }
    });
}

• 使用js

<script src="./AjaxModel.js"></script>//引入js文件
<script>
    const contentElment = document.getElementById('content');
    const name = 'admin';
    const passwd = '123';
    const content = `username=${name}&password=${passwd}`;
    //直接使用js的方法
    const xmlObjPromise = XMLHttpPromiseObj('post', 'http://192.168.0.100:8089/api/login', content);
    xmlObjPromise.then(data => {
        contentElment.innerHTML = data;
    }).catch(err => {
        contentElment.innerHTML = err;
    })
</script>

六、工具推荐

• JSONview ：使在谷歌浏览器中访问URL地址返回的json数据按照json格式展现出来。
• Postman：网页调试与发送网页HTTP请求的Chrome插件。（调试接口是否能正常使用）
• Fiddler：网络传输发送与接受的数据包进行截获、重发、编辑、转存等操作。（抓包工具，可以查看请求和响应的内容信息等）