AJAX全称为“AsynchronousJavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术。它不是一种新技术,是如下几种技术的组合应用:
基于web标准(standards-basedpresentation)XHTML+CSS的表示; 使用 DOM(DocumentObject Model)进行动态显示及交互; 使用 XML 和 XSLT 进行数据交换及相关操作; 使用 XMLHttpRequest 进行异步数据查询、检索; 使用 JavaScript将所有的东西绑定在一起。
问题: 怎么在保留当前页面信息的基础上显示新的信息呢 解决: 使用ajax 特点: 实现网页的局部刷新 应用前景: 搜索框提示语 地图 网页的其他功能 使用: ajax的访问原理
流程:
1、创建ajax引擎对象
2、声明监听函数
//判断ajax状态码
//判断响应状态码
//获取响应信息(普通字符串和json格式的字符串)
//处理响应
3、创建并发送ajax请求
创建请求(设置请求方式,设置请求地址,设置异步或者同步)
发送请求
4、其他处理
改动的参数就是上方的蓝色代码(第2-4个),分别为获取的输入框id,请求方式,url
ajax.open("get","my?uname='张三'&password='123'",true);
ajax.send(null);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send("method=login&uid=10");`
1**:请求收到,继续处理
2**:操作成功收到,分析、接受
3**:完成此请求必须进一步处理
4**:请求包含一个错误语法或不能完成
5**:服务器执行一个完全有效请求失败
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——交易成功
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到,但返回信息为空
205——服务器完成了请求,用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求
300——请求的资源可在多处得到
301——删除请求数据
302——在其他地址发现了请求数据
303——建议客户访问其他URL或访问方式
304——客户端已经执行了GET,但文件未变化
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码,现行版本中不再使用
307——申明请求的资源临时性删除
400——错误请求,如语法错误
401——请求授权失败
402——保留有效ChargeTo头响应
403——请求不允许
404——没有发现文件、查询或URl
405——用户在Request-Line字段定义的方法不允许
406——根据用户发送的Accept拖,请求资源不可访问
407——类似401,用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态,请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段,在当前请求资源范围内没有range指示值,请求也不包含If-Range请求头字段
417——服务器不满足请求Expect头字段指定的期望值,如果是代理服务器,可能是下一级服务器不能满足请求
500——服务器产生内部错误
501——服务器不支持请求的函数
502——服务器暂时不可用,有时是为了防止发生系统过载
503——服务器过载或暂停维修
504——关口过载,服务器使用另一个关口或服务来响应用户,等待时间设定值较长
505——服务器不支持或拒绝支请求头中指定的HTTP版本
jquery是js的一个轻量型框架,已经将js创建的操作进行了封装, 而ajax也是js的一部分,所以jQuery也已经将ajax进行了封装。
//get请求方式
$.get(url,data,fn)
//例如
$("#uname").blur(function(){
//get请求方式(url,json{},function(){})
$.get("data",{uname:$("#uname").val()},function(data){
alert(data);
});
//post请求方式
$.post(url,data,fn)
//例如
$.post("data",{uname:$("#uname").val()},function(data){
alert(data);
});
//ajax请求方式
$.ajax({json格式参数}):参数说明参照api
//例如
$.ajax({
type:"get",
url:"data",
data:"uname="+$("#uname").val(),
success:function(data){
alert(data);
}
})
url:请求地址 data:请求参数,参数格式为json对象 success: 请求成功后回调函数。参数:服务器返回数据,数据格式。 Ajax 事件。注意函数要声明一个形参,用来接收响应数据。 type:请求方式,为ajax请求方式独有 async (Boolean) : (默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。 … …
注:尤其重点记忆Ajax的方式,因为这种方式应用范围最广,其他属性请自行搜索jquey的API
JSON是一种轻量级数据交换格式。 json简单说就是js中的对象和数组,所以这两种结构就是对象和数组2种结构,你用的数据格式就是对象和数组的复合结构。
Json就是js创建对象的另一种格式,保证对象中数据的紧密性和完整性。
var 对象名={
键名:值,
键名:值,
...
键名:值
}
DROP TABLE IF EXISTS `t_user`;
CREATE TABLE `t_user` (
`uid` int(10) NOT NULL AUTO_INCREMENT,
`uname` varchar(100) NOT NULL,
`pwd` varchar(100) NOT NULL,
`sex` char(4) NOT NULL,
`age` int(3) NOT NULL,
`birthday` date NOT NULL,
PRIMARY KEY (`uid`)
) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=utf8;
INSERT INTO `t_user` VALUES ('8', '张三', '12345', '女', '22', '2018-07-10');
INSERT INTO `t_user` VALUES ('9', '李四', '123', '女', '22', '2018-07-18');
INSERT INTO `t_user` VALUES ('10', '王五', '123', '女', '22', '2018-07-12');
INSERT INTO `t_user` VALUES ('11', 'chy', '12345', '男', '24', '1996-06-07');
INSERT INTO `t_user` VALUES ('12', 'xyl', '12345', '男', '24', '2019-07-06');
-- dao层查询用到的语句
String sql="select * from t_user where uname=?";
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import cn.bjsxt.service.DataService;
import cn.bjsxt.service.impl.DataServiceImpl;
public class DataServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
//设置请求编码格式
req.setCharacterEncoding("utf-8");
//设置响应编码格式
resp.setContentType("text;charset=utf-8");
//获取请求信息
String uname=req.getParameter("uname");
String areaname=req.getParameter("areaname");
//处理请求信息
//创建业务层对象
DataService ds = new DataServiceImpl();
//检验用户名信息
boolean flag=ds.checkUnameInfoService(uname);
//响应处理结果
if (flag) {
resp.getWriter().write("true");
} else {
resp.getWriter().write("false");
}
}
}
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>DataServlet</servlet-name>
<servlet-class>servlet全限定路径</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>DataServlet</servlet-name>
<url-pattern>/data</url-pattern>
</servlet-mapping>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'reqJQuery.jsp' starting page</title>
<!-- 引入jquery文件 -->
<script type="text/javascript" src="js/j.js"></script>
<script type="text/javascript">
//页面加载成功,给html元素添加事件
$(function(){
$("#uname").blur(function(){
$.ajax({
type:"get",
url:"data",
data:"uname="+$("#uname").val(),
success:function(data){
alert(data+"uname="+$("#uname").val());
//通过下面两种方式,体会js和jquery获取方式节点以及设置css的不同
if(eval(data)){
//获取Span对象
//设置span颜色
$("#unameSpan").css("color","red");
//将数据填充到span中
$("#unameSpan").html("用户名已被注册");
}else{
//获取Span对象
var span=document.getElementById("unameSpan");
//设置span颜色
span.style.color="green";
//将数据填充到span中
span.innerHTML="用户名ok";
}
}
});
})
})
</script>
</head>
<body>
<h3>Jquery中的ajax的学习</h3> <hr />
用户名 : <input type="text" name="uname" id="uname" value="" onblur="checkUname()"/> <span id="unameSpan"></span>
</body>
</html>
public class User {
private int uid;
private String uname;
private int age;
private String fav;
public User() {
super();
}
public User(int uid, String uname, int age, String fav) {
super();
this.uid = uid;
this.uname = uname;
this.age = age;
this.fav = fav;
}
public int getUid() {
return uid;
}
public void setUid(int uid) {
this.uid = uid;
}
public String getUname() {
return uname;
}
public void setUname(String uname) {
this.uname = uname;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getFav() {
return fav;
}
public void setFav(String fav) {
this.fav = fav;
}
@Override
public int hashCode() {
final int prime = 31;
int result = 1;
result = prime * result + age;
result = prime * result + ((fav == null) ? 0 : fav.hashCode());
result = prime * result + uid;
result = prime * result + ((uname == null) ? 0 : uname.hashCode());
return result;
}
@Override
public boolean equals(Object obj) {
if (this == obj)
return true;
if (obj == null)
return false;
if (getClass() != obj.getClass())
return false;
User other = (User) obj;
if (age != other.age)
return false;
if (fav == null) {
if (other.fav != null)
return false;
} else if (!fav.equals(other.fav))
return false;
if (uid != other.uid)
return false;
if (uname == null) {
if (other.uname != null)
return false;
} else if (!uname.equals(other.uname))
return false;
return true;
}
@Override
public String toString() {
return "User [uid=" + uid + ", uname=" + uname + ", age=" + age
+ ", fav=" + fav + "]";
}
}
jdbc工具类以及相关jar包、jquery文件的导入、db.properties、service以及其实现类、dao层以及其实现类请自行解决