**
Ajax知识点归纳
**
1.Ajax是什么
“Asynchronous Javascript And XML”(异步JavaScript和XML)
Ajax并非一种新的技术,而是几种原有技术的结合体。它由下列技术组合而成。
1.使用CSS和XHTML来表示。
2.使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。
2.Ajax有什么用
Ajax可以让我们无需重新加载全部网页内容,即可完成对某个部分的内容执行刷新。
最典型的例子:在注册网站的时候,输入的用户名,会自动地提示我们,该用户已被注册。
3.Ajax内部原理
传统方式:
1. 输入用户名,
2. 点击一个按钮,校验。
3. 把数据提交给服务器
4. 服务器在后台帮助我们完成校验,并且反馈信息。
5. 我们在浏览器上提示用户,给出结果
Ajax方式:
1. 通过JS 获取输入框文本内容 document.getElementById(“username”).value
2. 通过XmlHttpRequest 去执行请求。 XmlHttpRequest 其实就是 XML + http + Request 的组合。
3. 请求结束后,收到结果, 再使用 js 去完成提示。
4. 可以配合 css 样式来增加提示效果。
4.Ajax的使用
(1)GET方式提交数据
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax Get</title>
<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;
}
//执行GET请求
function get(){
//1.创建XmlHttpRequest对象
var request = ajaxFunction();
//2.发送请求
/*
参数一:请求方式 GET/POST
参数二:请求路径
参数三:是否异步 true/false
*/
//request.open("GET","/AjaxGet/ServletDemo01",true);
request.open("GET","/AjaxGet/ServletDemo01?username=admin",true);
//3.获取响应数据
request.onreadystatechange = function(){
//是否正常处理 状态码是否200
if(request.readyState == 4 && request.status == 200){
alert(request.responseText);
}
}
request.send();
}
</script>
</head>
<body>
<a href="#" onclick="get()">使用Ajax方式发送Get请求</a>
</body>
</html>
package com.sigar.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/ServletDemo01")
public class ServletDemo01 extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
System.out.println("收到Get请求" + username);
response.setContentType("text/html;charset=utf-8");
response.getWriter().write("收到了请求");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
(2)POST方式提交数据
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax Get</title>
<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;
}
//执行GET请求
function post(){
//1.创建XmlHttpRequest对象
var request = ajaxFunction();
//2.发送请求
/*
参数一:请求方式 GET/POST
参数二:请求路径
参数三:是否异步 true/false
*/
request.open("POST","/AjaxGet/ServletDemo01",true);
//3.获取响应数据
request.onreadystatechange = function(){
//是否正常处理 状态码是否200
if(request.readyState == 4 && request.status == 200){
alert(request.responseText);
}
}
//使用post方式传数据,要添加头,说明提交的数据类型是经过url编码的form表单数据
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
request.send("username=username");
}
</script>
</head>
<body>
<a href="#" onclick="post()">使用Ajax方式发送Post请求</a>
</body>
</html>
package com.sigar.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/ServletDemo01")
public class ServletDemo01 extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
System.out.println("收到Get请求=====>" + username);
response.setContentType("text/html;charset=utf-8");
response.getWriter().write("收到了Get请求");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("收到Post请求------>");
doGet(request, response);
}
}
5.Ajax注册验证
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户注册demo</title>
<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;
}
function checkUsername(){
var xmlHttp = ajaxFunction();
var username = document.getElementById("username").value;
xmlHttp.open("POST", "/AjaxGet/RegisterCheckUserServlet", true);
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
if(xmlHttp.responseText == 1){
document.getElementById("UNameTips").innerHTML = "<font color='red'> 用户名已存在 </font>";
}
}
}
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send("username=" + username);
}
</script>
</head>
<body>
<table border="1px">
<tr>
<td>用户名</td>
<td><input type="text" name="username" id="username" onblur="checkUsername()"><span id="UNameTips"></span></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="注册"></td>
</tr>
</table>
</body>
</html>
package com.sigar.servlet;
import java.io.IOException;
import java.sql.SQLException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.sigar.dao.UserDao;
import com.sigar.dao.impl.UserDaoImpl;
/**
* Servlet implementation class RegisterCheckUserServlet
*/
@WebServlet("/RegisterCheckUserServlet")
public class RegisterCheckUserServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
String username = request.getParameter("username");
UserDao userDao = new UserDaoImpl();
Boolean isExist = userDao.RegisterCheckUser(username);
if(isExist){
//存在该用户
response.getWriter().println(1);
}else{
//不存在该用户
response.getWriter().println(0);
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}