jQuery

jQuery

入口函数

// 原生JS写法：
window.onload = function(){...}
  
// jQuery写法一：
jQuery(document).ready(function(){...})

console.log(jQuery===$);//说明$就是jQuery对象的简写
                                  
// jQuery写法二：
$(document).ready(function(){...})

// jQuery写法三：
$().ready(function(){...})

// jQuery写法四*重点*：
$(function(){...})

事件绑定

语法：

$(selector).事件(function(){...});
$(selector).on(事件, function(){...});

显示、隐藏与切换

$(selector).show(time); // 显示， time表示动画时长，单位为毫秒，下同
$(selector).hide(time); // 隐藏
$(selector).toggle(time); // 切换
//注意：凡是函数都要加 括号，函数就是所谓的方法，方法就是函数！

JQ中访问和修改文本

语法：

$(selector).html();	 // 获取与修改选择器中的html内容
			举例：$('div').html('<p>我是p标签</p>');

$(selector).text();	 // 获取与修改选择器中的文本内容
			举例：$('div').text('我是div标签');

jQuery对象和DOM对象相互转换

不同对象之间是不能使用对方的方法的。也就是说JS的对象只能JS调用，如果JQ想要用的话，就必须进行对象转换。比如：this<------>$(this)

$("div").click(function(){
	$(this).html("文本内容")
})

JS转JQ对象：

// 使用$()包裹起来就可以用转成成JQ对象
document.getElementsByTagName(element)    
==>   
$( document.getElementsByTagName(element) )

JQ转JS对象：

// 方法一：
$(element).get(0)  ==> document.getElementsByTagName(element)
// 方法二：
$(element)[0]  ==> document.getElementsByTagName(element)

css样式修改

语法：

$(selector).css()  

css本身也是一个函数，其中的格式有两种：

第一种为单属性修改：
$(selector).css('key', 'value');    //只能修改一个属性和一个属性值

第二种为多属性修改：
$(selector).css({
  'key': 'value',
  'key': 'value'
   ....
})                      //可以多属性修改，理论上可以修改无限多个属性

访问某个元素的css属性，可以直接这么写：$(selector).css(k);

console.log( $('div').css('width') );     //这段代码可以获取div的宽度

标签属性的修改

修改属性的两个方法

$(element).attr(“k”,”v”);
$(element).prop(“k”,”v”);

prop和attr的区别

• 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

  ​ 操作原生表单属性

• 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

  ​ 自定义属性使用

jQuery常用选择器

基础选择器

基本选择器	语法	功能
ID选择器	$(’#ID’)	找到匹配指定ID的元素
元素(标签)选择器	$(‘element’)	找到指定的元素
class选择器	$(’.class’)	找到匹配指定class的元素
通配符选择器	$(’*’)	匹配所有元素
并集(组合)选择器	$(‘sel,sel’)	多个选择器匹配的元素合并

层级选择器	语法	功能
后代选择器	$(‘parent child’)	当前元素的所有后代元素
直接后代选择器	$(‘parent>child’)	当前元素所有的子元素
下一个兄弟	$(‘prev+next’)	当前元素的下一个元素
后面所有兄弟	$(‘prev~siblings’)	当前元素后面的所有兄弟元素

筛选选择器

基本筛选选择器	语法
获取第一个元素	$(‘ele:first’)
获取最后一个元素	$(‘ele:last’)
获取指定索引的元素	$(‘ele:eq(index)’) 方法eq(index)
获取所有元素除某个	$(‘ele:not(selector)’)
获取索引为偶数的元素	$(‘ele:even’)
获取索引为奇数的元素	$(‘ele:odd’)
获取大于该索引元素	$(‘ele:gt(index)’)
获取小于于该索引元素	$(‘ele:lt(index)’)
获取所有标题类型元素	$(‘ele:header’)

级别选择器相关方法

parent方法

$(selector).parent() 表示选中所有匹配元素的唯一父元素。

《关闭悬浮广告》解决方案：

// 原生JS方法：
// 选中所有button
var oBtns = document.getElementsByTagName('button');
for(var i=0;i<oBtns.length;i++){
    oBtns[i].onclick = function(){
        // 找到父级，把父级display=none
        // console.log( this.parentNode );
        this.parentNode.style.display = "none";
    }
}

// JQ方法：
$('button').click(function(){
    // 选择这个按钮的父级 - 这个$(this)     父级.parent()
    $(this).parent().hide();
})

siblings方法

$(selector).siblings() 表示选中某个元素同级的元素，括号内有写元素，表示选中同级的某个元素，如果没有书写，则表示选中同级的所有元素！

排他思想

// 原生JS方法
var btns = document.getElementsByTagName('button');
for(var i=0;i<btns.length;i++){
    btns[i].onclick = function(){
      for(var k=0;k<btns.length;k++){
          btns[k].style.background = "none";
      }
      this.style.background = "pink";
    }
}

// JQ方法：
$('button').click(function(){
    // siblings()兄弟节点，
    // 两个方法都是作用于$(this)的，可以使用链式编程
    $(this).css('background', 'skyblue').siblings('button').css('background', 'none');
})

children方法

$(selector).children() 表示选中某个元素的子级元素，括号内有写元素，表示选中子级中的某个元素，如果没有书写，则表示选中子级的所有元素！

书城特效

// 原生JS方法
var lis = document.getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
    // 鼠标移入
    lis[i].onmouseenter = function(){
        // 让p标签隐藏
        this.children[0].style.display = "none";
        // 让img显示
        this.children[1].style.display = "block";
    }
    // 鼠标移出
    lis[i].onmouseleave = function(){
        // 让p标签显示
        this.children[0].style.display = "block";
        // 让img隐藏
        this.children[1].style.display = "none";
    }
}

