Ajax简介
AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML），Ajax可以实现异步请求。AJAX 是一种在 2005 年由 Google 推广开来的编程模式。
Ajax语法介绍
学习使用Ajax主要就是学习XMLHttpRequest对象的方法和属性
第一个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>Insert title here</title>
</head>
<!-- ajax
ajax可以实现异步请求
学习使用ajax主要就是学习XMLHttpRequset对象的方法和属性
-->
<body>
<!-- 第一个ajax -->
<script type="text/javascript">
//xmlHttp不能定义到外面，要把它设为全局变量。
var xmlHttp;
function fun(){
//1.创建XMLHttpRequest对象
try { //Firefox, Opera 8.0+, Safari
//谷歌、火狐浏览器支持
xmlHttp = new XMLHttpRequest();
} catch (e) {
try { //Internet Explorer
//IE6浏览器支持，不支持IE6以上的
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
//支持IE6以上的
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("不支持Ajax！");
}
}
}
//2.建立与服务器的连接
//为什么获取当前时间，因为让它发送多次请求，不被认为是一次请求
//get方式传值
xmlHttp.open("GET","${pageContext.request.contextPath}/AjaxDemo?name=haoren&password=123&time="+new Date().getTime());
//3.向服务器发送数据
xmlHttp.send(null);
//4.设置回调函数,接受服务器返回的数据
//注意：readState的状态变化都会触发onreadstatechange
xmlHttp.onreadystatechange = showInfo;
}
//回调函数
function showInfo(){
//xmlHttp.readyState 4表示已完成
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200 || xmlHttp.status == 304){//304表示服务器的内容没有变化、200表示请求成功
document.getElementById("div1").innerHTML = xmlHttp.responseText;
}
}
}
</script>
<a href="#" onclick="fun()">点击</a>
<div style="width:100px;height:100px;border:1px solid blue;" id="div1"></div>
</body>
</html>servlet代码：
package com.test.ajax;
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;
import com.sun.xml.internal.fastinfoset.stax.events.ProcessingInstructionEvent;
/**
* ajax请求
* 接受ajax请求，返回字符串
*/
@WebServlet("/AjaxDemo")
public class AjaxDemo extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String name = request.getParameter("name");
String password = request.getParameter("password");
System.out.println(name+";"+password);
response.getWriter().print("小日本不是人");
}
/**
* @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);
}
}
传值
1.get方式传值
xmlHttp.open("get","${pageContext.request.contextPath}/servlet/TestServlet?name=haoren &password=123&time="+ new Date().getTime());
xmlHttp.send(null);
2.post方式传值
xmlHttp.open("post","${pageContext.request.contextPath}/servlet/TestServlet?time="+ new Date().getTime());
//post方式是通过send把参数发送给服务器端，所以一定要指定发的类型，
//"content-type","application/x-www-form-urlencoded"为普通的表单类型，表单默认就是这个 型
xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
xmlHttp.send("name=好人&password=123");