HTTP_DOM_Ajax_JSON_XML

一：HTTP协议

1. URL

结构：协议+主机名称+目录结构+文件名称 URL完整结构：   <scheme>://<user>:<pwd>@<host>:<port>/<path>;<params>?<query>#<frag>   1.scheme：方案，协议。设置以哪种方式获取服务器资源， 协议不区分大小写，常用协议http、ftp，DNS，   2.<user>:<pwd>: 用户名，密码。此种写法已过时。 3.<host>主机名称，localhost、127.0.0.1、域名/ip 4.<port>：端口号 5.<path>  路径，资源在服务器上具体存放的位置 6.<params>  参数，在服务器上跟踪状态的参数session/cookie 7.<query>  get方法请求时提交的查询字符串 8.#<frage> 锚点

2. HTTp协议

HTTP：Hyper Text Transfer Protocal  超文本传输协议 ————规范了数据是如何打包以及传递的（专门用于传输html文件的协议，专门浏览网页的协议） HTTP协议的历史：

3. web请求原理详解

4. 消息/报文 Message

1.请求消息 Request Message （请求起使行，请求头，请求主体）

2.响应消息 Response Message （响应起使行，响应头，响应主体）

5. Request Message

  请求消息，客户端发送给服务器的数据块

 由三部分组成，请求起使行，请求头，请求主体

1.请求起使行：（请求方法，请求协议，请求URL）

（1）请求方法 get：明文提交，不安全，有大小限制 2kb   客户端向服务器要数据的时候使用get，   靠地址栏传递查询字符串的方式传递参数，无请求主体 post：隐式提交，无大小限制   客户端要传递数据给服务器的时候使用   有请求主体（Form Data），靠请求主体传递数据 delete：客户端要删除服务器上的内容（一般禁用） put：客户端往服务器上放文件内容（一般禁用） connect：测试连接连接       trace：追踪请求路径 option：预请求      head：表示客户端只获取响应消息头

（2）协议版本号          HTTP/1.1

（3）请求的URL

2.请求头

（1）Host：www.tmooc.cn  告诉服务器请求的是哪一个主机 （2）connection：keep-alive 告诉服务器开启持久连接 （3）User-Agent：告诉服务器，浏览器的类型和浏览器的版本号 （4）Accept-Encoding：gzip  告诉服务器，浏览器能够接收的文件压缩格式 （5）Accept-Langeuage：zh-CN  告诉服务器，浏览器能够接收的自然语言的类型 （6）Referer 引用/推荐人  告诉服务器当前请求来自于哪个网页

3.请求主体

form data （post）   get请求没有请求主体，post有请求主体

6. Response Message

 响应消息，服务器发送给客户端的数据块

  由三部分组成：响应起使行，响应头，响应主体

1.响应起使行

（1）协议版本号  HTTP/1.1

（2）响应状态码    告诉浏览器，服务器的响应状态是什么   1xx   正在请求，提示信息   2xx   200 响应成功   3xx   重定向    301  永久重定向     302  临时重定向                                         304  同一个请求没有任何变化，命中缓存   4xx   404 请求资源不存在  403 权限不够  405  请求方法不被允许   5xx   500 服务器代码错误

（3）原因短句（对响应状态码的简短解释）  200 ok

2.响应头

（1）Data：Sun, 05 May 2019 07:39:24 GMT  告诉浏览器服务器响应的时间，格林威治时间 （2）Connction：keep-alive 告诉浏览器，服务器已经开启了持久连接 （3）Content-type：text/html 告诉浏览器，响应主体的类型 text/html 响应回来的数据是html文本 text/css  响应回来的数据是css文本 text/plain  响应回来的数据是普通文本 image/jpg、gif、png 响应回来的数据是图片 application/javascript  响应回来的数据是js文本 application/json  响应回来的数据是json字符串 application/xml  响应回来的数据是xml的字符串

3.响应主体

响应主体，服务器真正传递给浏览器的数据

7. 缓存

客户端经服务器响应回来的数据进行自动保存，当再次访问的时候，直接使用保存的数据

（1）缓存的优点：   1.减少冗余的数据传输，，节省客户端流量   2.节省服务器带宽   3.降低了对服务器资源的消耗和运行的要求   4.降低了由于远距离传输二造成加载延迟

