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的状态变化都会触发onreadstatechangexmlHttp.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 stubdoGet(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");
