什么是AJAX？
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
异步和同步有什么区别？
A线程和B线程并发执行，谁也不等谁，这就是异步
A线程和B线程，在A线程执行的时候B线程需要等待，或者B线程执行的时候A线程也需要等待，这就是同步
实现AJAX的四个步骤：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function checkUsername(username) {
//1.创建AJAX核心对象XMLHttpRequest(浏览器内置的，可以直接使用)
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
//浏览器不支持XMLHttpRequest对象,IE5和IE6是不支持的，它只支持ActiveXObject对象
xhr = new ActiveXObject("Microsoft.XMLHTTP")
}
//2.注册回调函数
/*
程序执行到这里的时候，后面的回调函数不会执行，只是将回调函数注册给xhr对象
等xhr对象的readyState发生改变的时候，后面的回调函数会执行
XMLHttpRequest对象在请求和响应的过程当中，该对象的readyState状态从0-4：
0：请求未初始化
1：服务器连接已建立
2：请求已接受
3：请求处理中
4：请求已完成，且响应已就绪
*/
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){//服务器端响应结束
if(xhr.status == 200){//200表示服务器正常相应结束
//在浏览器端使用xhr对象接收服务器端响应回来的文本
var s = xhr.responseText;
document.getElementById("nameTipMsg").innerHTML = s;
}else{
//弹出错误的响应状态码
alert(xmr.status);
}
}
}
//3.开启浏览器和服务器之间的通道
/*
method：指定请求方式为get还是post
url：请求路径
async：true/false(true表示支持异步,false表示支持同步)
*/
//xhr.open(method,url,async);
xhr.open("GET","/AJAX/checkusername.do?username="+username,true);
//4.发送AJAX请求
xhr.send();
}
</script>
</head>
<body>
用户名：<input type="text" name="username" onblur="checkUsername(this.value)">
<span id="nameTipMsg" style="font-size:12px;"></span><br>
密码：<input type="password" name="password"><br>
</body>
</html>
java代码：
package com.bipowernode.ajax.action;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class CheckUsernameAction extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
String username = request.getParameter("username");
//这里就不连接数据库了
if("admin".equals(username)) {
out.print("<font color='red'>用户名已注册</font>");
}else {
out.print("<font color='greed'>用户名可用</font>");
}
}
}
如果使用的是POST的方式：
xhr.open("GET","/AJAX/checkusername.do?username="+username,true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