// JQ 方法

// 初级解决方案
// mouseover 、 mouseout 是一对儿，机制相同。会冒泡
// mouseenter 、 mouseleave是一对儿，机制相同。不冒泡
$('li').mouseenter(function(){
  $(this).children('img').show().siblings().hide();
})
$('li').mouseleave(function(){
  $(this).children('p').show().siblings().hide();
})

// 中级解决方案
$('li').hover(function(){
  $(this).children('img').show().siblings().hide();
}, function(){
  $(this).children('p').show().siblings().hide();
})

// 高级解决方案
$('li').hover(function(){
  $(this).children().toggle();
})

动态设置class的方法

索引值方法

在JQ中，**index()**是一个方法(函数)，所以必须加括号！用来获取当前元素在父级中的索引值。

语法：

$(selector).index();// 获取索引值方法

// 原生方法
var btns = document.getElementsByTagName("button");
for (var i = 0; i < btns.length; i++) {
    btns[i].setAttribute("myindex", i);
    btns[i].onclick = function () {
      	console.log(this.getAttribute("myindex"));
    };
}

// JQ index方法
$("button").click(function(){	
  var index = $(this).index();
  console.log(index);
})

addClass与removeClass方法

语法：

// 给某个元素添加类名，理论上，一个标签可以添加无数多个类名，用空格分开
$(selector).addClass(“className1  className2  className3”)

// 给某个元素移除类名
$(selector).removeClass(“className1  className2  className3”)

《Tab栏》案例

// 原生方法
var btns = document.getElementsByTagName("span");
var pages = document.getElementsByTagName("li");
for (var i = 0; i < btns.length; i++) {
    btns[i].index = i;
    btns[i].onmouseenter = function () {
        for (var j = 0; j < btns.length; j++) {
            btns[j].className = "";
            pages[j].className = "";
        }
        this.className = "current";
        pages[this.index].className = "current";
    };
}

// JQ方法
$("span").hover(function () {
    var index = $(this).index();
    $(this).addClass("current").siblings().removeClass("current");
    $("li").eq(index).addClass("current").siblings().removeClass("current");
});

toggleClass

语法：

// 切换某个元素的类名（添加或删除）
$(selector).toggleClass(“className”)

《百度风云榜》案例

$('span').click(function(){
  // 让当前列表切换收放
  $(this).toggleClass('open').siblings('ol').slideToggle();
  // 让其他列表收起
  $(this).parent().siblings().children('ol').slideUp().siblings('span').removeClass('open');
})

// 代码优化：
// 链式编程：在一个方法后调用另一个方法
// 原理：每一个方法都会去找最近的一个对象(事件源)
	// 本质上是每个函数末尾加了return this，将调用该函数的jquery对象返回
	// 同时由于只对 DOM 进行了一轮查找，性能方面更加出色。