（2）缓存的新鲜度和过期 1.请求—无缓存—连接服务器—存缓存—客户端得到 2.请求—有缓存—够新鲜—使用缓存—客户端得到 3请求—有缓存—不新鲜—连接服务器确认是否过期—没过期—更新缓存的新鲜度—客户端得到 4.请求—有缓存—不新鲜—连接服务器确认是否过期—已过期—连接服务器—存缓存—客户端得到

（3）与缓存相关的消息头          Cache-Control：max-age=0  从服务器将响应传到客户端之时起，此数据处于新鲜的秒数，这是一个相对时间   语法：Cache-Control：max-age=秒数

（4）在网页中添加缓存，需要修改消息头          <meta http-equiv="消息头属性" content="值">          <meta http-equiv="Cache-Control" content="max-age=3600">

8.HTTP性能优化

1. HTTP的连接过程

发起请求-->建立连接-->服务器处理请求-->访问资源-->构建响应-->发送响应-->记录日志

2.HTTP连接性能优化

（1）减少连接的创建次数（开启持久连接） （2）减少请求的次数（整合代码，不要让文件过多） （3）提高服务器端运行速度 （4）尽可能减少响应数据的长度

9.安全的HTTP协议—— HTTPS

HTTPS：安全版本的http协议

SSL：为数据通信提供安全支持

1.客户端发送请求--->ssl层加密--->服务器接收到加密文件--->ssl层解密，得到明文

2.服务器端发送响应--->ssl层加密--->客户端得到加密文件--->ssl层解密，得到响应内容

二：DOM 操作（简单dom操作）

         Ajax提交请求不需要使用form表单，但是form表单自带收集数据的功能，不使用form标签，就没有自动收集数据的功能了，我们需要自己手敲代码，收集数据，使用dom技术

1.完整的javascript的组成

         （1）js核心，ECMA Script 6

         （2）Dom：Document Object Model 文档对象模型

         （3）Bom：Browser Object Model 浏览器对象模型

2.使用js的DOM获取页面某个元素

（1）获取元素对象

var elem=document.getElementById("id");

（2）通过对象，获取元素的内容/值

双标签中间的东西叫内容，单标签value的值叫值

获取内容使用dom对象的innerHTML属性          获取：var str=elem.innerHTML;          设置：elem.innerHTML=“*****”;

获取值，使用dom对象的value属性

（3）使用dom操作的进阶

  1.获取对象的方案进阶

         （1）.不使用id就能获取对象（后期xml中使用）

var elem=document.getElementsByTagName("div")[1];

 注意：通过标签名称获取当前页面中所有的改标签的元素，通过下标获取其中某一个元素

         （2）.使用id获取对象的简写方式，ES6支持的写法

var res=“id”.innerHTML;

  2.innerHTML的进阶 

innerHTML 可以改变html页面的结构                    <div id="d2">                             <a href="">123</a>                    </div>                    <script>                             console.log(d2.innerHTML);                             d2.innerHTML+="<h1>哈哈哈哈</h1>";                    </script>

（4）事件
         通过用户的行为来激发的操作，就是事件，用户发生一个行为，这个行为绑定的方法就会被调用

 button的事件    onclick单击事件

文本框和密码框   onblur 焦点移除事件   onfocus  获取焦点事件

body标签的事件   onload 页面加载完成，马上调用js方法

三：Ajax

1.同步——Synchronous

         在一个任务进行的过程中，不能开启其它任务

        同步访问：浏览器在向服务器发送请求时，浏览器只能等待服务器响应，不能做其他事

         同步访问出现场合：1.地址栏输入url         2.a标签跳转          3.form提交

2.异步 ——Asynchronous

         在一个任务开启时，可以进行其它任务

         异步访问：浏览器在向服务器发送请求时，用户可以在页面上做其它的操作

         异步访问出现场合：1.用户名重复验证  2.聊天室   3.百度搜索建议  4.股票走势图

3.什么是Ajax

         Asynchronous JavaScript And XML  异步的 js 和 xml

         本质：使用js提供的异步对象，异步的向服务器发送请求，并接受响应回来的数据

         异步对象：XMLHttpRequest

4.使用Ajax

         （1）创建异步对象

         （2）创建请求

         （3）发送请求

         （4）接收响应数据

