Ajax入门学习
一、概述
ajax：客户端（特指PC浏览器）与服务器，可以在【不必刷新整个浏览器】的情况下，与服务器进行异步通讯的技术。注意：ajax不是新的编程语言，而是Google在2005年新推出的新的编程模式。
二、异步对象
1.XMLHttpRequest(非IE浏览器)
E5时，微软就开发出了第一个异步通讯对象，叫ActiveXObject对象，
Firefox等其它浏览器厂商也慢慢引入异步通讯对象，叫XMLHttpRequest对象，
IE的高版本，也将这个异步对象取名叫XMLHttpRequest对象
2.ActiveXObject(IE浏览器)
IE有向下兼容问题， 因此可以使用ActiveXObject对象。
3.使用异步对象
使用异步对象无需jar包，现代中高版本浏览器中内置了这个异步通讯对象，只需通过JavaScript就可以创建。不过虽然浏览器内置了ajax对象，但是并没有创建出来，需要我们自己使用JavaScript创建出来，代码如下：
function createAjax(){
var ajax = null ;
try{
ajax = new ActiveXObject("Microsoft.xmlhttp");
}catch(e1){
try{
ajax = new XMLHttpRequest() ;
}catch(e2){
alert("please change browser");
}
}
return ajax;
}三、异步对象的使用步骤
1.GET请求
1.创建异步对象
调用上面的js方法创建ajax对象
//1.创建ajax对象(状态1)
var ajax = createAJAX() ;2.准备发送请求，但是还没有真正发送请求
此时设置请求方式和url
//2.准备发请求
var method = "get" ;//请求方式
var url = {pageContext.request.contextPath}/servlet/TimeServlet"; //请求url ajax.open(method,url);//(状态2)3.真正发送请求
这里举例使用的是get请求，请求没有实体，顾设置为null
//3.真正发请求(这里的参数是请求体中的内容,由于是get请求,请求体为空,所有赋值为null)
ajax.send(null);4.ajax不断监听服务端的响应
ajax.readyState == 4 说明从服务端获取到了数据，响应码为200，说明正常
ajax.onreadystatechange = function(){
//如果状态码是4的话,表示ajax对象已经从服务器端带回信息回到了前台
if(ajax.readyState == 4 ){
if(ajax.status == 200 ){
var nowStr = ajax.responseText ;
alert(nowStr);
}
}
}这里的服务端代码如下：
public class TimeServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
//注意:这行代码是告诉浏览器端服务器是以什么格式的数据返回的(必须要)
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
System.out.println("TimeServlet.doGet()");
//1.获取当前时间
Date date = new Date();
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
String time = sdf.format(date);
//2.以流的方式发送到jsp页面
PrintWriter writer = response.getWriter();
writer.write(time);
writer.flush();
writer.close(); //当流关闭之后,信息发送到前台
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}注意：上面返回给jsp的数据是以流的形式返回，不能以请求重定向或者请求转发的形式，否则还是刷新了界面。
完整前台代码：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP</title>
</head>
<body>
当前时间：<span id="time"></span><br/>
<input id="buttonID" type="button" value="获取当前时间"/><p/>
<script type="text/javascript"> //异步创建AJAX对象 function createAJAX(){ var ajax = null ; try{ //如果是ie12的话 ajax = new ActiveXObject("microsoft.xmlhttp") ; }catch(e1){ try{ //如果是非ie的话 ajax = new XMLHttpRequest() ; }catch(e2){ alert("你的浏览器中不支持异步对象，请换浏览器1"); } } return ajax; } </script>
<script type="text/javascript"> document.getElementById("buttonID").onclick = function(){ //1.创建ajax对象(状态1) var ajax = createAJAX() ; //2.准备发请求 var method = "get" ;//请求方式 var url = "${pageContext.request.contextPath}/servlet/TimeServlet"; //请求url ajax.open(method,url);//(状态2) //3.真正发请求(这里的参数是请求体中的内容,由于是get请求,请求体为空,所有赋值为null) ajax.send(null); //-------------------------------------等待 //4.ajax异步对象不断监听服务器响应的状态0-1-2-3-4 //为ajax对象设置状态改变时调用的方法 ajax.onreadystatechange = function(){ //如果状态码是4的话,表示ajax对象已经从服务器端带回信息回到了前台 if(ajax.readyState == 4 ){ //如果响应码是200,说明正常 if(ajax.status == 200 ){ var nowStr = ajax.responseText ; alert(nowStr); } } } } ; </script>
</body>
</html>
这样，就完成了没有刷新整个页面就完成了动态获取当前时间。
2.POST请求
post请求方式和get方式大致步骤相同，主要不同的是第二步准备发送请求但是还么有真正发送时method改为post,然后在第三步真正发送时，send()方法的参数不可以为null，改为我们需要设置的参数(以键值对的形式)。例如：
var content = "username=" + username ;
ajax.send(content);注意：如果使用post请求，要在真正发送前加下面这行代码，它会将请求体中的汉字自动转换utf-8。
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");下面就POST请求做一个例子。
前台代码：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP</title>
</head>
<body>
用户名[POST]:<input id="usernameID" type="text" maxlength="4">
<span id="resID"></span>
<hr/>
<script type="text/javascript"> document.getElementById("usernameID").onblur = function(){ var username = this.value ; alert(username); //1 var ajax = createAjax() ; //2 var method = "post" ; var url = "${pageContext.request.contextPath}/servlet/UserServlet?time="+new Date().getTime(); ajax.open(method,url); //设置ajax请求头为post,它会将请求体中的汉字自动转换utf-8 ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); //3 var content = "username=" + username ; ajax.send(content); //-----------------------------------等待 ajax.onreadystatechange = function(){ if(ajax.readyState == 4 ){ if(ajax.status == 200 ){ var tip = ajax.responseText; //6创建img标签 var imgElement = document.createElement("img"); //设置img标签的属性 imgElement.src = tip ; imgElement.style.height = "12px" ; imgElement.style.width = "12px" ; //定位span标签 var spanElement = document.getElementById("resID"); spanElement.innerHTML = "" ;//清空span标签的内容 spanElement.appendChild(imgElement); } } } } </script>
<script type="text/javascript"> function createAjax(){ var ajax = null ; try{ ajax = new ActiveXObject("microsoft.xmlhttp"); }catch(e1){ try{ ajax = new XMLHttpRequest(); }catch(e2){ alert("你的浏览器不支持ajax，请更换浏览器"); } } return ajax; } </script>
</body>
</html>
后台代码：
package com.itheima.web;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Enumeration;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class UserServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
Enumeration names = request.getParameterNames();
while(names.hasMoreElements()){
Object nextElement = names.nextElement();
System.out.println("name:" + nextElement);
}
String username = request.getParameter("username") ;
System.out.println("username" + username );
String desc = "<font color = 'green'>输入正确</font>" ;
if(!"杰克".equals(username)){
desc = "<font color = 'red'>输入错误</font>" ;
}
//通过流将信息输出
PrintWriter pw = response.getWriter();
pw.write(desc);
pw.flush() ;
pw.close() ;
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String username = request.getParameter("username") ;
String tip = "images/MsgError.gif" ;
System.out.println("username:" + username);
if("jack".equals(username)){
tip = "images/MsgSent.gif";
}
response.setContentType("text/html;charset=utf-8");
PrintWriter pw = response.getWriter();
pw.write(tip);
pw.flush();
pw.close();
}
}
这里的图片是以字符串的形式在流中传输。
四、数据载体
1.三大载体
1.HTML
( A）优点：服务端响应的是普通html字符串，无需JS解析，配合innerHTML属性效率高
（B） 缺点：如果需要更新WEB页面中的很多处地方，HTML不太方便，同时innerHTML属性不是DOM的标准，不能操作XML
注意：innerHTML在xml中不能使用，用firstChild.nodeValue替代
（C）适合：小量数据载体，且只更新在web页面中的一个地方
2.XML
（A）优点：是种通用的普通字符串格式，任何技术都能解析，标签名可以任意，使用DOM标准规则能够解析XML的任何部分
（B）缺点：XML文件格式相当严格，出错后，responseXML属性返回NULL，如果XML文件过长，导致解析效率低下
（C）适合：大量具有层次数据载体
3.JSON
JSON（Java Script Object Notation（记号,标记））是一种轻量级的数据交换语言, 以文本字符串为基础，且易于让人阅读。
JS可以直接解析JSON格式的文本，前提是：该JSON必须采用JS格式书写的才行，如果该JSON是采用Java格式写的，必须使用eval()函数转换后，方可被JS解析，该eval(“”)函数接收一个字符串格式的内容。
2.如何使用：
response.setContentType("text/html;charset=utf-8");OK，ajax的简单使用到此。