十二、Ajax
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
作用:
AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
使用Javascript向服务器提出请求并处理响应而不阻塞用户！核心对象XMLHTTPRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与Web服务器交换数据。
AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。
AJAX 可使因特网应用程序更小、更快，更友好。
Ajax.png
一、ajax入门案例
获取XMLHttpRequest对象
对于不同的浏览器，获取方式有区别
function getXMLHttpRequest() {
var xmlhttp;
if (window.XMLHttpRequest) {// code for all new browsers
xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {// code for IE5 and IE6
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
设置回调函数(onreadystatechange)
xmlHttp.onreadystatechange=function(){ };
目的是服务器端响应完成后，浏览器端可以知道，并完成后续工作。
open操作
xmlHttp.open(“GET”,”/day/ajax”);
设置访问的资源路径以及请求方式
send操作
xmlhttp.send(null);
发送请求
二、原生js的Ajax
XMLHttpRequest之API详解
Ajax 的核心是 JavaScript 对象 XmlHttpRequest。该对象在 Internet Explorer 5 中首次引入，它是一种支持异步请求的技术。
简而言之，XmlHttpRequest 使您可以使用 JavaScript 向服务器提出请求并处理响应，而不阻塞用户。
XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。
XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。
onreadystatechange属性
当XMLHttpRequest对象的状态改变时会调用的一个函数.
readyState属性
对于XMLHttpRequest对象，它有一个属性readyState,它有五个状态
0 创建XMLHttpRequest对象.
1 当open时
2 当send时
3 响应头已经返回，但响应正文没有完成，也就是响应没有完全完成.
4 响应完成了
一般情况下,在回调的函数中，我们都是判断
if(xmlhttp.readyState==4&&xmlhttp.status==200)
来接收服务器端响应的信息.
status属性
由服务器返回的 HTTP 状态代码，如 200 表示成功，而 404 表示 "Not Found" 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。
responseText属性
目前为止为服务器接收到的响应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串。
如果 readyState 小于 3，这个属性就是一个空字符串。当 readyState 为 3，这个属性返回目前已经接收的响应部分。如果 readyState 为 4，这个属性保存了完整的响应体。
如果响应包含了为响应体指定字符编码的头部，就使用该编码。否则，假定使用 Unicode UTF-8。
responseXML属性
对请求的响应，解析为 XML 并作为 Document 对象返回。
open方法
初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。
xmlhttp.open(请求方式,url);
请求方式: POST GET
路径:客户端路径 格式 /工程名/资源路径
如果是GET方式，想要向服务器发送请求，并且携带请求参数，可以直接在url后面连接。
如果是POST方式,想要向服务器发送请求，并且携带请求参数,我们需要在send时传递参数
send方法
发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。
如果请求方式是post,并且要携带参数，可以通过send的参数来传递
setRequestHeader方法
向一个打开但未发送的请求设置或添加一个 HTTP 请求。
如果请求方式是POST,并且要携带参数，需要设置一个请求头.
setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");
中文乱码问题
get请求需要在发送请求的时候对中文进行编码,如下:
中文乱码问题.png
服务器端处理方式和之前request的处理乱码方式一样.
Ajax开发步骤：
- 获得XMLHttpRequest对象.
- IE将XMLHttpRequest封装到一个ObjectXActive插件中.
- Firefox直接可以创建XMLHttpRequest.
- 设置状态改变触发一个函数.
- 打开一个链接.
- 发送请求.
AJAX的GET入门
创建XMLHttpRequest
function createXMLHttpRequest() {
var xmlHttp;
try { // Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
try {// Internet Explorer
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
return xmlHttp;
}
AJAX的代码：
function loadData() {
// 1.创建异步XMLHttpRequest对象
var xhr = createXMLHttpRequest();
// 2.设置状态改变触发一个函数
xhr.onreadystatechange = function(){
// 回调函数.
if(xhr.readyState == 4){// 请求发送完成
if(xhr.status == 200){// 响应也正确
var data = xhr.responseText;
document.getElementById("d1").innerHTML=data;
}
}
}
// 3.打开一个连接：
xhr.open("GET","/WEB15/ServletDemo1",true);
// 4.发送请求
xhr.send(null);
}
AJAX的POST入门
function loadData(){
// 1.创建异步对象
var xhr = createXMLHttpRequest();
// 2.设置状态改变触发的函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
document.getElementById("d1").innerHTML=xhr.responseText;
}
}
}
// 3.打开连接
xhr.open("POST","/WEB15/ServletDemo2",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 4.发送数据
xhr.send("name=李四&password=456");
}
使用AJAX完成用户名异步校验
在注册页面中,当输入了用户名之后,光标离开文本框,显示用户名是否已经存在.
用户名是否已经存在,需要到后台的数据库进行查询的.
使用AJAX完成用户名异步校验.png
步骤分析:
- 创建一个用户表
- 设计一个注册页面:
- 在用户名文本框上绑定一个事件:onblur
- 在JS的函数中使用AJAX异步向Servlet发送请求.
- 在Servlet中接收参数-->调用业务层-->调用DAO
- 查询到了：用户名已经存在
- 没有查询到：用户名可以使用
创建用户表:
CREATE TABLE `user` (
`id` INT(11) NOT NULL AUTO_INCREMENT,
`username` VARCHAR(20) DEFAULT NULL,
`password` VARCHAR(20) DEFAULT NULL,
`email` VARCHAR(20) DEFAULT NULL,
`name` VARCHAR(20) DEFAULT NULL,
`sex` VARCHAR(10) DEFAULT NULL,
`birthday` DATE DEFAULT NULL,
`hobby` VARCHAR(50) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=INNODB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;
INSERT INTO `user`(`id`,`username`,`password`,`email`,`name`,`sex`,`birthday`,`hobby`) VALUES (1,'bbb','123','123@163.com','张三','男','1992-01-02','篮球, 足球, 排球'),(2,'ccc','123','ccc@itcast.cn','李四','女','1992-03-20','排球, 乒乓球'),(3,'aaa','123','aaa@itcast.cn','王守义','男','1990-08-11','足球, 排球'),(5,'tom','123','haha@qq.com','提莫','男',NULL,'篮球');
设计注册页面;
引入jar包和工具类;
创建包结构;
AJAX异步校验用户名:
function checkUsername(){
// 获得文本框的值:
var username = document.getElementById("username").value;
// 创建对象:
var xhr = createXMLHttpRequest();
// 2.状态改变触发一个函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
// 获得到响应内容:
var data = xhr.responseText;
if(data == 1){
// 可以使用
document.getElementById("s1").innerHTML = "<font color='green'>用户名可以使用</font>";
document.getElementById("regBut").disabled=false;
}else if(data == 2){
// 已经存在
document.getElementById("s1").innerHTML = "<font color='red'>用户名已经被使用</font>";
document.getElementById("regBut").disabled=true;
}
}
}
}
// 3.打开连接
xhr.open("GET","/WEB15/ServletDemo3?username="+username,true);
// 4.发送数据
xhr.send(null);
}
三、jQuery的Ajax
load
要求:
jquery对象调用
格式:
load(url,[data],[callback])
参数:
url:请求路径
data:请求参数 格式为json
若有此参数,请求方式为post
若无此参数,请求方式为get
callback:成功之后回调,具有三个参数
$.get
发送get请求
格式:
$.get(url,[data],[callback],[type]);
参数:
type:返回内容的格式有如下取值
xml,html,script,json,text,_default
$.post
发送post请求
格式:
$.post(url,[data],[callback],[type]);
$.ajax
底层是原始的ajax请求方式
格式1:
$.ajax(url,[settings])
格式2:setting可以使用json格式
jQuery.ajax(settings)
参数:
async 设置是否异步，true：表示异步（ajax）
type 设置请求方式。例如：get、post
url 设置请求路径
data 请求参数
dataType 设置数据转换类型，例如：xml, html, script, json
success 成功回调
error 错误回调
例如:
$.ajax({
"async":true,
"type":"POST",
"url":url,
"data":params,
"success":function(data){
alert(data);
},
"error" : function(){
alert("错误");
}
});
表单序列化
serialize() 将表单中所有内容转成字符串。
所有内容：有name，有值（非空）--文本有数据，单选多选选中，下拉列表选中等
字符串：key=value&key=value&....
serializeArray()将表单中所有内容转成json数组
案例一：使用JQuery完成异步用户名的校验
$(function(){
// 给用户名的文本框绑定一个事件：
$("#username").blur(function(){
// 获得文本框的值:document.getELementById().value;
var username = $(this).val();
// 使用jquery的ajax的操作异步发送请求.
$.post("/WEB15/ServletDemo3",{"username":username},function(data){
if(data==1){
// 用户名可以使用
$("#s1").html("<font color='green'>用户名可以使用</font>");
$("#regBut").prop("disabled",false);
}else if(data==2){
// 用户名已经存在
$("#s1").html("<font color='red'>用户名已经被占用</font>");
$("#regBut").prop("disabled",true);
}
});
});
});
案例二：使用JQuery完成仿百度的信息提示
在一个搜索页面中,键盘输入一些信息,在文本框下面给出一些提示信息(需要从服务器端进行查询的).
使用JQuery完成仿百度的信息提示.png
步骤分析：
1.创建一个数据库和表:
2.设计一个页面
3.文本框绑定一个事件.keyup
4.在keyup所触发函数中:
5.获得文本框的值.
6.将这个值异步提交到服务器.$.post();
7.提交到Servlet：
8.接收参数:
9.调用业务层--调用DAO: select * from .. Where xx like ?;
10.查询之后页面跳转把数据显示到一个表格中.
创建数据库和表:
CREATE TABLE words(
id INT PRIMARY KEY AUTO_INCREMENT,
word VARCHAR(20)
);
设计一个页面：
<center><h1>百度一下</h1></center>
<center><input type="text" name="word" id="word" style="width:300px"/><input type="button" value="百度一下"><center>
<div id="d1" style="display:none;position:absolute;top:110px;left:494px;border:1px solid blue;width:300px;height:200px;"></div>
为文本框绑定事件:编写jquery代码
$(function(){
// 为文本框绑定事件:
$("#word").keyup(function(){
// 获得文本框的值:
var val = $(this).val();
if(val != ""){
// 异步将这个值提交给服务器:
$.post("/WEB15/ServletDemo5",{"val":val},function(data){
$("#d1").show();
$("#d1").html(data);
});
}else{
$("#d1").hide();
}
});
});
四、js的Ajax和jQuery的Ajax对比
- js的Ajax
$('#send').click(function(){
//请求的5个阶段，对应readyState的值
//0: 未初始化，send方法未调用；
//1: 正在发送请求，send方法已调用；
//2: 请求发送完毕，send方法执行完毕；
//3: 正在解析响应内容；
//4: 响应内容解析完毕；
var data = 'name=yang';
var xhr = new XMLHttpRequest(); //创建一个ajax对象
xhr.onreadystatechange = function(event){ //对ajax对象进行监听
if(xhr.readyState == 4){ //4表示解析完毕
if(xhr.status == 200){ //200为正常返回
console.log(xhr.responseText)
}
}
};
xhr.open('POST','url',true); //建立连接，参数一：发送方式，
二：请求地址，三：是否异步，true为异步
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
//可有可无
xhr.send(data); //发送
});
- jQuery的ajax
$.ajax({
url:'/comm/test1.php',
type:'POST', //GET
async:true, //或false,是否异步
data:{
name:'yang',age:25
},
timeout:5000, //超时时间
dataType:'json', //返回的数据格式：json/xml/html/script/jsonp/text
beforeSend:function(xhr){
console.log(xhr)
console.log('发送前')
},
success:function(data,textStatus,jqXHR){
console.log(data)
console.log(textStatus)
console.log(jqXHR)
},
error:function(xhr,textStatus){
console.log('错误')
console.log(xhr)
console.log(textStatus)
},
complete:function(){
console.log('结束')
}
})