$('span').click(function(){
  $(this).toggleClass('open')// "当前span"
    	 .siblings('ol')// 将事件源"当前span"变成了"当前ol"
          .slideToggle()// "当前ol"
          .parent()// 将"当前ol"变成了"当前父级li"
          .siblings()// 将"当前父级li"变成了"其他父级li"
          .children('ol')// 将"其他父级li"变成了"其他父级的ol"
          .slideUp()// "其他父级的ol"
          .siblings('span')// 将"其他父级的ol"变成了"其他父级的span"
          .removeClass('open');// "其他父级的span"
})

表单相关方法

val获取表单中的值

获取input 或 textarea 的值我们可以通过以下方式获取：

// ()内部写入文本可以实现修改功能
$('input').val()
$('textarea').val()

获取select下拉框的值

<select id="selectBrowser">
    <option value="1">pc</option>
    <option value="2">phone</option>
    <option value="3">pad</option>
</select>
<script>
    $("#selectBrowser").change(function(){
        console.log($(this).val());
    })
</script>

trim去除前后空格

表单输入时去除前后空格，我们可以用：

$.trim()

// 通常来说提交表单时，输入框的值是不允许为空的，并且包括空格，这样的数据是无意义的，此时需要做校验，提示用户重新输入
var val = $('input').val();
if( $.trim(val)=="" ){
  	alert('请重新输入');
}

节点控制

节点node	nodeType	nodeName	nodeValue
元素节点	1	标签名（大写）	null
属性节点	2	属性名	属性值
文本节点	3	#text	文本内容
CDATA节点	4	#cdata-section	CDATA区域内容
实体引用名称节点	5	引用名称	null
实体名称节点	6	实体名称	null
处理指令节点	7	target	entire content cluding the target
注释节点	8	#comment	注释内容
文档节点	9	#document	null
文档类型节点	10	doctype的名称	null
文档片段节点	11	#document-fragment	null
DTD声明节点	12	符号名称	null

增加子节点

语法：

// 在某个元素的子级中，往后面添加节点
$(element).append('子节点')
// 在某个元素的子级中，往前面添加节点
$(element).prepend('子节点')

  // 点击增加一个li标签在ul的最前
  $('.before').click(function(){
    var val = $.trim($('input').val());
    if(val)$('ul').prepend('<li>'+val+'</li>');
    $('input').val("");
  })

  // 点击增加一个li标签在ul的最后
  $('.after').click(function(){
    var val = $.trim($('input').val());
    if(val)$('ul').append('<li>'+val+'</li>');
    $('input').val("");
  })

增加同级节点

语法：

// 在element之前添加兄弟节点
$(element).before('兄弟节点') 
// 在element之后添加兄弟节点
$(element).after('兄弟节点') 

  // 点击增加一个标签在p.brother之前
  $('button').eq(0).click(function(){
    $('.brother').before('<p>我是前p</p>');
  })

  // 点击增加一个标签在p.brother之后
  $('button').eq(1).click(function(){
    $('.brother').after('<p>我是后p</p>');
  })

节点的删除

语法：

// 将element节点中的子级节点包括内容清空
$(element).empty();
// 删除element节点包括内容
$(element).remove();

$('button').eq(0).click(function(){
  $('ul').empty();  // 清空ul中的内容
})

$('button').eq(1).click(function(){
  $('ul').remove(); // 直接删除ul
})

节点的替换

语法：

// 用后者替代前者
$(element1).replaceWith(element2);

$('button').click(function(){
    // p替代li
    $('li').eq(1).replaceWith(`<p>这是个p标签</p>`);
})

事件委托

定义：

事件委托是利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。

为什么要用事件委托？

给一个ul里面的几个li添加了事件但是如果动态又生成了li则刚生成的li不具备事件这时就需要用到委托。

事件委托语法：

// 事件和函数是必填的，子级选择器选填（不填就是普通事件绑定）
$(selector).on(事件,children,function(e){...})

// 1ms之后再添加一下li元素
setTimeout(function () {
  	$('ul').append('<li>6</li>')
}, 1)
// 普通事件绑定（办不到）
// $('li').click(function(){
//     var index=$(this).index()+1
//     console.log(index);
// })
// 事件委托（重点）
$('ul').on('click', 'li', function () {
    var index = $(this).index() + 1
    // 此时this指向的是‘li’
    console.log(this, index);
})

// 事件解绑
$('ul').click(function(){
    console.log(111);
})
$("button").click(function(){
    $('ul').off('click', 'li')
})

// 另一种诡异写法（JQ项目很多这样的写法）
setTimeout(function () {
  	$('ul').append('<li onclick="getIndex(this)">6</li>')
}, 1)
function getIndex(myThis){
    var index=$(myThis).index()+1
    console.log(index);
}