（1）创建异步对象 var xhr=new XMLHttpRequest();        此创建方式不兼容IE8以下的版本       了解如何兼容IE8以下的浏览器   //如何兼容IE8以下的浏览器 if(window.XMLHttpRequest){          //如果有这个属性，是IE8以上的浏览器          var xhr=new XMLHttpRequest(); }else{          //如果没有这个属性，是IE8以下的浏览器          var xhr=new ActiveXobject("microsoft.XMLHttp"); } （2）创建请求 xhr.open(method,url,isAsycn); xhr.open("get","http://127.0.0.1:8080/login",true)          method: string 类型，请求的方法。比如：get          url：string类型，请求的url。比如：http://127.0.0.1:8080/login          isAsyn：boolean类型，是否用异步访问的方法去访问服务器 （3）发送请求 xhr.send(formdata); 注意: 只有post请求，才有请求主体formdata           get方法不需要请求主体 所以get请求的时候，有两种发送请求的写法：xhr.send()或者xhr.send(null) （4）接收响应数据 1. xhr.readyState属性   用于表示xhr对象的请求状态  （5个状态）          0：请求尚未初始化          1：已经打开连接，请求正在发送中          2：接收响应头          3：接收响应主体          4：接收响应数据成功 2.xhr.onreadystatechange 监听   监听xhr.readyState的值变化，每改变一次，方法调用一次，一共会调用4次 注意：只有当xhr.readyState=4的时候，是我们要接收响应正确时刻 3. xhr.status  响应状态码   只有响应状态码为200的，我们猜接收 4. 响应数据放在了 xhr.responseText属性中 xhr.onreadystatechange=function(){  //接收响应数据，开启监听   if(xhr.readyState==4&&xhr.status==200){  //响应状态为4，状态码为200        var result=xhr.responseText;  //接收服务器的响应内容     console.log(result);   } }   注意： 1.服务器中的get接口，可以使用浏览器地址栏去验证。

5.带参数的get请求

使用get提交时，发送带参数的请求（dom）

  xhr.open("get","url?uname=...&upwd=...",true);

6. post 请求

 使用post方法发送请求

         （1）xhr.open,需要修改成post方法

         （2）xhr.open中的url，不需要 ? 和参数（url不传递参数，参数在主体中）

         （3）添加创建主体的代码，把数据放到请求主体中

         （4）修改请求消息头，是之能够发送特殊符号（放在open之后，send之前）

         （5）xhr.send(formdata);发送请求主体

var xhr=new XMLHttpRequest();          xhr.onreadystatechange=function(){                    if(xhr.readyState==4&&xhr.status==200){                             var result=xhr.responseText;                             console.log(result);                    }          }                                    //post 发送请求  请求主体传递参数formdata          var url="http://127.0.0.1:8080/ajax/login_post";          xhr.open("post",url,true);                 //创建请求主体 formdata                                var formdata="uname="+u_uname+"&upwd="+u_upwd;          //由于ajax默认传输的是text/plain，无法传输特殊符号，          //因此更改消息头， 让ajax请求可以传输特殊符号          xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");          xhr.send(formdata);          }

四：JSON解析

  前台，ajax内部，xhr.responseText得到数据，是string类型，string中放的是js对象组成的数组

1.js对象的数据格式

var obj={ name:"abx",age:18}; 语法：var 对象名称={ 属性1：值1,属性2:值}     js对象中，属性名没有单双引号

2.JSON的数据格式

         json是一个string字符串，称之为json串

  JavaScript object Notation：  js 对象 表示法 ——> 以js对象的格式表示出来的字符串

3.json字符串的格式

         （1）用一对{}表示一个对象

         （2）json中对象的属性名，必须使用""引起来（可以用单引号，不推荐，推建议用双引号）

         （3）属性的值如果是字符串，也要带双引号""

         （4）json的表现是一个字符串，所以在最外层加引号，推荐使用单引号

                            '{"name":"tom","age":18,"gender":"男"}'

         （5）请求访问服务器，调用数据库代码，得到的结果默认是一个json串

4.json串解析

         json串，转换为对象数组

  var arr=JSON.parse(result);    

五：XML解析

1.什么是XML

         eXtensible Markup Language  可扩展  标记  语言

  是html的一个变种，专门负责承载数据用的

  xml中的标签，关键字/属性都是自定义

语法： 1.第一行写版本声明          <?xml version="1.0" encoding="utf-8"?> 2.xml的标记只有双标记，必须成对出现 3.xml的标签严格区分大小写，开始标签和结束标记必须一致 4.xml标记，允许嵌套，但是要注意嵌套顺序 5.每个xml文档只有一个根元素

2.xml解析

使用dom解析  ??.getElementsByTagName(""); （1）使用var result=xhr.responseXML;获取，不能使用xhr.responseText;否者xml不能解析 （2）