发表于: 2018-12-23 20:48:23

1 944


今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin) 

了解了http的相关概念:

Http协议:

HTTP--Hyper Text Transfer Protocol,超文本传输协议,是一种建立在TCP上的无状态连接,整个基本的工作流程是客户端发送一个HTTP请求,说明客户端想要访问的资源和请求的动作,服务端收到请求之后,服务端开始处理请求,并根据请求做出相应的动作访问服务器资源,最后通过发送HTTP响应把结果返回给客户端。其中一个请求的开始到一个响应的结束称为事务,当一个事物结束后还会在服务端添加一条日志条目。

流程: 请求--》处理--》返回结果

一、请求:

HTTP请求由状态行、请求头请求正文三部分组成:

状态行:包括请求方式Method、资源路径URL、协议版本Version;

请求头:包括一些访问的域名、用户代理、Cookie等信息;

请求正文:就是HTTP请求的数据。

二、HTTP响应

 服务器收到了客户端发来的HTTP请求后,根据HTTP请求中的动作要求,服务端做出具体的动作,将结果回应给客户端,称为HTTP响应。

HTTP响应由三部分组成:状态行、响应头、响应正文;

状态码:

1xx        表示HTTP请求已经接受,继续处理请求

2xx        表示HTTP请求已经处理完成

3xx        表示把请求访问的URL重定向到其他目录

4xx        表示客户端出现错误

5xx        表示服务端出现错误

200---OK/请求已经正常处理完毕

301---/请求永久重定向

302---/请求临时重定向

304---/请求被重定向到客户端本地缓存

400---/客户端请求存在语法错误

401---/客户端请求没有经过授权

403---/客户端的请求被服务器拒绝,一般为客户端没有访问权限

404---/客户端请求的URL在服务端不存在

405 - 用来访问本页面的 HTTP 谓词不被允许(方法不被允许)

500---/服务端永久错误

503---/服务端发生临时错误

三、Http:报文格式

 

HTTP:超文本传输协议(英文:HyperText Transfer Protocol,缩写:HTTP)是一种用于分布式、协作式和超媒体信息系统的应用层协议。HTTP是万维网的数据通信的基础。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。通过HTTP或者HTTPS协议请求的资源由统一资源标识符(Uniform Resource Identifiers 统一资源定位,URI)来标识。

HTTPS:超文本传输安全协议(英语:Hypertext Transfer Protocol Secure,缩写:HTTPS是一种通过计算机网络进行安全通信的传输协议。

HTTPS经由HTTP进行通信,但利用SSL/TLS来加密数据包HTTPS开发的主要目的,是提供对网站服务器的身份认证,保护交换数据的隐私与完整性。

HTTP -->TCP-->IP

tcp:传输控制协议,

正常情况下, tcp需要经过三次握手建立连接, 四次挥手断开连接.

三次握手

第一次:

客户端 - - > 服务器 此时服务器知道了客户端要建立连接了

第二次:

客户端 < - - 服务器 此时客户端知道服务器收到连接请求了

第三次:

客户端 - - > 服务器 此时服务器知道客户端收到了自己的回应

HTTP Header

HTTP 头包括以下几个部分:通用头、响应头、请求头。其中,请求头和响应头最为重要。

http header 消息通常被分为4个部分:

general  header, request header, response header, entity header

request、response


服务器:存放数据,接收数据请求,回应数据请求。A>B>AA:请求方,B:接收方,服务器)

反向代理服务器:接收数据请求,将请求转发给放数据的服务器(本文下面说的目标服务器),然后目标服务器回应请求给代理服务器,代理服务器再回应给请求方。A>B>C>B>AA:请求方,B:反向代理服务器,C:目标服务器,真正的接收方)

 

 

Ajax入门和发送Http

 

同步和异步的概念

同步:必须等待前面的任务完成,才能继续后面的任务。

异步:不受当前任务的影响。

比如,我们在访问新浪微博时,看到一大半了,点击底部的加载更多,会自动帮我们加载更多的微博,同时页面并没有刷新。

web前端里的异步更新,就要用到 Ajax

 

Ajax 的概念

AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。

Ajax:Asynchronous Javascript And XML(异步 JavaScript 和 XML)。它并不是凭空出现的新技术,而是对于现有技术的结合。Ajax 的核心是 js 对XMLHttpRequest。

 

 发送 Ajax 请求的五个步骤

其实也就是 使用 XMLHttpRequest 对象的五个步骤。

我们先回忆一下,一个完整的HTTP请求需要的是:

请求的网址、请求方法get/post。

 

提交请求的内容数据、请求主体等。

 

接收响应回来的内容。

发送 Ajax 请求的五个步骤:

(1)创建异步对象。即 XMLHttpRequest 对象。

 

(2)使用open方法设置请求的参数。open(method, url, async)。参数解释:请求的       方法、请求的url、是否异步。

 

(3)发送请求。

 

(4)注册事件。 注册onreadystatechange事件,状态改变时就会调用。

如果要在数据完整请求回来的时候才调用,我们需要手动写一些判断的逻辑。

 

(5)获取返回的数据。

Ajax 请求:get 、post

example

 // 绑定点击事件

    document.querySelector('#btnAjax').onclick = function () {

        // 发送ajax 请求 需要 五步

 

        // (1)创建异步对象

        var ajaxObj = new XMLHttpRequest();

 

        // (2)设置请求的参数。包括:请求的方法、请求的url。

        ajaxObj.open('get', '02-ajax.php');

   open(method, url, async);

        // (3)发送请求

        ajaxObj.send();

 

        //(4)注册事件。 onreadystatechange事件,状态改变时就会调用。

        //如果要在数据完整请求回来的时候才调用,我们需要手动写一些判断的逻辑。

        ajaxObj.onreadystatechange = function () {

            // 为了保证 数据 完整返回,我们一般会判断 两个值

            if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {

            // 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的

                // 5.在注册的事件中 获取 返回的 内容 并修改页面的显示

                console.log('数据返回成功');

 

                // 数据是保存在 异步对象的 属性中

                console.log(ajaxObj.responseText);

 

                // 修改页面的显示

                document.querySelector('h1').innerHTML = ajaxObj.responseText;

            }

        }

    }



明天计划的事情:(一定要写非常细致的内容) 
明天继续看ajax的数据传输。

遇到的问题:(遇到什么困难,怎么解决的) 

var xhr = new XMLHttpRequest();
//open()方法 向服务器发送HTTP 请求
//url:文件在服务器上的位置
xhr.open('POST', '/carrots-admin-ajax/a/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(data);
//指定回调函数,监听通信状态(readyState属性)的变化。
xhr.onreadystatechange = function () {
//通讯成功时,状态值为4
if (xhr.readyState == 4) {
if (xhr.readyState == 200) {
console.log(xhr.responseText);
} else {
console.error(xhr.statusText);
}
}
};

这里出现:

但是

我这边传输信息却出现了!==200,具体原因还没弄清楚


收获:(通过今天的学习,学到了什么知识)

了解了ajax的http的状态。


返回列表 返回列表
评论

    分享到