键盘事件和键码

键盘事件

$(selector).keydown(function(){...});// 键盘按下事件
$(selector).keyup(function(){...});// 键盘松开事件

键码

e.keyCode – 键码

回车键——13

            $("textarea").keyup(function (e) {
                classAdd()

                // 3、点击回车，发布
                if (e.keyCode == 13) {
                    sumFn();
                }
            });

计算机网络基础

万维网

万维网（World Wide Web），亦作“WWW”、“Web”，是一个透过互联网访问的，由许多互相链接的超文本组成的系统。

web服务三要素：

1. 统一资源标识符（URI），这是一个统一的为资源定位的系统，URI可以分为URL和URN或同时具备locators 和names特性的一个东西
   • URN：Uniform Resource Name 是一种使用字符串表示资源名字的方法
   • URL： Uniform Resource Location 是一种使用字符串表示资源所在位置的方法
   • 换句话说：URN确定了东西的身份，URL提供了找到它的方式。
2. 超文本传送协议（HTTP），它负责规定客户端和服务器怎样互相交流。
3. 超文本标记语言（HTML），作用是定义超文本文档的结构和格式。

CS 架构

CS 即 Client/Server（客户机/服务器）结构，C/S 结构在技术上很成熟，它的主要特点是交互性强、具有安全的存取模式、网络通信量低、响应速度快、利于处理大量数据。但是该结构的程序是针对性开发，变更不够灵活，维护和管理的难度较大。通常只局限于小型局域网，不利于扩展。并且，由于该结构的每台客户机都需要安装相应的客户端程序，分布功能弱且兼容性差，不能实现快速部署安装和配置，因此缺少通用性，具有较大的局限性。要求具有一定专业水准的技术人员去完成。比如 QQ，微信，绝地逃生等等。

BS 架构

BS 即 Browser/Server（浏览器/服务器）结构，就是只安装维护一个服务器（Server），而客户端采用浏览器（Browse）运行软件。B/S 结构应用程序相对于传统的 C/S 结构应用程序是一个非常大的进步。 B/S 结构的主要特点是分布性强、维护方便、开发简单且共享性强、总体拥有成本低。但数据安全性问题、对服务器要求过高、数据传输速度慢、软件的个性化特点明显降低，这些缺点是有目共睹的，难以实现传统模式下的特殊功能要求。例如通过浏览器进行大量的数据输入或进行报表的应答、专用性打印输出都比较困难和不便。此外，实现复杂的应用构造有较大的困难。企业应用中大多数度使用 BS 架构，比如淘宝，京东，优酷，爱奇艺等等。

浏览器访问网站的基本过程

IP地址

要想使网络中的计算机能够进行通信，必须为每台计算机指定一个标识号，通过这个标识号来指定接受数据的计算机或者发送数据的计算机。在TCP/IP协议中，这个标识号就是IP地址，它可以唯一标识一台计算机。 相当于电话号码和电话。

端口号

通过IP地址可以连接到指定计算机，但如果想访问目标计算机中的某个应用程序，还需要指定端口号。在计算机中，不同的应用程序是通过端口号区分的。

Hosts文件

Hosts是一个没有扩展名的系统文件，可以用记事本等工具打开，其作用就是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”，当用户在浏览器中输入一个需要登录的网址时，系统会首先自动从Hosts文件中寻找对应的IP地址，一旦找到，系统会立即打开对应网页，如果没有找到，则系统会再将网址提交DNS域名解析服务器进行IP地址的解析。

DNS

域名系统（英文：DomainNameSystem，缩写：DNS）是互联网的一项服务。它作为将域名和IP地址相互映射的一个分布式数据库，能够使人更方便地访问互联网。DNS使用TCP和UDP端口53。当前，对于每一级域名长度的限制是63个字符，域名总长度则不能超过253个字符。

基本流程(重点)

    用户输入网址，
    浏览器请求DNS服务器, 获取域名对应的IP地址，
    请求连接该IP地址服务器，
    发送资源请求. (遵循HTTP协议)
    web服务器接收到请求, 并解析请求, 判断用户意图，
    获取用户想要的资源，(链接数据库从数据中获取数据)
    将资源返回给http服务器程序，
    http服务器程序将资源数据通过网络发送给浏览器 （响应给浏览器），
    浏览器解析呈现请求的数据

域名与域名服务器

