目录
一、 Ajax是什么？
概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML
Ajxs的全称是Asynchronous JavaScript and XML,他并不是一种全新的技术，而是由JavaScript、XML、CSS等集中现有的技术整合而成的。
1.异步和同步：客户端和服务器端相互通信的基础上
-> 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
->客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作
2.Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
->通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
-> 传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
二、实现方式：
1.原生的JS实现方式（了解）
javascript代码如下（示例）
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script>
function aaa(){
var id= document.getElementById("uname").value;
//接下来就要去数据库验证是否存在这个uname
//Ajax核心对象--XMLHttpRequest对象
//1.创建核心对象
var xr;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xr = new XMLHttpRequest();
} else {// code for IE6, IE5 兼容老版IE浏览器
xr = new ActiveXObject("Microsoft.XMLHTTP");
}
//设置回调函数 记住caLLBack
xr.onreadystatechange=callBack;
//创建请求
//2. 建立连接
/* 参数：
1. 请求方式：GET、POST
* get方式，请求参数在URL后边拼接。send方法为空参
* post方式，请求参数在send方法中定义
2. 请求的URL：
3. 同步或异步请求：true（异步）或 false（同步）
*/
xr.open("get","Do_uname?uname="+id,true);
//发送请求
//3、将请求发送到服务器。
xr.send(null);
//声明回调函数
//接收回来的请求
//4.接受并处理来自服务器的响应结果
//获取方式 ：xmlhttp.responseText
//当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
//接收服务器端的响应(readyState=4表示请求已完成且响应已就绪 status=200表示请求响应一切正常)
function callBack() {
//接收返回的字符串文本
//Ajax有4次结果返回，我们只取最后一次
//判断readyState就绪状态是否为4，判断status响应状态码是否为200
if (xr.readyState == 4 && xr.status == 200) {
// alert(xr.responseText)
//获取服务器的响应结果
if (xr.responseText.trim() == "true") {
document.getElementById("message").innerHTML = "该用户名已被注册！";
} else {
document.getElementById("message").innerHTML = "该用户名可以注册！";
}
}
}
}
</script>
</head>
<body>
请输入用户名：<input type="text" id="uname" onblur="aaa()"><span id="message"></span><br>
<button onclick="aaa()">点我查询</button>
</body>
</html>
java后端接收代码如下（示例）：
package Servlet;
import Service.bananaService;
import Service.impl.bananaServiceimpl;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/Do_uname")
public class Do_uname extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//设置resp编码格式为utf-8 两种方式都可以
resp.setContentType("text/html;charset=utf-8");
resp.setCharacterEncoding("utf-8");
String uname=req.getParameter("uname");
System.out.println("接收到："+uname);
bananaService banana=new bananaServiceimpl();
boolean b=banana.getbname(uname);
//返回结果给Ajax 用out对象输出返回
PrintWriter out= resp.getWriter();
if(b){
out.print("true");
}else{
out.print("false");
}
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
}运行结果如下（示例）：
2.XMLHttpRequest对象对象API
XMLHttpRequest对象的常用方法
| 方法 | 描述 |
| abort() | 停止当前请求 |
| getAllResponseHeaders() | 把HTTP请求的所有相应首部作为键/值对返回。 |
| getResponseHeader(“header”) | 返回指定首部的串值。 |
| open(“method”,“url”) | 建立对服务器的调用。method参数可以是GET、POST或PUT等；url参数可以是相对URL或绝对URL。这个方法还包括3个可选参数。 |
| send(content) | 向服务器发送请求。 |
| setRequestHeader(“header”,“value”) | 把指定首部设置为所提供的值，在设置任何首部之前必须先调用open()方法。 |
XMLHttpRequest对象的常用属性
| 属性 | 描述 |
| onreadystatechange | 每个状态改变时都会触发这个事件处理程序，通常会调用一个JavaScript函数(回调函数) |
| readyState | 返回请求的当前状态，取值从0到4变化。 0——未初始化 1——已初始化 2——请求发送完成 3——开始读取响应 4——读取响应结束 |
| responseText | 服务器的响应，表示为一个字符串 |
| responseXML | 服务器的响应，表示为XML，这个对象可以解析为一个DOM对象 |
| status | 返回当前请求的HTTP状态码。 200——正确返回 404——找不到访问对象 500——服务器内部错误 403——没有访问权限 |
| statusText | HTTP状态的对应文本 |
3.JQeury实现方式
3.1 语法
//语法
$.ajax({settings})
settings方法参数，一般是键值对集合3.2 $.ajax()方法的常用配置参数
| 参数 | 类型 | 说明 |
| url | String | 请求的URL，默认为当前地址 |
| type | String | 请求方法(POST或GET,默认为GET),jQuey 1.9.0之后的版本可以只用method代替type |
| data | PlainObject或String或Array | 发送到服务器端的数据 |
| dataType | String | 预期服务器端返回的数据类型，可用类型有XML、HTML、Script、JSON、JSONP、Text |
| berforeSend | Function(jqXHR jqxhr,PlainObject settings) | 发送请求前调用的函数，可用于设置请求头等，返回false将终止请求。 jqxhr参数：可选，jqXHR是XMLHttpRequest的超集。 setting参数：可选，当前ajax()方法的setting对象 |
| success | Function(任意类型 result,String textStatus,jqXHR jqxhr) | 请求被成功处理时调用的函数 result参数：可选，由服务器返回数据 textStatus参数：可选，描述请求状态的字符串 jqxhr参数：可选 |
| error | Function(jqXHR jqxhr ,String textStatus,jqXHR jqxhr) | 请求失败是调用的函数 jqxhr参数：可选 extStatus参数：可选，错误信息 errorTheown参数：可选，HTTP状态的文本描述 |
| complete | Function(jqXHR jqxhr ,String textStatus) | 请求完成后调用的函数(无论是否成功或失败均调用)。 jqxhr参数：可选 textStatus参数：可选，描述请求状态的字符串 |
| timeout | Number | 设置请求超时时间 |
| global | Boolean | 设置是都出发全局Ajxs事件，默认为true |
简易版代码示例：
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="js/jquery.js"></script>
<script>
function ccc(){
//第一步：接收值
var uname = $("#uname").val();
//第二步：以ajax发出请求
$.ajax({
"url":"Do_select", //要请求的URL路径
"type":"post", //发送请求的方式
"dataType":"json", //指定响应的数据格式
"data":"uname="+uname, //要发送到服务器的数据
"success":function(data){ //响应成功后要执行的代码(回调函数)
$('table').empty();
var nodes="<tr>"+
"<td>香蕉编号</td>"+
"<td>香蕉名称</td>"+
"<td>香蕉价格</td>"+
"<td>香蕉颜色</td>"+
"<td>种植时间</td>"+
"</tr>";
$("table").append($(nodes));
for(var i=0;i<data.length;i++){
var node = "<tr>";
node+="<td>"+data[i].bid+"</td>";
node+="<td>"+data[i].bname+"</td>";
node+="<td>"+data[i].bprice+"</td>";
node+="<td>"+data[i].bcolor+"</td>";
node+="<td>"+data[i].btime+"</td>";
node+="</tr>";
$("table").append($(node));
}
},
"error":function(){ //请求失败后要执行的代码
alert("报错");
}
});
}
</script>
</head>
<body>
请输入香蕉名称：<input type="text" id="uname"/>
<span id="message"></span>
<button onclick="ccc()">点我查询</button>
<br>
<span>
香蕉列表
</span>
<table border="1">
<tr>
<td>香蕉编号</td>
<td>香蕉名称</td>
<td>香蕉价格</td>
<td>香蕉颜色</td>
<td>种植时间</td>
</tr>
</table>
</body>
</html>
简易版java后端接收代码如下：
package Servlet;
import Service.bananaService;
import Service.impl.bananaServiceimpl;
import com.alibaba.fastjson.JSON;
import entity.banana;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
@WebServlet("/Do_select")
public class Do_select extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//设置resp编码格式为utf-8 两种方式都可以
resp.setContentType("text/html;charset=utf-8");
String uname=req.getParameter("uname");
//返回结果给AJAX 用out对象输出返回
PrintWriter out = resp.getWriter();
bananaService banana=new bananaServiceimpl();
if(uname==""){
List<banana>list=banana.getall();
//如果java结果要返回对象或者集合
//一定要手动先转成JSON格式 再out.print返回
String result = JSON.toJSONString(list);
out.print(result);
}else{
List<banana>list=banana.likebanana(uname);
//如果java结果要返回对象或者集合
//一定要手动先转成JSON格式 再out.print返回
String result = JSON.toJSONString(list);
out.print(result);
}
}
}
三、JSON数据格式
1.什么是JSON数据
JSON（JavaScript Object Notation）：一种轻量级的数据交换格式 采用独立于语言的文本格式 通常用于在客户端和服务器之间传递数据
JSON的优点：轻量级交互语言，结构简单，易于解析
2.定义JSON数据的格式
//定义JSON对象
//语法
var JSON对象 = { "name" : value, "name" : value, …… };
//示例
var person = { "name" : "张三", "age" : 30, "spouse" : null };
//定义JSON数组
//语法
var JSON数组 = [ value, value, …… ];
//示例
var countryArray = [ "中国", "美国", "俄罗斯" ];
var personArray = [ { "name":"张三", "age":30 },
{ "name":"李四", "age":40 } ];
3.访问JSON数据格式
var person = { "name" : "张三", "age" : 30, "spouse" : null };
alert(person.name);
alert(person.age);
var personArray = [ { "name":"张三", "age":30 },
{ "name":"李四", "age":40 } ];
$(personArray).each(function(){
alert(this.name);
alert(this.age);
})四、本章总结
- Ajax技术使用XMLHttpRequest对象以异步方式存在浏览器与服务器之间传递数据，并结合JavaSript丶DOM丶CSS等技术实现当前页面局部更新。
- jQuery提供了$.ajax()方法封装Ajax的基础实现，使开发Ajax应用更为简便。
- 使用JSON数据格式进行数据交互，在传输和解析方面具有明显优势。
3328
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
