Ajax (Asynchronous Javascript And XML)
（异步JavaScript和XML），
- 是什么?
并不是新的技术，只是把原有的技术，整合到一起而已。
1.使用CSS和XHTML来表示。
2. 使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。
- 有什么用?
网页如果想要刷新局部内容, 如果重新载入整个网页,用户体验不是很好。 为了解决局部刷新的问题(保持其他部分不动，只刷新某些地方)。 - 怎么用?
1.创建XMLHttpRequest对象
var request = new XMLHttpRequest()
2. 发送get请求
request.open("GET" ,"url" ,true );
/*
参数一： 请求类型 GET or POST
参数二： 请求的路径
参数三： 是否异步， true or false
*/
request.open("GET" ,"/day16/DemoServlet01" ,true );
request.send();
3.发送post请求的代码
// 发送post请求
request.open( "POST", "/day16/DemoServlet01", true );
//如果不带数据，写这行就可以了
//request.send();
//如果想带数据，就写下面的两行
//如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//带数据过去 ， 在send方法里面写表单数据。
request.send("name=zs&age=19");
数据请求 Get
<body>
<h3><a href="" onclick="get()">使用Ajax方式发送Get请求</a></h3>
</body>
1.创建XMLHttpRequest对象,(定义一个方法ajaxFunction)
<script type="text/javascript">
function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
<script>
- 发送get请求
//执行get请求的方法
function get() {
//1. 创建XMLHttpRequest 对象
var request = ajaxFunction();
//2. 发送get请求。
/*
参数一： 请求类型 GET or POST
参数二： 请求的路径
参数三： 是否异步， true or false
*/
request.open("GET" ,"/day16/DemoServlet01" ,true );
request.send();
}
readyState==4 请求已完成,且响应已就绪
status == 200 “ok” ; 404:未找到页面
如果发送请求的同时，还想获取数据，那么代码如下
//执行get请求
function get() {
//1. 创建XMLHttpRequest对象
var request = ajaxFunction();
//2. 发送get请求,带参数,在url上拼接
request.open("GET" ,"/day16/DemoServlet01?name=zs&age=18" ,true );
//3. 获取响应数据 注册监听的意思。 一会准备的状态发生了改变，那么就执行 = 号右边的方法
request.onreadystatechange = function(){
//前半段表示 已经能够正常处理。 再判断状态码是否是200
if(request.readyState == 4 && request.status == 200){
//弹出响应的信息
alert(request.responseText);
}
}
request.send();
}
数据请求 Post
页面代码:
<body>
<h3>
<a href="" onclick="post()">使用Ajax方式发送Post请求</a>
</h3>
</body>
JavaScript代码:
<script type="text/javascript">
//1. 创建对象
function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
//执行post请求的函数
function post() {
//1. 创建XMLHttpRequest对象
var request = ajaxFunction();
//2. 发送post请求
request.open( "POST", "/day16/DemoServlet01", true );
//如果不带数据，写这行就可以了
//request.send();
//如果想带数据，就写下面的两行
//如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//带数据过去 ， 在send方法里面写表单数据。
request.send("name=zs&age=19");
}
</script>
需要获取数据的代码:
function post() {
//1. 创建对象
var request = ajaxFunction();
//2. 发送请求
request.open( "POST", "/day16/DemoServlet01", true );
//想获取服务器传送过来的数据， 加一个状态的监听。
request.onreadystatechange=function(){
if(request.readyState==4 && request.status == 200){
alert("post："+request.responseText);
}
}
//如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//带数据过去 ， 在send方法里面写表单数据。
request.send("name=zs&age=19");
}
校验用户名是否可用
1. 搭建环境
-
页面准备
-
数据库准备
2. Servlet代码
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
request.setCharacterEncoding("UTF-8");
//1. 检测是否存在
String name = request.getParameter("name");
System.out.println("name="+name);
UserDao dao = new UserDaomImpl();
boolean isExist = dao.checkUserName(name);
//2. 通知页面，到底有还是没有。
if(isExist){
response.getWriter().println(1); //存在用户名
}else{
response.getWriter().println(2); //不存在该用户名
}
} catch (SQLException e) {
e.printStackTrace();
}
}
3. Dao代码
public class UserDaomImpl implements UserDao{
@Override
public boolean checkUserName(String username) throws SQLException {
QueryRunner runner = new QueryRunner(JDBCUtil02.getDataSource());
String sql = "select count(*) from t_user where username =?";
runner.query(sql, new ScalarHandler(), username);
Long result = (Long) runner.query(sql, new ScalarHandler(), username);
return result > 0 ;
}
}
jsp页面显示
function checkUserName() {
//获取输入框的值 document 整个网页
var name = document.getElementById("name").value; // value value() val val()
//1. 创建对象
var request = ajaxFunction();
//2. 发送请求
request.open("POST" ,"CheckUserNameServlet" , true );
//注册状态改变监听，获取服务器传送过来的数据
request.onreadystatechange = function(){
if(request.readyState == 4 && request.status == 200){
//alert(request.responseText);
var data = request.responseText;
if(data == 1){
//alert("用户名已存在");
document.getElementById("span01").innerHTML = "<font color='red'>用户名已存在!</font>";
}else{
document.getElementById("span01").innerHTML = "<font color='green'>用户名可用!</font>";
//alert("用户名未存在");
}
}
}
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name="+name);
}
JQuery
- 是什么?
javascript 的代码框架。
- 有什么用?
简化代码，提高效率。
- 核心
write less do more , 写得更少，做的更多
get
语法格式 ： $.get(URL,callback);
使用案例：
$.get("/day16/DemoServlet02" , function(data ,status) {
$("#div01").text(data);
});
post
语法格式：$.post(URL,data,callback);
function post() {
$.post("/day16/DemoServlet02", {name:"zhangsan",age:18},function(data,status) {
//想要放数据到div里面去。 --- 找到div
$("#div01").html(data);
});
}
使用JQuery去实现校验用户名
function checkUserName() {
//1. 获取输入框的内容
var name = $("#name").val();
//2. 发送请求
$.post("CheckUserNameServlet" , {name:name} , function(data , status){
//alert(data);
if(data == 1){//用户名存在
//alert("用户名存在");
$("#span01").html("<font color='red'>用户名已被注册</font>");
}else{
//alert("用户名可用");
$("#span01").html("<font color='green'>用户名可以使用</font>");
}
} );
//3. 输出响应的数据到页面上。
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
