Asynchronous Javascript And XML”(异步JavaScript和XML),
并不是新的技术,只是把原有的技术,整合到一起而已。
1.使用CSS和XHTML来表示。
2. 使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。
Ajax一种页面局部刷的技术,用户体验好,并且服务器压力小
传统的用户交互 是整体页面刷新,服务器压力大,用户体验不好
当发出请求的同时并想接收数据处理一些事情的时候使用AJAX异步交互
<script type="text/javascript">
function loadName(){
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.onreadystatechange=function(){
//alert(xmlHttp.readyState+" "+xmlHttp.status);
if(xmlHttp.readyState==4 && xmlHttp.status==200){
alert(xmlHttp.responseText);
}
}
xmlHttp.open("get","getAjaxName",true);
xmlHttp.send(); //将请求发送到服务器
}
script>
- Ajax异步交互的核心,现在IE7 及以上浏览器都有内置的XMLHttpRequest对象,
- 老版本的IE5 IE6 使用 new ActiveXObject(“Microsoft.XMLHTTP”)对象
- 当请求发送到服务器的时候,我们需要执行一些基于响应的任务。
- 这个事件是监视我们的请求状态readyState(0-4),每当状态发生改变时候,就会触发该事件。
- 规定该事件是当请求完毕响应就绪的时候,触发该事件所调用的方法。
- 响应就绪值的是状态码 readyState 等于4 && status 等于 200
属性 | 描述 |
---|---|
onreadystatechange | 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 |
readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成,且响应已就绪 |
status | 200: “OK” ,,,,,404: 未找到页面 |
规定请求的类型、URL 以及是否异步处理请求。
method:使用get请求 或者是 post请求
url:请求的地址
async:true/false true表示异步请求 ,false表示同步请求
向服务器提交数据
string:仅用于post请求
<script>
//2. 发送请求
request.open( "POST", "/day16/DemoServlet01", true );
//如果不带数据,写这行就可以了
request.send();
//如果想带数据,就写下面的两行
//如果使用的是post方式带数据,那么 这里要添加头, 说明提交的数据类型是一个经过url编码的form表单数据
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//带数据过去 , 在send方法里面写表单数据。
request.send("name=aobama&age=19");
script>
查询数据库的用户是否存在,要使用数据库
- 数据库连接池的使用 c3p0
- 简化crud的JDBCUtils工具类的使用 jdbcUtils
这个地方查询数据库小技巧,count() 聚合函数,实现类ScalaHeadler- 连接数据库的jar包
需求:
- 当用户名失去焦点,进行判断,查询数据库该用户名是否存在,并返回给页面数据,不存在返回0,存在返回1
- 在页面进行判断,并向元素添加数据,用户名存在或用户名可用
<script type="text/javascript">
function cc() {
var xmlHttp;
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.onreadystatechange = function (){
//我们规定当响应就绪执行该方法,响应就绪是:readyState==200,status == 200
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
//获取后台发过来的字符串形式的相应数据
var name = xmlHttp.responseText;
//判断用户名是否存在
if(name == 1){
//将数据插入到选定元素中去
document.getElementById("span1").innerHTML = "用户名已存在";
}else {
document.getElementById("span1").innerHTML="用户名可用";
}
}
}
xmlHttp.open("post","UserJiaoyanServlet",true);
//如果是post方式提交,并且要传递数据,就要添加头,告诉服务器,说明这是一个经过utl编码的form表单数据
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var username = document.getElementById("name").name;
var value = document.getElementById("name").value;
xmlHttp.send(username+"="+value);
}
script>
---------------------------------------------------------------------------
<tr>
<td>姓名td>
<td>
<input type="text" id="name" name="username" onblur="cc()"><span id="span1">span>
td>
tr>
public class UserDaoImpl implements UserDao {
@Override
public int findUser(String name) throws SQLException {
DataSource dataSource = JDBCUtil.getDataSource();
QueryRunner queryRunner = new QueryRunner(dataSource);
Long aLong = (Long) queryRunner.query("select count(*) from user where username = ?", new ScalarHandler(), name);
int i = aLong.intValue();
return i;
}
}
UserJiaoyanServlet.java ------ servlet层
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
//1、获取参用户名
String username = request.getParameter("username");
//2、查询数据库,看是否用户名已经存在,存在返回1,不存在返回2
UserService userService = new UserServiceImpl();
int i = userService.findUser(username);
//3、响应之前的页面传递数据,不需要重定向和服务器内部跳转,直接输入数据即可
PrintWriter writer = response.getWriter();
//注意使用println方法,能够直接输入整型等类型,前端接收的也是整型
//而使用write()方法就不可以,只能输出到前端字符串
writer.println(i);
} catch (SQLException e) {
e.printStackTrace();
}
}
对js代码进行了封装,使代码更少,使用更方便,要导入js文件。
使用js代码写Ajax原理太麻烦,直接使用jquery
常用三个方法:
- get请求 $get(url,collback)
- post请求 $post(url,collback)
- load加载 load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
$(selector).load(URL,data,callback);
url(必须):访问的地址(如果带数据就直接跟在URL后面,用 ? 隔开)
collback(可选):访问成功后执行的函数的名字
<script type="text/javascript">
$("#btn").click(function{
$get("url",function(data,status){
data:存有的请求页面的内容,返回的数据
status:请求是否成功的状态(true/false)
});
});
script>
url(必须):请求的地址
data(可选):请求时候带上的数据,可以是json数据,也可以是单纯的字符串,可以是js对象
collback(可选):访问成功后执行的函数的名字
<script type="text/javascript">
$("#btn").click(function{
var data1 = {
name:"Donald Duck",
city:"Duckburg"
}
$post("url",data1,function(data,status){
data:存有的请求页面的内容,页面返回的数据
status:请求是否成功的状态(success/false)
});
});
script>
从服务器中加载数据,并把数据放到被选的元素中去
url:请求的参数
data:与请求异同发给服务器的键值对
collback:函数执行成功后,调用的方法的名称
load() 方法,是将服务器发送过来的数据去赋给备选的元素上去,
用的是 text() ,方法赋值的
<script type="text/javascript">
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
responseTxt:函数调用成功后返回的结果内容
statusTxt:执行是否成功的状态success
xhr:包含的XMLHttpRequest对象
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
script>
val(“aa”); 只能放那些标签带有value属性
html(“aa”); —写html代码
text(“aa”);
其实与html(“aa”)没有什么区别,如果想针对这分数据做html样式处理,那么只能用html()
jquery中的html()和text() 方法作用 在js中innerHTML自己全部可以实现