​ 1、网站： www.sina.com.cn

-www: 主机名 ，ftp、svn、stmp、xmpp服务
    - sina：机构名
        - com：机构类型 com  net edu  org  xxx
            - cn： 地区名  tw  hk   us  uk  jp 

2、域名服务器（DNS）

进行域名和与之相对应的IP地址转换的服务器

Http协议简介

http的认识

HTTP是万维网的数据通信的基础。设计HTTP最初的目的是为了提供一种发布和接收HTML页面<网页>的方法。

http协议：

1. HTTP 超文本传输协议(hypertext transfer protocol) ：用于web服务器与浏览器之间传输数据的协议
2. HTTP协议是基于TCP/IP协议的，发送数据之前需要建立好连接
3. http协议的请求响应模型包含浏览器与http服务器的request、response请求响应模型

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/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技术简介

使用 JavaScript 代码发送网络请求并处理响应，由浏览器实现。

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

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

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

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

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

优缺点：

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

缺点：浏览器实现之间有差异处理兼容性问题；不能回退和前进；默认不支持跨域访问—好事（可以自主学习相关知识：同源策略）。\

域名,端口,协议完全相同的两个URL是同源的-----只要不是同源的域名就会发生跨域

AJAX 对象中有 4 个属性：

• readyState 总共有 5 个状态值，分别为 0 ~ 4，每个值代表了不同的含义：
  • 0：初始化，AJAX 对象还没有完成初始化
  • 1：载入，AJAX 对象开始发送请求
  • 2：载入完成，AJAX 对象的请求发送完成
  • 3：解析，AJAX 对象开始读取服务器的响应
  • 4：完成，AJAX 对象读取服务器响应结束
• status 表示响应的 HTTP 状态码，常见状态码如下：
  • 200 OK：请求成功
  • 302 Found：重定向，新的 URL 会在 response 中的 Location 中返回，浏览器将会使用新的 URL 发出新的 Request
  • 304 Not Modified：已缓存，文档已经被缓存，直接从缓存调用
  • 400 Bad Request：客户端请求有语法错误，不能被服务器所理解
  • 403 Forbidden：服务器收到但拒绝服务，引用外部资源触发防盗链
  • 404 Not Found：找不到资源，请求资源不存在
  • 500 Internal Server Error：服务端错误，服务器发生了不可预期的错误
  • 503 Server Unavailable：服务器当前不能处理客户端的请求，一段时间后可能恢复正常
• responseText 获得字符串形式的响应数据。
• responseXML 获得 XML 形式的响应数据。

使用ajax发送get请求

// 1、创建 AJAX 对象；new XMLHttpRequest()
// 2、设置请求路径，请求方式等；ajax.open(请求方式，路径)
// 3、绑定监听状态改变的处理函数，在处理函数可获取响应数据；ajax.onreadystatechange
// 4、发送请求。ajax.send

    btn.onclick = function(){
        // 1、创建 AJAX 对象；
        var ajax = new XMLHttpRequest();
        // 2、设置请求路径，请求方式等；ajax.open(请求方式，路径)
        ajax.open('get', 'http://kumanxuan1.f3322.net:8809/travels/query');
        // 3、绑定监听状态改变的处理函数，在处理函数可获取响应数据；
        ajax.onreadystatechange = function(){
            // console.log(ajax.readyState);
            if(ajax.readyState==4 && ajax.status==200){
                // 此时获取服务器发过来的数据
                console.log(ajax.responseText)	// 得到的是字符串对象，需要用JSON.parse(txt)转对象
            }
        }
        // 4、发送请求。
        ajax.send();
    }

使用ajax发送post请求

    // 后台要求携带参数：
    // 用户名 - username
    // 密码 - password
    btn.onclick = function () {
        // 1、创建 AJAX 对象
        var ajax = new XMLHttpRequest();
        // 2、设置请求路径，请求方式等
        ajax.open("post", "http://kumanxuan1.f3322.net:8809/users/login");
        // 3、设置请求头，不然无法传递参数到后台
        ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        // 4、绑定监听状态改变的处理函数
        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4 && ajax.status == 200) {
                console.log(ajax.responseText);
            }
        }
        // 5、发送请求并携带参数
        ajax.send(`username=${user.value}&password=${pwd.value}`)
    }

总结：

1. 需要获取数据的时候，使用get请求
2. 需要传递参数给后台并完成某些功能的时候，使用post请求

jQuery 中 ajax 使用

