什么是Ajax？
•Asynchronous JavaScript and XML
•浏览器与服务器之间进行异步交互无需刷新页面的技术。
Ajax典型应用：Google Suggest
Ajax的发展历程
@H_502_16@Ajax牛在哪？
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> <style type="text/css">button {width: 200px;}</style> <script type="text/javascript"> function getRequest() { var xmlHttp = null; try {// Chrome,Firefox,Opera,Safari xmlHttp = new XMLHttpRequest(); } catch (e) { try {// Internet Explorer xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try {// Internet Explorer xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("your browser not support ajax!"); } } } return xmlHttp; } var request = getRequest(); window.onload = function(){//页面加载完成之后我们才获取按钮的对象 var btn01Ele = document.getElementById("btn01"); btn01Ele.onclick = function(){ alert(request); }; var btn02Ele = document.getElementById("btn02"); btn02Ele.onclick = function(){ //发送GET请求 //1.调用request对象的open()方法建立一个连接 //①method参数：请求方式 //②url参数：请求的目标地址 //发送请求参数：附着在URL地址后面 request.open("get","AjaxRequestServlet?userName=Tom2015"); //2.调用request对象的send()方法发送请求数据 request.send(); }; var btn03Ele = document.getElementById("btn03"); btn03Ele.onclick = function(){ //发送POST请求 //发送请求参数：将请求参数键值对以参数形式传递给send()方法 request.open("post","AjaxRequestServlet"); //设置请求消息头为如下的值： //Content-Type:application/x-www-form-urlencoded request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); request.send("userName=Jerry2015&userPwd=123456"); }; var btn04Ele = document.getElementById("btn04"); btn04Ele.onclick = function(){ //接收【文本】格式的响应数据 request.open("post","AjaxResponseText"); request.send(); //1.通过onreadystatechange事件监听readystate属性值的变化 request.onreadystatechange = function(){ //2.在readystat属性等于4并且status属性等于200时接收响应数据 if(request.readyState == 4 && request.status == 200) { var result = request.responseText; alert(result); } }; }; var btn05Ele = document.getElementById("btn05"); btn05Ele.onclick = function(){ //接收【XML】格式的响应数据 request.open("post","AjaxResponseXML"); request.send(); //1.通过onreadystatechange事件监听readystate属性值的变化 request.onreadystatechange = function(){ //2.在readystat属性等于4并且status属性等于200时接收响应数据 if(request.readyState == 4 && request.status == 200) { //"<user><userName>Tom2015</userName></user>" //{user:{userName:Tom2015}} //使用responseXML属性接收XML格式的数据 var result = request.responseXML; //alert(result + " " + document); var userName = result.getElementsByTagName("userName")[0].firstChild.nodeValue; alert(userName); } }; }; var btn06Ele = document.getElementById("btn06"); btn06Ele.onclick = function(){ //接收【JSON】格式的响应数据 request.open("post","AjaxResponseJSON"); request.send(); //1.通过onreadystatechange事件监听readystate属性值的变化 request.onreadystatechange = function(){ //2.在readystat属性等于4并且status属性等于200时接收响应数据 if(request.readyState == 4 && request.status == 200) { var result = request.responseText; //直接接收到的JSON数据是一个字符串类型，需要转换为JSON对象格式 result = eval("("+result+")"); //alert(typeof result); //"[\"Hello\",{userName:'Tom2015'}]" alert(result[1].userName); } }; }; }; </script> </head> <body> <center> <button id="btn01">获取XMLHttpRequest对象</button><br /> <button id="btn02">发送GET请求</button><br /> <button id="btn03">发送POST请求</button><br /> <button id="btn04">接收【文本】格式的响应数据</button><br /> <button id="btn05">接收【XML】格式的响应数据</button><br /> <button id="btn06">接收【JSON】格式的响应数据</button><br /> <br /><br /> <form action="AjaxRequestServlet" method="post"> <input type="text" name="userName" /><input type="submit" /> </form> </center> </body> </html>
接收响应的时机
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxRequestServlet 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("userName="+userName);
System.out.println("AjaxRequestServlet get...");
}
protected void doPost(HttpServletRequest request,IOException {
String userName = request.getParameter("userName");
System.out.println("userName="+userName);
System.out.println("AjaxRequestServlet post...");
}
}
关于Ajax请求返回一个文本类型的数据
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 AjaxResponseText extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request,IOException {
//准备作为响应的文本数据
response.setContentType("text/html;charset=UTF-8");
PrintWriter writer = response.getWriter();
writer.write("英明神武，风流倜傥！");
}
}
关于Ajax请求返回一个XML类型的数据
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 AjaxResponseXML extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request,IOException {
//准备XML数据,作为响应返回给浏览器
String xmlStr = "<user><userName>Tom2015</userName></user>";
//告诉浏览器,服务器端返回的数据是XML格式的
response.setContentType("text/xml;charset=UTF-8");
PrintWriter writer = response.getWriter();
writer.write(xmlStr);
}
}
关于Ajax请求返回一个JSON类型的数据
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 AjaxResponseJSON extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request,IOException {
//准备JSON字符串
String jsonStr = "[\"Hello\",{userName:'Tom2015'}]";
response.setContentType("text/json;charset=UTF-8");
PrintWriter writer = response.getWriter();
writer.write(jsonStr);
}
}
<!DOCTYPE html> <html> <head> <Meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> /* 1.最外层只能是[]或{} 2.[]表示JSON数组：[value_1,value_2,...,value_n] 3.{}表示JSON对象：{key_1:value_1,key_2:value_2,key_n:value_n} 4.key数据类型：字符串 5.value数据类型： 基本数据类型：数值，字符串，布尔 引用数据类型：数组和对象 6.优势： ①数据量小 ②解析速度快 ③是JavaScript中直接支持的数据格式，解析方便 */ var json = ["Hello",{userName:'Tom2015'}]; alert(json[0]+" "+json[1].userName); </script> </head> <body> </body> </html>
