1.什么是Ajax
“Asynchronous Javascript And XML”（异步JavaScript和XML）
1.使用CSS和XHTML来表示。
2.使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。
为了解决局部刷新的问题。 保持其他部分不动，只刷新某些地方。
2.使用方式
首先取得XMLHttpRequest对象
function ajaxFunction(){var xmlHttp;try{ // Firefox, Opera 8.0+, SafarixmlHttp=new XMLHttpRequest();}catch (e){try{// Internet ExplorerxmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}catch (e){try{xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}catch (e){}}}return xmlHttp;}
或者
function ajaxFunction(){var xmlhttp;
if (window.XMLHttpRequest){ // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest();}else{ // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
return xmlhttp
}
Ajax发送Get请求和post请求
完整jsp代码
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript">function ajaxFunction(){var xmlHttp;try{ // Firefox, Opera 8.0+, SafarixmlHttp=new XMLHttpRequest();}catch (e){try{// Internet ExplorerxmlHttp=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. 发送请求request.open("GET" ,"demoServlet1?name=get&age=20" ,true );//3. 获取响应数据 注册监听的意思。 一会准备的状态发生了改变，那么就执行 = 号右边的方法request.onreadystatechange = function(){//前半段表示 已经能够正常处理。 再判断状态码是否是200if(request.readyState == 4 && request.status == 200){//弹出响应的信息alert(request.responseText);}}request.send();}//post数据function post(){//调用ajaxfun()方法取得对象var requestPost = ajaxFunction();/* 第二步 *///发送请求(request.open(请求类型, 请求路径, 是否异步);)requestPost.open("post", "demoServlet1", true );//想获取服务器传送过来的数据， 加一个状态的监听。//请求完成,响应就绪 并且 网页状态码为200 表示okrequestPost.onreadystatechange=function(){if(requestPost.readyState==4 && requestPost.status == 200){alert("post："+requestPost.responseText);}}//如果使用post方式带数据,需要添加头说明提交的数据类型是经过url编码的from表单数据requestPost.setRequestHeader("Content-type","application/x-www-form-urlencoded");//send方法写表单数据requestPost.send("name=post&age=18");}</script> </head><body><a href="" οnclick="get()">使用Ajax发送Get请求</a> <br><a href="" οnclick="post()">使用Ajax发送post请求</a></body></html>
对应java文件
demoServlet1
package Servlet;import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/*** Servlet implementation class demoServlet1*/public class demoServlet1 extends HttpServlet {private static final long serialVersionUID = 1L;protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String n = request.getParameter("name");String age = request.getParameter("age");System.out.println("get请求 name=" + n+"age="+age);response.setContentType("text/html;charset=utf-8");response.getWriter().write("我收到get数据"+ "原样发送回来 name="+n+",age="+age);}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {System.out.println("post请求来了 然后走doget");String n = request.getParameter("name");String age = request.getParameter("age");System.out.println("post请求 name=" + n+"age="+age);response.setContentType("text/html;charset=utf-8");response.getWriter().write("我收到post数据"+ "原样发送回来 name="+n+",age="+age);}}
用来校验用户名是否可用,用户名输入提示等