基本语法：

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

$.ajax的使用

举例：

$.ajax({
    url: 'url',
    type: 'GET',
    data: {username:'zs', password:'12345'},
    success: function(data){
        // 请求成功业务逻辑
    }
});

发送GET请求

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

$('button').click(function(){
  $.ajax({
    type: "GET",
    url: "http://kumanxuan1.f3322.net:8809/travels/query",
    success: function(res){
      console.log(res);
    }
  })
})

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

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

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

$('button').click(function(){
	$.get("http://kumanxuan1.f3322.net:8809/travels/query",
          function (res) {
            console.log(res)
          })
})

发送POST请求

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

$('button').click(function(){
  $.ajax({
    url: "http://kumanxuan1.f3322.net:8809/users/login",
    type: "POST",
    data: {
      username: $('#username1').val(),
      password: $("password1").val()
    },
    success: function(res){
      console.log(res)
    }
  })
})

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

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

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

$('button').click(function(){
  $.post('http://kumanxuan1.f3322.net:8809/users/login', {
    username: $('#username1').val(),
    password: $("#password1").val()
  }, function(res){
    console.log(res)
  })
})

骡窝窝官网项目

postman的使用

首页-banner

1. 使用ajax调用接口
2. 处理数据，并将通过数据改变dom
3. 点击按钮切换banner
4. 轮播效果

// 1.入口函数
$(function () {
  // 2.发送ajax请求
  $.ajax({
    url: "http://kumanxuan1.f3322.net:8809/index/banners/travel",
    type: "GET",
    data: {},
    success: function (res) {
      // console.log(res.data);
      $("#_j_mfw_focus ul.show-image").empty();
      $("#_j_mfw_focus ul.show-nav").empty();
      // 3.数据处理
      $.each(res.data, function (index, item) {
        // console.log(a, b);
        // 4.dom操作
        $("#_j_mfw_focus ul.show-image").append(`
        <li data-id="0" class="show_image">
            <a href="./traveldetail.html?id=${item.refId}"
                class="show-pic">
                <img src="${item.coverUrl}">
            </a>
            <a href="javascript:;" class="show-title dark">
                <div class="date">
                    <span class="day">15</span>/Oct.2020
                </div>
                <h3>${item.title}</h3>
            </a>
        </li>
        `)

        $("#_j_mfw_focus ul.show-nav").append(`
        <li class="show_nav" onclick = checkBg(${index})>
            <a href="javascript:">
                <img src="${item.coverUrl}" height="62" width="110">
                <span></span>
            </a>
        </li>
        `)
        //模拟点击
        checkBg(0);
      })
    }
  })
})


// 5.事件绑定
function checkBg(index) {
  // console.log(index);

  // 6.2清除定时器
  clearInterval(timer);

  // 按钮排他
  $("#_j_mfw_focus ul.show-nav").children().eq(index).addClass("active").siblings().removeClass("active");
  // 切换轮播图显示
  $("#_j_mfw_focus ul.show-image").children().eq(index).show().siblings().hide();

  // 6.3再次开启
  // 6.4 index关联num
  autoPlayFn(index)
}

// 6.自动轮播
var timer = null;

function autoPlayFn(num) {
  var num = num;//累加器
  timer = setInterval(function () {
    // 6.1 边界判断
    // if (num >= ($("#_j_mfw_focus ul.show-image").children().length - 1)) {
    //   num = 0
    //   console.log(num);
    // } else {
    //   num++;
    // }


    // num在0--4之间轮转 1 2 3 4 0
    num = ++num % $("#_j_mfw_focus ul.show-image").children().length;
    // console.log(num);
    checkBg(num);
  }, 1000)
}

首页-游记列表

4.1、列表渲染

1. 使用$.ajax调接口
2. 处理数据
3. 使用JQ方法改变DOM渲染

4.2、tab切换

1. 传入不同的参数可以获取不同的数据列表
2. 点击tab切换的时候，传入不同的参数
3. 每次点击，都修改一次DOM

$('#_j_tn_nav ._j_gs_tab').click(function () {
  $('#pagination [jp-role="page"]').eq(0).addClass('active')
    .siblings('[jp-role="page"]').removeClass('active')
  if (!$(this).hasClass('active')) {
    $(this).addClass('active').siblings().removeClass('active')
    if ($(this).index() == 0) {
      getTravelList(2, 1)
    } else {
      getTravelList(1, 1)
    }
  }
})