Ajax的全称是：Asynchronous JavaScript And XML，指的是异步 JavaScript 及 XML（其实主要用的就是javascript技术），它不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。 Ajax的特点是异步 ，比如可以使用Ajax更新局部网页、使用Ajax在不刷新页面的情况下查询数据、验证用户注册的用户名是否唯一等。
一.Ajax
1. 概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML
AJAX = 异步的javascript和XML（Asynchronous Javascript and XML）
它不是一门编程语言，而是利用JavaScript在保证页面不被刷新、页面链接不改变的情况下与服务器交换数据并更新部分网页的技术。
对于传统的网页，如果想更新内容，那么必须要刷新整个页面，但有了Ajax，便可以在页面不被全部刷新的情况下更新其内容。在这个过程中，页面实际上是在后台与服务器进行了数据交互，获得数据之后，再利用JavaScript改变页面，这样页面内容就会更新了。（微博页面加载过程的例子，加载一会 下方才会出现内容，这其实就是Ajax加载的过程。）
简言之，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
1. 异步和同步：客户端和服务器端相互通信的基础上
- 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
- 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。
- Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 - 传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
- 提升用户的体验
2.Ajax的关键元素：
- JavaScript语言：Ajax技术的主要开发语言；
- XML / SON / HTML等：用来封装请求或响应的数据格式；
- DOM文档对象模型：通过 DOM 属性或方法修改页面元素，实现页面局部刷新；
- CSS：改变样式，美化页面效果，提升用户体验度；
- Ajax 引擎 ：即 XMLHttpRequest 对象，以异步方式在客户端与服务器端之间传递数据
3.实现方式：
原生方式与jQuery方式：
1. 创建ajax对象
let xhr = new XMLHttpRequest();
2. 告诉ajax请求方式和请求地址
xhr.open(请求方式，请求地址);
3. 发送请求
xhr.send();
4. 获取服务器返回的数据
xhr.οnlοad=function(){
xhr.responseText;
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>js的原生ajax</title>
<style>
span{
color: red;
}
</style>
</head>
<body>
<input id="username" type="text" placeholder="请输入用户名"> <span id="userwarn"></span>
<script>
document.getElementById('username').οnblur=function () {
console.log(this.value);
// 1.创建ajax对象
let xhr = new XMLHttpRequest();
// 2.告诉ajax请求方式和请求地址
xhr.open('get','http://localhost:8080/check?username='+this.value)
// 3.发送请求
xhr.send();
// 4.获取服务器返回数据
xhr.οnlοad=function () {
console.log(xhr.responseText);// 返回的字符串
document.getElementById('userwarn').innerText=xhr.responseText;
}
}
</script>
</body>
</html>
JQuery的Ajax插件
* 语法：
$.ajax({name:value,name:value})
* 参数：
url:请求地址
type：请求方式 （get：大小有限制、post：大小没有限制）
data：请求参数
success：请求成功时，执行的回调函数
-------
error：请求失败时，执行的回调函数
dataType：预期服务器返回的数据类型：text、json
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jq的ajax函数</title>
<script src="../js/jquery-3.2.1.min.js"></script>
<style>
span{
color: red;
}
</style>
</head>
<body>
<input id="username" type="text" placeholder="请输入用户名"><span id="userwarn"></span>
<script>
// 给文本框绑定失去焦点事件
$('#username').blur(function () {
// 使用ajax函数发送请求
$.ajax({
url:"http://localhost:8080/check",
type:"post",
data:"username="+$(this).val(),
success:function (resp) {
// 实现局部刷新
$('#userwarn').text(resp);
},
error:function () {
alert('服务器繁忙，请稍后重试...')
},
// dataType:"json" // 相当于把 json字符串 转为了json对象
})
})
</script>
</body>
</html>
1. 原生的JS实现方式
//1.创建核心对象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//2. 建立连接
/*
参数：
1. 请求方式：GET、POST
* get方式，请求参数在URL后边拼接。send方法为空参
* post方式，请求参数在send方法中定义
2. 请求的URL：
3. 同步或异步请求：true（异步）或 false（同步）
*/
xmlhttp.open("GET","ajaxServlet?username=tom",true);
//3.发送请求
xmlhttp.send();
//4.接受并处理来自服务器的响应结果
//获取方式 ：xmlhttp.responseText
//什么时候获取？当服务器响应成功后再获取
//当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
xmlhttp.onreadystatechange=function()
{
//判断readyState就绪状态是否为4，判断status响应状态码是否为200
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//获取服务器的响应结果
var responseText = xmlhttp.responseText;
alert(responseText);
}
}
2. JQeury实现方式
1. $.ajax()
* 语法：$.ajax({键值对});
//使用$.ajax()发送异步请求
$.ajax({
url:"ajaxServlet1111" , // 请求路径
type:"POST" , //请求方式
//data: "username=jack&age=23",//请求参数
data:{"username":"jack","age":23},
success:function (data) {
alert(data);
},//响应成功后的回调函数
error:function () {
alert("出错啦...")
},//表示如果请求响应出现错误，会执行的回调函数
dataType:"text"//设置接受到的响应数据的格式
});
2. $.get()：发送get请求
* 语法：$.get(url, [data], [callback], [type])
* 参数：
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型
3. $.post()：发送post请求
* 语法：$.post(url, [data], [callback], [type])
* 参数：
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型4.jquery-ajax方法详解：
方法一：jquery的$.ajax()方法
参数如下：
1.url:
要求为String类型的参数，（默认为当前页地址）发送请求的地址。2.type:
要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。3.timeout:
要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。4.async:
要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。5.cache:
要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。6.data:
要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看 processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。7.dataType:
要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下： xml：返回XML文档，可用JQuery处理。 html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。 script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。 json：返回JSON数据。 jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。 text：返回纯文本字符串。8.beforeSend：
要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。 function(XMLHttpRequest){ this; //调用本次ajax请求时传递的options参数 }9.complete：
要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。 function(XMLHttpRequest, textStatus){ this; //调用本次ajax请求时传递的options参数 }10.success：
要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。 (1)由服务器返回，并根据dataType参数进行处理后的数据。 (2)描述状态的字符串。 function(data, textStatus){ //data可能是xmlDoc、jsonObj、html、text等等 this; //调用本次ajax请求时传递的options参数 }11.error:
要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下： function(XMLHttpRequest, textStatus, errorThrown){ //通常情况下textStatus和errorThrown只有其中一个包含信息 this; //调用本次ajax请求时传递的options参数 }12.contentType：
要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。13.dataFilter：
要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。 function(data, type){ //返回处理后的数据 return data; }14.dataFilter：
要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。 function(data, type){ //返回处理后的数据 return data; }15.global：
要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。16.ifModified：
要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。17.jsonp：
要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。18.username：
要求为String类型的参数，用于响应HTTP访问认证请求的用户名。19.password：
要求为String类型的参数，用于响应HTTP访问认证请求的密码。20.processData：
要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。21.scriptCharset：
要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用
方法二.jquery的get()方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据
语法:$.get(URL,callback);
url参数规定你请求的路径，是必需参数，callback参数为数据请求成功后执行的函数
$.get('./data/getJSON.json',function(data,status){
console.log(status); //success 200状态码 ok的意思
})
语法：
$.get(url,success);
参数：
url:请求地址
success：请求成功时的回调函数
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jq的get函数</title>
<script src="../js/jquery-3.2.1.min.js"></script>
<style>
span{
color: red;
}
</style>
</head>
<body>
<input id="username" type="text" placeholder="请输入用户名"><span id="userwarn"></span>
<script>
// 给文本框绑定失去焦点事件
$('#username').blur(function () {
// 使用get函数发送
let url = 'http://localhost:8080/check?username='+$(this).val();
$.get(url,function (resp) {
// 局部刷新
$('#userwarn').text(resp);
});
})
</script>
</body>
</html>方法三..jquery的post()方法
与get()方法相比，post()方法多用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面
语法：$.post(URL,data,callback);
url参数规定你请求的路径，是必需参数，可选的data参数是连同请求发送的数据。可选的callback参数为数据请求成功后执行的函数
$.post('/index',{name:'张'},function(data,status){
console.log(status);})
语法：
$.post(url,data,success);
参数：
url：请求地址
data：请求参数
success：请求成功时的回调函数
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jq的post函数</title>
<script src="../js/jquery-3.2.1.min.js"></script>
<style>
span{
color: red;
}
</style>
</head>
<body>
<input id="username" type="text" placeholder="请输入用户名"><span id="userwarn"></span>
<script>
// 给文本框绑定失去焦点事件
$('#username').blur(function () {
// 使用post函数发送请求
let url='http://localhost:8080/check';
let data='username='+$(this).val();
$.post(url,data,function (resp) {
// 局部刷新
$('#userwarn').text(resp);
})
})
</script>
</body>
</html>注：ajax：异步提交和页面局部刷新的技术
二.案例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>输入搜索</title>
<script type="text/javascript" src="../lib/jquery-3.4.1.js"></script>
<style type="text/css">
.content{
margin: 200px auto;
width: 650px;
text-align: center;
}
img{
margin-bottom: 80px;
}
input[type="text"]{
width: 530px;
height: 45px;
font-size: 16px;
}
input[type="button"]{
width: 100px;
height: 48px;
background-color: lightgray;
color: #000;
font-size: 15px;
}
#show{
position: absolute;
width: 530px;
border: 1px solid lightgray;
border-top: 0px;
margin-left: 5px;
}
</style>
</head>
<body>
<div class="content">
<img src="./img/logo.png" alt="">
<input type="text" id="search" name="keyword">
<input type="button" value="搜索一下">
<div id="show" style="display: none"></div>
</div>
<script type="text/javascript">
$("body").click(function () {
$("#show").hide();
})
$("#search").keyup(function () {
if (this.value.trim().length==0) {
return;
}
let keywork = this.value.trim();
$.ajax({
url:"http://localhost:8080/search",
data:`keyword=${keywork}`,
type:"get",
success:function (resp) {
$("#show").show();
$("#show").empty();
$("#show").css("height",resp.length*25+15);
for (let ele of resp) {
$("#show").append(`<div style='cursor: pointer; text-align: left;height: 25px; padding-left: 6px'
οnmοuseοver='gaoliang(this)' οnmοuseοut='huifu(this)' οnclick='settext(this)'>${ele}</div>`);
}
},
error:function (error) {
$("#show").hide();
}
})
})
function gaoliang(obj) {
$(obj).css(`background-color`,`lightgray`)
}
function huifu(obj) {
$(obj).css(`background-color`,`white`)
}
function settext(obj) {
$("#search").val($(obj).text());
$("#show").hide();
}
</script>
</body>
</html>三.JSON
json概述
* java对象表示形式
User user = new User();
user.setUsername("羿");
user.setAge(23);
user.setSex("男");
...
Product product = new Product();
product.setName("小米10");
product.setDesc("1亿像素的手机小王子");
* javaScript对象表示形式
let user ={"username":"后羿","age":23,"sex":"男"}
let product = {"name":"小米10","desc":"1亿像素的手机小王子"}可以取代XML笨重的数据结构，和xml相比：更小、更快，更易解析
json、xml作用：作为数据的载体，在网络中传输
json语法：
* 对象类型
{name:value,name:value}
* 数组类型
[
{name:value,name:value},
{name:value,name:value},
{name:value,name:value}
]
* 复杂对象
{
name:value,
list:[{name:value},{},{}]
user:{name:value}
}<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>JSON基础语法</title>
</head>
<body>
</body>
<script>
// 1.描述用户对象（张丰、男、3岁）
let user = {"username":"张丰","sex":"男","age":3};
// alert(user)
// alert(user.username +" " +user.age);
// 2.描述用户数组（张三、张山、张忌）
let array = [
{"username":"张三","sex":"男","age":13},
{"username":"张山","sex":"男","age":2},
{"username":"张忌","sex":"男","age":2}
];
/* for (let obj of array) {
console.log(obj.username +" "+obj.sex);
}*/
// 3.描述宝（27岁，老婆、师傅）
let weiXiaoBao = {
"age":18,
"list":[
{"name":"儿","address":"扬州"},
{"name":"后","address":"岛国"}
],
"shifu":{"name":"浩南"}
};
console.log(weiXiaoBao);
console.log(weiXiaoBao.age); // 年龄
let laopos = weiXiaoBao.list; // list集合
for (let laopo of laopos) {
console.log(laopo.name +" "+laopo.address);
}
let shifu = weiXiaoBao.shifu; //
console.log(shifu.name);
</script>
</html>json格式转换
JSON对象与字符串转换的相关函数
语法：
1. JSON.stringify(object) 把json对象转为字符串
2. JSON.parse(string) 把字符串转为json对象<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>JSON格式转换</title>
</head>
<body>
<script>
let userStr = '{"username":"张丰","sex":"男","age":13}';
// alert(userStr);
// alert(userStr.username) 报错
//2. JSON.parse(string) 把字符串转为json对象
let user = JSON.parse(userStr);
// alert(user.username)
//1. JSON.stringify(object) 把json对象转为字符串
let str = JSON.stringify(user);
alert(str);
</script>
</body>
</html>
