Ajax+JQuery+Vue学习笔记
笔记可参考链接：https://www.cnblogs.com/Ding1fun/p/15178291.html
Ajax
1. 全局刷新和局部刷新
全局刷新
整个浏览器被新的数据覆盖，在网络中传输大量的数据，浏览器需要加载，渲染页面
局部刷新
在浏览器的内部，发起请求，获取数据，改变页面中的部分内容
局部刷新的速度更快，可以按需获取数据
ajax是用来做局部刷新的，局部刷新使用的核心对象是 异步对象（XMLHttpRequest）
这个异步对象是存在浏览器内存中的，使用javascript语法创建和使用 XMLHttpRequest 对象
2. Ajax概念
- Asynchronous Javascript and XML（异步的 Javascript 和 XML）
- Asynchronous：异步
- 同步只能处理一个请求
- 异步可以分开处理多个请求
- Javascript：Javascript脚本，在浏览器中执行
- and：和
- xml：是一种数据格式
- Asynchronous：异步
- Ajax是一种做局部刷新的新方法（2003年左右），不是一种语言。
- Ajax包含的技术主要有JavaScript，dom，css，xml等等，核心是JavaScript和xml。
- JavaScript负责创建异步对象，发送请求，更新页面的dom对象。
- Ajax请求需要服务器端的数据。
- xml：可扩展标记语言
- 网络中的传输的数据格式
- 目前使用 json 替换了 xml
<datas>
<data1> Car_01 </data1>
<data2> Car_02 </data2>
<data3> Car_03 </data3>
<data4> Car_04 </data4>
</datas>
3. Ajax异步实现步骤
step 01 创建异步对象
var xmlHttp = new XMLHttpRequest();
step 02 给异步对象绑定事件
- 给异步对象绑定onreadstatechange事件，获知请求的状态的变化
- onreadystatechange事件
- 当请求被发送到服务器时，我们需要执行一些基于响应的任务
- 当异步对象发起请求，获取了数据，都会触发这个事件
- 每当 readyState 改变时，就会触发 onreadystateChange 事件
- 这个事件需要指定一个函数，在函数中处理状态的变化
- 此事件可以指定一个处理函数function
bth.onclick = fun1(); // 点击这个按钮会触发fun1函数
function fun1(){
alert("按钮单击");
}
// For example,
xmlHttp.onreadystatechange = function(){ // 用匿名函数直接指定
// 处理请求的状态变化
if( xmlHttp.readyState == 4 && xmlHttp.status == 200 ){
// 数据已经返回来准备好了 && 网络请求是成功的
// 可以处理服务器端的数据，更新当前页面
var data = xmlHttp.responseText;
// 获取服务器返回的数据，使用异步对象的属性 responseText
document.getElementById("name").value = data;
}
}
step 03 初始异步请求对象
异步的方法 open()
xmlHttp.open(请求方式get|post,"服务端的访问地址",同步|异步请求)
同步|异步请求：默认为true，表示异步请求
xmlHttp.open("get","loginServlet?name=zhangsan&pwd=123",true);
step 04 使用异步对象发送请求
- xmlHttp.send()
step 补充说明
- 获取服务器返回的数据，使用异步对象的属性 responseText
使用例子：xmlHttp.reponseText - 使用需要配合服务器端，因为需要到服务端拿数据，单独使用没有意义
- 回调：当请求的状态变化时，异步对象会自动调用 onreadystatechange事件 对应的函数
完成整个流程，异步对象内部会多次调用这个函数
4. Ajax举例：计算BMI
全局刷新方式
局部刷新方式
使用ajax的局部刷新
1.新建jsp，使用XMLHttpRequest异步对象。
使用异步对象有四个步骤：
1.创建
2.绑定事件
3.初始请求
4.发送请求
2.创建服务器的servlet，接收并处理数据，把数据输出给异步对象。
参考：https://www.cnblogs.com/Ding1fun/p/15178291.html
5. Ajax举例：根据省份id查询省份名称
参考：https://www.cnblogs.com/Ding1fun/p/15178291.html
6.JSON
7.同步和异步
open函数第三个参数的作用（true）
同步还是异步？——> 真表示异步，假表示同步；
true：异步处理请求，使用异步对象发起请求后，不用等待数据处理完毕就可以执行其他的操作
按理说，发送到servlet的数据，返回后才可以继续使用，但异步可以同时处理多个请求
不会妨碍其他代码的执行
同步的方式，在任意时刻只能执行一个请求
JQuery
1.jQuery概述
jQuery是js库
- 库：相当于java的工具类，库是存放东西的，jQuery是存放js代码的地方，放的是用js代码写的函数
- jquery是为了简化js的操作
2.DOM对象和jQuery对象
dom对象，使用javascript的语法创建的对象叫做dom对象， 也就是js对象。
var obj= document.getElementById("txt1"); obj是dom对象，也叫做js对象
obj.value;
jquery对象： 使用jquery语法表示对象叫做jquery对象， 注意：jquery表示的对象都是数组。
例如 var jobj = $("#txt1") , jobj就是使用jquery语法表示的对象。 也就是jquery对象。 它是一个数组。
现在数组中就一个值。
dom对象可以和jquery对象相互的转换。
dom对象可以转为jquery ， 语法： $(dom对象)
jquery对象也可以转为dom对象， 语法： 从数组中获取第一个对象， 第一个对象就是dom对象， 使用[0]或者get{0).
为什么要进行dom和jquery的转换：目的是要使用对象的方法，或者方法。
当你的dom对象时，可以使用dom对象的属性或者方法， 如果你要想使用jquery提供的函数，必须是jquery对象才可以。
3.选择器
选择器： 就是一个字符串， 用来定位dom对象的。定位了dom对象，就可以通过jquery的函数操作dom
基本选择器
1） id选择器， 语法： $("#dom对象的id值")
通过dom对象的id定位dom对象的。 通过id找对象， id在当前页面中是唯一值。
2） class选择器， 语法： $(".class样式名)
class表示css中的样式， 使用样式的名称定位dom对象的。
3） 标签选择器， 语法： $("标签名称")
使用标签名称定位dom对象的
表单选择器
使用标签的type属性值，定位dom对象的方式。
语法： $(“:type属性值”)
例如： $(“:text”) ,选择的是所有的单行文本框，
$(“:button”) ,选择的是所有的按钮。
过滤器
过滤器：在定位了dom对象后，根据一些条件筛选dom对象。
过滤器有是一个字符串，用来筛选dom对象的。
过滤器不能单独使用， 必须和选择器一起使用。
1）$(“选择器:first”) : 第一个dom对象
2）$(“选择器:last”): 数组中的最后一个dom对象
3）$(“选择器:eq(数组的下标)”) ：获取指定下标的dom对象
4）$(“选择器:lt(下标)”) ： 获取小于下标的所有dom对象
5）$(“选择器:gt(下标)”) ： 获取大于下标的所有dom对象
表单对象属性过滤器
表单属性过滤器： 根据表单中dom对象的状态情况，定位dom对象的。
启用状态， enabled ,
不可用状态 disabled
选择状态 ， checked ， 例如radio， checkbox
4.jQuery绑定事件方式
5.函数
1.val
操作数组中 DOM 对象的 value 属性.
$(选择器).val() ：无参数调用形式， 读取数组中第一个 DOM 对象的 value 属性值
$(选择器).val(值)：有参形式调用;对数组中所有 DOM 对象的 value 属性值进行统一赋值
2.text
操作数组中所有 DOM 对象的【文字显示内容属性】
$(选择器).text():无参数调用，读取数组中所有 DOM 对象的文字显示内容，将得到内容拼接为一个字符串返回
$(选择器).text(值):有参数方式，对数组中所有 DOM 对象的文字显示内容进行统一赋值
3.attr
对 val, text 之外的其他属性操作
$(选择器).attr(“属性名”): 获取 DOM 数组第一个对象的属性值
$(选择器).attr(“属性名”,“值”): 对数组中所有 DOM 对象的属性设为新值
1.hide
$(选择器).hide() :将数组中所有 DOM 对象隐藏起来
2.show
$(选择器).show():将数组中所有 DOM 对象在浏览器中显示起来
3.remove
$(选择器).remove() : 将数组中所有 DOM 对象及其子对象一并删除
4.empty
$(选择器).empty()：将数组中所有 DOM 对象的子对象删除
5.append
为数组中所有 DOM 对象添加子对象
$(选择器).append(“
6.html
设置或返回被选元素的内容（innerHTML）。
$(选择器).html()：无参数调用方法，获取 DOM 数组第一个匹元素的内容。
$(选择器).html(值)：有参数调用，用于设置 DOM 数组中所有元素的内容。
7.each
each 是对数组，json 和 dom 数组等的遍历,对每个元素调用一次函数。
语法 1：$.each( 要遍历的对象, function(index,element) { 处理程序 } )
语法 2：jQuery 对象.each( function( index, element ) { 处理程序 } )
index: 数组的下标
element: 数组的对象
1). 可以对 数组， json ，dom数组循环处理。 数组， json中的每个成员都会调用一次处理函数。
var arr = { 1, 2, 3} //数组
var json = {"name":"lisi","age":20 }
var obj = $(":text");
语法： $.each( 循环的内容， 处理函数 ) ：表示使用jquery的each，循环数组，每个数组成员，
都会执行后面的“处理函数”一次。
$: 相当于是java的一个类名
each:就是类中的静态方法。
静态方法调用，可以使用 类名.方法名称
处理函数:function(index, emelent) :
index, element都是自定义的形参， 名称自定义。
index：循环的索引
element：数组中的成员
js循环数组：
for(var i=0;i<arr.length;i++){
var item = arr[i]; //数组成员
//操作数组成员
shuchu( i , item);
}
function shuchu(index, emlemnt){
输出index ，element
}
2).循环jquery对象， jquery对象就是dom数组
jquery对象.each( function(index,element) {} )
6.绑定事件
1） $(选择器).事件名称( 事件的处理函数)
$(选择器)：定位dom对象， dom对象可以有多个， 这些dom对象都绑定事件了
事件名称：就是js中事件去掉on的部分， 例如 js中的单击事件 onclick(),
jquery中的事件名称，就是click，都是小写的。
事件的处理函数：就是一个function ，当事件发生时，执行这个函数的内容。
例如给id是btn的按钮绑定单击事件
$("#btn").click(funtion(){
alert("btn按钮单击了")
})
2) on 事件绑定
$(选择器).on( 事件名称 , 事件的处理函数)
事件名称： 就是js事件中去掉on的部分， 例如js中onclick ,这里就是click
事件的处理函数： function 定义。
例如， <input type="button" id="btn">
$("#btn").on("click", function() { 处理按钮单击 } )
7.AJAX
$.ajax()
使用jquery的函数，实现ajax请求的处理。
没有jquery之前，使用XMLHttpRequest做ajax ， 有4个步骤。 jquery简化了ajax请求的处理。
使用三个函数可以实现ajax请求的处理。
1） $.ajax() : jquery中实现ajax的核心函数。
2） $.post() : 使用post方式做ajax请求。
3） $.get() : 使用get方式发送ajax请求。
$.post()和$.get() 他们在内部都是调用的 $.ajax()
介绍 $.ajax函数的使用， 函数的参数表示请求的url， 请求的方式，参数值等信息。
$.ajax()参数是一个json的结构。
例如： $.ajax( {名称:值， 名称1:值1..... } )
例如： $.ajax( { async:true ,
contentType:"application/json" ,
data: {name:"lisi",age:20 },
dataType:"json",
error:function(){
请求出现错误时，执行的函数
},
success:function( data ) {
// data 就是responseText, 是jquery处理后的数据。
},
url:"bmiAjax",
type:"get"
}
)
json结构的参数说明：
1)async:是一个boolean类型的值， 默认是true ，表示异步请求的。可以不写async这个配置项
xmlHttp.open(get,url,true),第三个参数一样的意思。
2)contentType: 一个字符串，表示从浏览器发送服务器的参数的类型。 可以不写。
例如你想表示请求的参数是json格式的， 可以写application/json
3)data: 可以是字符串，数组，json，表示请求的参数和参数值。 常用的是json格式的数据
4)dataType: 表示期望从服务器端返回的数据格式，可选的有： xml ， html ，text ，json
当我们使用$.ajax()发送请求时， 会把dataType的值发送给服务器， 那我们的servlet能够
读取到dataType的值，就知道你的浏览器需要的是 json或者xml的数据，那么服务器就可以
返回你需要的数据格式。
5)error: 一个function ，表示当请求发生错误时，执行的函数。
error:function() { 发生错误时执行 }
6)sucess:一个function , 请求成功了，从服务器端返回了数据，会执行success指定函数
之前使用XMLHttpRequest对象， 当readyState==4 && status==200的时候。
7)url:请求的地址
8)type:请求方式，get或者post， 不用区分大小写。 默认是get方式。
主要使用的是 url , data ,dataType, success .
$.get()
$.get() 方法使用 HTTP GET 请求从服务器加载数据。
语法：$.get(url,data,function(data,status,xhr),dataType)
url 必需。规定您需要请求的 URL。
data 可选。规定连同请求发送到服务器的数据。
function(data,status,xhr)可选。当请求成功时运行的函数。data,status,xhr 是自定义形参名。
参数说明：
data - 包含来自请求的结果数据
status - 包含请求的状态（"success"、"notmodified"、"error"、"timeout"、"parsererror"）
xhr - 包含 XMLHttpRequest 对象
dataType 可选。规定预期的服务器响应的数据类型。默认地，jQuery 会智能判断。可能的
类型：
"xml" - 一个 XML 文档
"html" - HTML 作为纯文本
"text" - 纯文本字符串
$.post()
$.post() 方法使用 HTTP POST 请求从服务器加载数据。
语法：$.post(URL,data,function(data,status,xhr),dataType)
参数同$.get()
569
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
