继续jQuery

jQuery第二天

TCP/IP协议 三次握手四次挥手

TCP/IP协议不仅仅指的是TCP 和IP两个协议，而是指一个由FTP、SMTP、TCP、UDP、IP等协议构成的协议簇， 只是因为在TCP/IP协议中TCP协议和IP协议最具代表性，所以被称为TCP/IP协议。

http协议是基于TCP/IP协议的，TCP/IP协议是一个可靠的传输协议。

浏览器(客户端)和服务器建立连接的时候，发生三次握手

浏览器(客户端)和服务器断开连接的时候，发生四次挥手

http请求request报文格式

1. 请求行
   • HTTP 请求的类型——get post
     • GET 数据获取
     • POST 实现功能
     • 后端决定
   • 请求资源的路径——请求url
   • HTTP 协议版本——1.0 1.1
2. 请求头
   • [头名: 头值]
   • 键值对
3. 空行
   • 分割符"\r\n"
4. 请求体
   • 浏览器发送给服务器的数据
   • post才有请求体
   • get的请求参数在url上

常见的请求头：

• Accept：浏览器可以接受的数据类型。
• Accept-Encoding：浏览器支持解码的数据压缩格式 如：gzip。
• Accept-Language：浏览器的语言环境。
• Cache-Control：缓存控制命令
• Host：请求的主机名，允许多个域名同处一个 IP 地址，即虚拟主机。
• Connection：表示是否需要持久连接。如 Keep-Alive。
• Content-Length：表示请求体的长度。
• Content-Type：浏览器告诉 WEB 服务器请求数据的类型和字符集。
  • MIME 描述消息内容类型的因特网标准
    • text/html 超文本
    • text/plain 普通文本
    • text/xml XML格式
    • application/x-www-form-urlencoded 浏览器默认
    • application/json 来告诉服务端消息主体是序列化后的 JSON 字符串
    • multipart/from-data 表单上传文件时
  • charset:utf-8;
• Cookie：浏览器每次都会将 cookie 发送到服务器上，允许服务器在客户端存储少量数据。
• Referer：包含一个 URL，用户从该 URL 代表的页面出发访问当前请求的页面。服务器能知道你是从哪个页面过来的。
• User-Agent：用户代理：浏览器相关信息，客户机相关信息。

http响应response报文格式

1. 响应行
   • 协议版本
   • HTTP状态码
     • HTTP/1.1 中定义了 5 类状态码。状态码由三位数字组成，第一个数字定义了响应的类别
       • 1XX 提示信息 - 表示请求进行中。
       • 2XX 成功 - 表示请求已被成功接收。
       • 3XX 重定向 - 要完成请求必须进行更进一步的处理。
       • 4XX 客户端错误 - 请求有语法错误或请求无法实现。
       • 5XX 服务器端错误 - 服务器未能实现合法的请求。
   • 状态说明
2. 响应头
   • [头名: 头值]
   • 键值对
3. 空行
   • “\r\n”
4. 响应体
   • 返回给客户端的具体数据
     • html文本
     • 资源数据

常见响应头：

Server：服务器软件的信息和版本。

Accept-Ranges：服务器表明是否接受获取其某个实体的一部分的请求。

Cache-Control：缓存控制命令

Date：服务器回复响应报文的时间 – 格林威治时间

Content-Type：返回的响应体的数据类型。text/html text/plain application/json

Allow：服务器支持哪些请求方法（如 GET、POST 等）。

Content-Base：解析主体中的相对 URL 时使用的基础 URL。

Content-Encoding：对响应体数据采用的压缩方式。

Content-Language：告诉浏览器理解主体时最适宜使用的自然语言。

Content-Length：表明响应体的大小，例如 26012。

Content-Location：资源实际所处的位置。

Content-MD5：主体的 MD5 校验和。

Content-Range：表示传送的范围。

Expires：过期相关信息。

Last-Modified：WEB服务器认为对象的最后修改时间。

Connection：keep-alive不关闭TCP连接，长连接

AJAX技术简介

基本概念

• AJAX 即 “Asynchronous JavaScript and XML”（异步的 JavaScript 与 XML 技术），指的是一套综合了多项技术的浏览器端网页开发技术。AJAX 的概念由 Jesse James Garrett 所提出，说白了就可以使用 JavaScript 代码发送网络请求并处理响应，由浏览器实现。
• 出现的很早1998年出来，首次是微软提出来的，并没有引起重视；直到2005年左右，谷歌推出 gmail，gmap使得ajax技术一时间流行起来。

定义：ajax技术就是在页面不刷新情况下，和服务器端进行交互的技术。

