Ajax 入门要领（Asynchronous Javascript And XML）——阿贾克斯

一、HTTP协议

1、作用

 规范了数据是如何打包的，以及数据时如何传递的

2、Message 消息/提交

  Message指的是在HTTP客户端与服务器间传递的数据块
  分类：
    1、Request Message：客户端向服务器发送的请求消息
    2、Request Message：服务器端根据客户端的请求消息，返回给客户端的响应消息

3、请求消息(Request Message)

1. 1、请求起始行

请求方法

      1.GET
        表示客户端向获取服务器上的资源(img/js/…)
         特点： 1.无请求主体
                2.依靠地址栏传递数据给服务器
      2.POST
        表示客户端向传递数据给服务器
        特点：  有请求主体
      3.PUT
        表示客户端想把文件放到服务器上（禁用）
        特点：  有请求主体
      4.DELETE
        表示客户端想要删除服务器上指定的文件（禁用）
      5.HEAD
        表示指向获取指定的响应头
      6.CONNECT
        测试连接
      7.TRACE
        追踪请示路径
      8.OPTIONS
        选项，保留以后使用…...
    2.请求URL
    3.协议 和 版本号

请求头

1.Host：localhost
告诉服务器请求哪一个虚拟主机
2.Connection
告诉服务器做持久连接
3.Uer-Agent
告诉浏览器，客户端浏览器的类型
4.Cache – Control：max-age=0
告诉服务器缓存信息：zh –CN
5.Accept-Language
告诉服务器自己能接收的自然语言
6.Accept-Encoding：gzip
告诉服务器自己可以接收的压缩类型
7.Referer：URL
告诉服务器请求来自于哪个页面
请求主体
```
Form Data：  是真正的请求主体
```
注意：：查询字符串
Query String：不算做请求主体的，是属于URL中的一部分

4、响应消息(Response Message)

1、响应起始行

协议版本号

http / 1.1
响应状态码

1、 1XX：提示信息
2、 2XX
200：服务器端成功响应所有的信息 ok
3、 3XX：需要客户端进行重定向
301：永久性重定向
302：临时重定向
304：Not Modified
4、 4XX ：客户端请求错误
404：Not Found ，请求资源不存在
406：Forbidden ，没有访问权限
405：Method Not Allowed 请求方式不被允许
5、 5XX ：服务器运行错误
500：服务器内部错误
501：没有实现
原因短句：对状态码的简单解释
```
200：OK
400：Not Found
```

2、响应消息头

Content-Type：text/html；charset-utf-8

响应的主体类型，告诉浏览器，响应的数据是什么格式以及什么类型的
取值：
1、text/plain
纯文本，告诉浏览器按纯文本的方式去解析
2、text/html
文本与网页，告诉浏览器按照html的格式解析内容
3、text/css
样式，告诉浏览器按CSS的方式解析
4、application/javascript
JS代码片段，按JS的方式运行数据
```
    按xml的方式解析
   6、application/json
    按json的方式解析
```

3、响应主体 : 由服务器端响应回来的数据

二、缓存

1、缓存的工作原理

 客户端可以自动保存已访问过的文档的副本，这些副本就是所谓的缓存。

 当客户端在向统一URL发送请求时，那么就直接从缓存照片那个将文件取出来，而不用再重新发送请求。

2、优点

 1、减少了冗余的数据传输，节省流量
 2、缓解服务器带宽瓶颈的问题，服务器可以节省更多的带宽
 3、降低了对服务器的资源消耗和运行要求
 4、降低了由于远距离而造成的加载延迟

3、与缓存相关的消息头

 1、Cache – Control

作用：从服务器将文档传来之时起，认为新鲜的秒数
取值：秒数 60/3600……
如果取值为0/no-cache，则表示每次都要重新刷新网页
2、Expires
作用：明确指定缓存的过期时间
取值：格林尼治标准时间(GMT)
Expires： Fri ,25 Aug 2017, 08:00:00 GMT
Expires： 0 表示不需要缓存

4、如何在网页中设置消息头？

  在meta标记中完成消息头的设定
  1、http-equiv：指定消息头的名称
  2、content：指定消息头对应的内容
   <head>
    <meta charset="UTF-8">
    <meta http-equiv="Cntent-Type" content="text/html">

三、DOM操作

DOM：Document Object Model 文档对象模型
  让JS有能力操作页面的元素
  <div>Hello World<div>

1、使用JS获取页面上的某个元素

   1、为元素增加ID属性
       <div id="d1">Hello World<div>
   2、在JS中，允许通过元素的ID获取页面元素
      var elem= document.getElementById("元素ID");

      elem就是指定ID值的元素在JS中的表现形式

2、修改/获取标记内的内容

     属性：innerHTML
       赋值：为某元素的innerHTML属性赋值
       取值：获取某元素的innerHTML属性
       ex：
        elem.innerHTML =" 你好中国" ;
        console.log(elem.innerHTML) ;

3、获取/设置表单控件的数据

      <input type="text/password" value="">
     在DOM中，文本框、密码框……也都是通过value属性来获取或设置控件的值
      步骤1：
          1、获取页面表单控件元素（通过ID获取）；
          2、通过元素的value属性 获取/设置 控件的值 
     练习
         1、在页面创建一个文本框，一个div，一个按钮
         2、点击按钮时，将文本框中的数据，以一级标题的形式显示在div中

4、简化document.getElementById()

      document.getElementById的作用：
       根据“指定的ID值”，获取对应的“HTML元素”
      /**
       * 根据指定的ID值，获取队形的HTML元素
       * 参数id：要获取的元素的ID值
       * 返回值：获取的对应的HTML元素
       */
     function $(id){

return document.getElementById(id);
}

5、HTML元素的事件

        事件：在某些特殊的情况下，可以被激发的一个操作
        常用事件： onclick…
         1、文本框 和 密码框的事件 — onblur
         onblur事件：  鼠标失去焦点时的事件
         2、文本框 和 密码框的事件 — onfocus
         onfocus事件：获取焦点时要执行的操作
         3、 <body> 的事件 –onload
           在网页加载的时候，要指定的操作，可以封装在onload中。

aimmeng

发布了8 篇原创文章 · 获赞 4 · 访问量 379

私信关注

Ajax 入门要领 （Asynchronous Javascript And XML）——阿贾克斯