目录
Ajax
1、全局刷新和局部刷新
全局刷新： 整个浏览器被新的数据覆盖。 在网络中传输大量的数据。 浏览器需要加载，渲染页面。
局部刷新： 在浏览器器的内部，发起请求，获取数据，改变页面中的部分内容。其余的页面无需加载和渲染。 网络中数据传输量少， 给用户的感受好。
ajax是用来做局部刷新的。局部刷新使用的核心对象是 异步对象（XMLHttpRequest），这个异步对象是存在浏览器内存中的 ，使用javascript语法创建和使用XMLHttpRequest对象。
2、ajax：Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
Asynchronous：异步的意思
JavaScript：javascript脚本，在浏览器中执行
and ：和
xml ：是一种数据格式
ajax是一种做局部刷新的新方法（2003左右），不是一种语言。ajax包含的技术主要有javascript,dom,css, xml等等。 核心是javascript 和 xml 。
javascript：负责创建异步对象，发送请求，更新页面的dom对象。ajax请求需要服务器端的数据。
xml： 网络中的传输的数据格式。 使用 json 替换了xml 。
ajax实现步骤
1）创建异步对象
var xmlHttp = new XMLHttpRequest();2）给异步对象绑定事件。
onreadystatechange ：当异步对象发起请求，获取了数据都会触发这个事件。这个事件需要指定一个函数，在函数中处理状态的变化。
xmlHttp.onreadystatechange = function () {
// 处理服务器端返回的数据，更新当前页面
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
var data = xmlHttp.responseText;
//更新dom对象，更新页面数据
document.getElementById("mydata").innerText = data;
}
}解析： 异步对象的属性 readyState 表示异步对象请求的状态变化
0：创建异步对象时， new XMLHttpRequest();
1：初始异步请求对象， xmlHttp.open()
2：发送请求， xmlHttp.send()
3：从服务器端获取了数据，此时3， 注意3是异步对象内部使用， 获取了原始的数据。
4：异步对象把接收的数据处理完成后。 此时开发人员在4的时候处理数据。
在4的时候，开发人员做什么 ？ 更新当前页面。
获取服务器端返回的数据， 使用异步对象的属性 responseText .
异步对象的status属性，表示网络请求的状况的， 200， 404， 500， 需要是当status==200时，表示网络请求是成功的。
3) 初始异步请求对象
异步的方法open().
xmlHttp.open(请求方式get|post, "服务器端的访问地址", 同步|异步请求（默认是true，异步请求))
xmlHttp.open("get", "${pageContext.request.contextPath}/logAjax?"+param, true);解析：
open(method, url, async, username, password)
method： 请求方法（GET/POST/PUT/DELETE....）
url： 统一资源定位符
async： 指定支持异步还是同步机制（true表示支持异步，false表示支持同步）
【注意】解决get请求中的缓存问题，请求地址加入“时间戳”
4)使用异步对象发送请求
xmlHttp.send()
获取服务器端返回的数据， 使用异步对象的属性 responseText .
回调：当请求的状态变化时，异步对象会自动调用onreadystatechange事件对应的函数。
附加图示
4.json使用
使用JSON格式输出，需要导入依赖。
json分类：
1. json对象 ，JSONObject ,这种对象的格式 名称：值， 也可以看做是 key：value 格式。
2. json数组， JSONArray, 基本格式 [{ name:"河北", jiancheng:"冀","shenghui":"石家庄"} , { name:"山西", jiancheng:"晋","shenghui":"太原"} ]
String json = "{}";
// 需要使用json 把 java对象转换为 json
ObjectMapper om = new ObjectMapper();
json = om.writeValueAsString(java对象);// 指定服务器端（Servlet）返回给浏览器的是json格式的数据
response.setContentType("application/json;charset=utf-8"); 为什么要使用json ：
1. json格式好理解
2. json格式数据在多种语言中，比较容易处理。 使用java， javascript读写json格式的数据比较容易。
3. json格式数据他占用的空间下，在网络中传输快， 用户的体验好。
处理json的工具库： gson（google）； fastjson（阿里），jackson， json-lib
在js中的，可以把json格式的字符串，转为json对象， json中的key，就是json对象的属性名。
ajax实现Get请求方式
创建Servlet，并在webapp/WEB-INF/web.xml注册Servlet
public class LoginAjaxServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
String password = request.getParameter("password");
String msg = "身份验证失败";
if ("admin".equals(username) && "123".equals(password)){
msg = "身份验证成功";
}
// 响应ajax需要的数据。使用HttpServletResponse输出数据
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.println(msg);
out.close();
}
} <servlet>
<servlet-name>LoginAjaxServlet</servlet-name>
<servlet-class>com.km.controller.LoginAjaxServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>LoginAjaxServlet</servlet-name>
<url-pattern>/logAjax</url-pattern>
</servlet-mapping>JSP显示页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>局部刷新-ajax-GET请求方式</title>
<script type="text/javascript">
//使用内存中的异步对象，代替浏览器发送请求。异步对象使用js创建和管理的。
function doAjax() {
// 1、创建异步对象
var xmlHttp = new XMLHttpRequest();
// 2、绑定事件
xmlHttp.onreadystatechange = function () {
// 处理服务器端返回的数据，更新当前页面
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
var data = xmlHttp.responseText;
//更新dom对象，更新页面数据
document.getElementById("mydata").innerText = data;
}
}
// 3、初始请求数据，开启通道，但不发送请求
// 获取dom对象的value属性值
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var param = "username="+ username +"&password="+ password ;
// 解决get请求中的缓存问题，加入“时间戳”
var timeStamp = new Date().getTime();
xmlHttp.open("get", "${pageContext.request.contextPath}/logAjax?"+param+"&_="+timeStamp, true);
// 4、发送数据
xmlHttp.send();
}
</script>
</head>
<body>
<p>局部刷新ajax-验证信息</p>
<div>
<!-- 没有使用form -->
账号：<input type="text" id="username"/><br/>
密码：<input type="password" id="password"/><br/>
<input type="button" value="验证" onclick="doAjax()"/>
<br/>
<br/>
<br/>
<div id="mydata">加载。。。</div>
</div>
</body>
</html>测试符合结果。
【注意】解决get请求中的缓存问题，请求地址加入“时间戳”
ajax实现Post请求方式
Servlet和上面的案例一样，只是方法变成doPost()
JSP显示页面，只有ajax部分不同，只更改ajax
<script type="text/javascript">
//使用内存中的异步对象，代替浏览器发送请求。异步对象使用js创建和管理的。
function doAjax() {
// 1、创建异步对象
var xmlHttp = new XMLHttpRequest();
// 2、绑定事件
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
var data = xmlHttp.responseText;
//更新dom对象，更新页面数据
document.getElementById("mydata").innerText = data;
}
}
// 3、初始请求数据，开启通道，但不发送请求
// 获取dom对象的value属性值
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var param = "username="+ username +"&password="+ password ;
xmlHttp.open("post", "${pageContext.request.contextPath}/logAjax", true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
// 4、发送数据(请求体)
xmlHttp.send(param);
}
</script>JQuery
1、jQuery是js库，库：相当于java的工具类，库是存放东西的，jQuery是存放js代码的地方，放的用js代码写的function。
使用JQuery，需要导入JQuery库。点击链接官网自行下载。
dom对象和jquery对象
dom对象，使用javascript的语法创建的对象叫做dom对象， 也就是js对象。
var obj= document.getElementById("txt1"); obj是dom对象，也叫做js对象。
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对象才可以。
选择器
就是一个字符串， 用来定位dom对象的。定位了dom对象，就可以通过jquery的函数操作dom。
常用的选择器：
1） id选择器， 语法： $("#dom对象的id值")
通过dom对象的id定位dom对象的。 通过id找对象， id在当前页面中是唯一值。
2） class选择器， 语法： $(".class样式名)
class表示css中的样式， 使用样式的名称定位dom对象的。
3） 标签选择器， 语法： $("标签名称")
使用标签名称定位dom对象的
表单选择器
使用<input>标签的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
each语法
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) { } )
jquery中给dom对象绑定事件
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() { 处理按钮单击 } )
使用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",
url:"bmiAjax",
type:"get",
error:function(){
//请求出现错误时，执行的函数
},
success:function( data ) {
// data 就是responseText, 是jquery处理后的数据。
}
})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)url：请求的地址
6)type：请求方式，get或者post， 不用区分大小写。 默认是get方式。
7)error： 一个function ，表示当请求发生错误时，执行的函数。
error:function() { 发生错误时执行 }
8)sucess：一个function , 请求成功了，从服务器端返回了数据，会执行success指定函数，之前使用XMLHttpRequest对象， 当readyState==4 && status==200的时候。
主要使用的是 url , data ,dataType, success
下载的JQuery库文件，放到webapp下，JSON数据格式还需要JSON依赖
$(function () {
// $(function())在页面的dom的对象加载成功后执行的函数，此时发起ajax
$.ajax({
url:"${pageContext.request.contextPath}/logAjax",
date:{
"username":"zhangsan",
"password":"123"
},
type:"get",
dataType:"json",
success:function (resp) {
alert(resp);
}
})
6646
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
