一.What
Ajax=Asynchronous Javascript And XML 异步的JavaScript和XML
不是一门新技术,多种技术的综合
二.Why
局部刷新
前后两次请求都请求同一个页面,两次请求的页面显示的数据只有少量差别的时候使用
Ajax,典型应用用户注册、级联显示下拉菜单
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。傻傻的等待
参见
三.How
1.使用$.get()或$.post()提交
$.post("url",参数,function (data, textStatus){
//回调函数,服务器响应完毕以后执行
},"json");
$.get("url",参数,function (data, textStatus){
//回调函数,服务器响应完毕以后执行
},"json");
参数1: 请求的url
参数2: 给服务器传输的参数json对象,格式如下
{
“参数名1”:参数值1,
“参数名2”:参数值2
}
参数3: 回调函数,服务器响应完毕以后执行
data服务器传回的数据
textStatus 响应的状态码
参数4: 提示客户端服务器返回的数据的类型 如果是json客户端使用json对象解析
如果是text 客户端把它当成字符串解析
级联菜单应用:根据选中的一级种类动态产生二级种类
演示代码如下:
$(function(){
//给category1下拉列表框绑定onchange事件
//当内容改变时 发出ajax请求 去查询对应的 二级商品种类
$("#category1").change(function(){
var category1Select = $("#category1")[0];
var selectIdx = category1Select.selectedIndex;
var categoryCid = category1Select.options[selectIdx].value;
$.post("ProductServlet?action=getCategory2OfCategory1",{
"categoryCid":categoryCid
},function (data, textStatus){
//创建一个新的select替换掉以前那个二级商品种类的下拉列表框
var select = "<select id='cid' name='cid'>";
for(var i=0;i<data.length;i++){
select = select + "<option value='" + data[i].cid+ "'>" + data[i].cname + "</option>";
}
select = select + "</select>";
//替换
$("#cid").replaceWith(select);
},"json");
});
});
或
$(function(){
//给category1下拉列表框绑定onchange事件
//当内容改变时 发出ajax请求 去查询对应的 二级商品种类
$("#category1").change(function(){
var category1Select = $("#category1")[0];
var selectIdx = category1Select.selectedIndex;
var categoryCid = category1Select.options[selectIdx].value;
$.post("ProductServlet?action=getCategory2OfCategory1",{
"categoryCid":categoryCid
},function (data, textStatus){
alert(data);
var str = "var data =" + data;
eval(str);
//创建一个新的select替换掉以前那个二级商品种类的下拉列表框
var select = "<select id='cid' name='cid'>";
for(var i=0;i<data.length;i++){
select = select + "<option value='" + data[i].cid+ "'>" + data[i].cname + "</option>";
}
select = select + "</select>";
//替换
$("#cid").replaceWith(select);
},"text");
});
});
2.使用$.ajax()提交
$.ajax({
type: "POST",
url: "MyServlet",
data:{'param1':$("#param1").val(),'param2':$("#param2").val()},//用json对象保存提交的数据
dateType: "html",//服务器输出的数据的类型,默认html
success:function(returnedData){
$("#result").val(returnedData);
}
});
其他函数: $.load()、$.getScript()、$.getJSON()不常用,有兴趣的同学可以参见《锋利的jQuery第2版》第6章
3. load()方法演示
附录: 原生JavaScript 发送异步请求
用户注册 演示代码如下:
1.index.js
var xhr = null;
//第二个重要的函数:回调函数 作用:更新页面
function callback(){
//这个函数执行了三次 状态位一改变就执行一次 XHR对象的readyState属性改变了三次
//readyState 5个值 0-4 0表示xhr对象刚刚被创建 1请求发送中 2.响应 3解析中
//4.客户端对xhr解析完成 响应真正完成 客户端才能从这个对象里取出服务器响应的数据
// 3次改变 1->2 2->3 3->4
if(xhr.readyState==4){
//status状态码 404页面未找到 500服务器内部错误 200正常
if(xhr.status==200){
var msg = document.getElementById("msg");
msg.innerHTML = xhr.responseText;
}
}
}
function createXHR(){
var xhr = null;
if(window.ActiveXObject){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}else if(document.addEventListener){
xhr = new XMLHttpRequest();
}
return xhr;
}
//第一个重要的函数:发送Ajax请求的事件处理函数 共四步
function checkUserIfExist(){
var username = document.getElementById("username").value;
//1.创建XMLHttpRequest类的对象
xhr = createXHR();
//2.调用该对象的open方法
// 有三个参数 1. 请求类型 GET POST 2.请求的URL 3. boolean true 表示异步请求 false同步的
xhr.open("POST","RegistServlet",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//3.绑定回调函数
xhr.onreadystatechange = callback;
//4.发送请求
xhr.send("username=" + username);
}
window.onload = function(){
//给btn1绑定一个事件
var btn1 = document.getElementById("btn1");
btn1.onclick = checkUserIfExist;
}
2.RegistServlet.java
package com.servlet;
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class RegistServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String msg = "";
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
//1.填充数据
System.out.println("123");
String username = request.getParameter("username");
System.out.println(username);
//2.调用业务逻辑
//去数据库查询 看看用户是否存在
if("zzy".equals(username)){
//数据库 存在了 用户注册失败 显示"用户名已存在,请更换用户名"
msg = "<font color='red'>用户名已存在,请更换用户名</font>";
}else{
msg = "用户名可以使用";
}
//3.输出数据
out.println(msg);
out.flush();
out.close();
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
3.index.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax注册</title>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<h1>Ajax注册</h1>
<form action="" method="post">
请输入用户名3:<input type="text" id="username" name="username"/>
<input type="button" id="btn1" value="检查用户名是否存在"/>
<span id="msg"></span>
<br/>
用户密码:<input type="password" name="psd"/><br/>
确认密码:<input type="password" name="repsd"/><br/>
用户年龄:<input type="text" name="age"/><br/>
<input type="submit" value="传统的JavaEE注册"/><br/>
</form>
</body>
</html>