Ajax简单使用与Http协议

作者: 1CC4 | 来源:发表于2019-12-25 20:10 被阅读0次

允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做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：网络传输发送与接受的数据包进行截获、重发、编辑、转存等操作。（抓包工具，可以查看请求和响应的内容信息等）

网友评论

本文标题：Ajax简单使用与Http协议

本文链接：https://www.haomeiwen.com/subject/lewcoctx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！