• 传统的 Web 应用允许用户端填写表单（form），当提交表单时就向网页服务器发送一个请求。服务器接收并处理传来的表单，然后送回一个新的网页，但这个做法浪费了许多带宽，因为在前后两个页面中的大部分 HTML 码往往是相同的。由于每次应用的沟通都需要向服务器发送请求，应用的回应时间依赖于服务器的回应时间。这导致了用户界面的回应比本机应用慢得多。

• 与此不同，AJAX 应用可以仅向服务器发送并取回必须的数据，并在客户端采用 JavaScript 处理来自服务器的回应。因为在服务器和浏览器之间交换的数据大量减少，服务器回应更快了。同时，很多的处理工作可以在发出请求的客户端机器上完成，因此 Web 服务器的负荷也减少了。

所以ajax特点是：异步请求，局部刷新。

1. 这里的同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。

2. 这里的异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。

3. 这里局部刷新是指：刷新页面部分内容。

优缺点：

优点：Web 应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变的信息，减轻服务器压力。

缺点：浏览器实现之间有差异处理兼容性问题；不能回退和前进,默认不支持跨域访问

两个域名--------协议,域名,端口但凡有一个不一样, 都不符合同源策略---------------两个不同源域名相互访问会发生跨域

注意事项：

ajax ，必须要在网络协议环境下才可以使用。不能把网页直接拖入到浏览器执行，必须在 web 服务器模式下访问。

jQuery 中 ajax 使用

基本语法

jQuery 中发送ajax的方法：

// 方法一：什么请求都可以发送
$.ajax(url,{[settings]});
// 方式二：只能发送get请求
$.get(url, [data], [callback])
// 方式二：只能发送post请求
$.post(url, [data], [callback])

3.3.2、$.ajax的使用

settings参数的可选项：

• async：默认设置下，所有请求均为异步请求（true）。

• contentType：发送信息至服务器时内容编码类型，默认为 “application/x-www-form-urlencoded”。

• data：发送到服务器的数据，可以为对象或者 Key=value 格式字符串，若为对象则会自动转换为请求字符串格式。

• type：请求方式 (“POST” 或 “GET”)， 默认为 “GET”。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

• url：发送请求的地址，默认当前页地址。

• dataType：预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME类型就被识别为 XML，可以不填，可用值：“xml”、“html”、“script”、“json”、“jsonp”、“text”。

• cache：默认为 true（dataType 为 script 和 jsonp 时默认为 false，设置为 false 将禁用缓存）。

• context：这个对象用于设置 AJAX 相关回调函数的上下文。也就是说，让回调函数内 this 的指向（若不指定为当前选项）。

• beforeSend：发送请求前调用此函数，可用与如添加自定义 HTTP 头，检查请求参数是否合法。XMLHttpRequest 对象是唯一的参数。若在函数中返回 false 可以取消本次请求。

• success：请求成功后的回调函数，参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。

function (data, textStatus) {
    // data 可能是 xmlDoc, jsonObj, html, text, 等等
    // textStatus 描述状态的字符串
}

• error：请求失败时调用此函数。有以下三个参数：XMLHttpRequest 对象、错误信息、捕获的异常对象。

function (XMLHttpRequest, textStatus, errorThrown) {
  	// 通常 textStatus 和 errorThrown 之中
    // 只有一个会包含信息
}

例：

$.ajax({
    url: 'url',
    type: 'GET',
    data: {username:'张三', password:'123456'},
    success: function(data){
        // 请求成功继续往下写
    }
});

发送GET请求

使用.ajax()方法发送get请求：

$('button').click(function(){
  $.ajax({
    type: "GET",
    url: "地址",
    success: function(res){
      console.log(res);
    }
  })
})

使用.get()方法发送get请求：

$.get()方法接收四个参数：

• url：请求 URL 地址
• data：请求参数。
• callback：请求成功时回调函数。
• type：预期服务器返回的数据类型。

$('button').click(function(){
	$.get("地址",
          function (res) {
            console.log(res)
          })
})

发送POST请求

使用.ajax()方法发送post请求：

$('button').click(function(){
  $.ajax({
    url: "地址",
    type: "POST",
    data: {
      username: $('username').val(),
      password: $("password").val()
    },
    success: function(res){
      console.log(res)
    }
  })
})

使用.post()方法发送post请求：

$.post()方法同样接收四个参数：

• url：请求 URL 地址
• data：请求参数。
• callback：请求成功时回调函数。
• type：预期服务器返回的数据类型。

$('button').click(function(){
  $.post('接口地址', {
    username: $('username').val(),
    password: $("password").val()
  }, function(res){
    console.log(res)
  })
})