时间：2016-12-21 11:20
——Ajax概述
1、什么是Ajax
Ajax（Asynchronous JavaScript And XML）翻译成中文就是“异步的JavaScript和XML”，即使用JavaScript语言和服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
Ajax还有一个最大的特点就是，当服务器响应时，不需要刷新整个浏览器界面，而是可以局部刷新，这一特点给用户的感觉是在不知不觉中完成请求和响应过程。
* 与服务器异步交互
* 浏览器页面局部刷新
* 服务器响应给客户端的一般一个完整的HTML页面，但在Ajax中因为是局部刷新，那么服务器就不用再响应页面，而是响应数据。
> 数据有如下三种：
text：纯文本
xml：大数据中使用
json：它是JS提供的数据交换格式，它在Ajax中最受欢迎。
2、异步交互和同步交互
同步：
发送一个请求，就要等待服务器的响应结束，然后才能发出第二个请求。
刷新的是整个页面。
异步：
发送一个请求后，无需等待服务器的响应，然后就可以发送第二个请求。
可以使用JS接受服务器的响应，然后使用JS完成局部刷新。
3、Ajax的优缺点：
优点：
* Ajax使用JavaScript技术向服务器发送异步请求。
* Ajax无需刷新整个页面
* 因为服务器相应内容不再是整个页面，而是刷新局部内容，所以Ajax性能高。
缺点：
* Ajax并不适合所有场景，很多时候还是需要使用同步请求进行交互。
* Ajax虽然提高了用户体验，但无形中向服务器发送请求的次数增多了，导致服务器压力增大。
* 因为Ajax是在浏览器中使用JavaScript完成的，所以还需要处理浏览器兼容性问题。
——Ajax第一例
1、准备工作
因为Ajax也需要请求服务器，异步请求也是请求服务器，所以我们需要先写好服务器端代码，即编写一个Servlet：
public class AServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("Hello Ajax");
response.getWriter().print("Hello Ajax");
}
}
2、Ajax核心（XMLHttpRequest）
其实Ajax就是在JavaScript中多添加了一个对象：XMLHttpRequest对象，所有的异步交互都是使用XMLHttpRequest对象完成的，也就是说，只需要学习一个JavaScript的新对象即可。
注意：
各个浏览器对XMLHttpRequest的支持是不同的，大多数浏览器都支持DOM2规范，都可以使用：var xmlHttp = new XMLHttpRequest()来创建对象。
但IE有所不同，IE5.5以及更早版本需要：var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");来创建对象。
IE6.0需要使用：var xmlHttp = new ActiveXObect("Msxml2.XMLHTTP");来创建对象，而IE7以及以上版本也支持DOM2规范。
为了处理浏览器兼容性问题，可以使用以下方法来创建XMLHttpRequest对象：
function createXMLHttpRequest(){
try {
// 适用于大多数浏览器，以及IE7及其更高版本
return new XMLHttpRequest();
} catch(e) {
try {
// 适用于IE6.0
return new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
// 适用于IE5.5及其以下版本
return new ActiveXObject("Microsofr.XMLHTTP");
} catch(e) {
alert("您的浏览器不支持Ajax");
throw e;
}
}
}
}
3、打开与服务器的连接
可以使用xmlHttp的open()方法来打开连接，open()方法的参数如下：
open(method, url, async)
* method：请求方式，通常为GET或POST
* url：请求的服务器资源地址，若为GET请求，还可以在URL后追加参数。
* async：这个参数是boolean类型，默认为true，表示异步请求，该参数可以省略。
4、发送请求
当使用open()方法打开连接后，就可以调用XMLHttpRequest对象的send()方法发送请求了。
send方法的参数为POST请求参数，即对应HTTP协议的请求体内容，若是GET请求，需要在URL后连接参数。
注意：
若没有参数，需要给出null作为参数，若不给出null作为参数，可能会导致FIreFox浏览器不能正常发送请求。
5、接收服务器响应.
XMLHttpRequest对象有一个onreadystatechange事件，它会在XMLHttpRequest对象的状态发生变化时被调用：
* 0：初始化未完成状态，只是创建了XMLHttpRequest对象，还未调用open()方法。
* 1：请求已开始，open()方法已经调用，但还没有调用send()方法。
* 2：请求发送完成状态，send()方法已被调用。
* 3：服务器已经开始响应，但不表示响应结束。
* 4：读取服务器响应结束。
onreadychange事件会在状态为1 2 3 4时引发，通常只关心状态4。
得到xmlHttp对象的状态：
* var state = xmlHttp.readyState
> state的值可能是0 1 2 3 4
得到服务器响应的状态码：
* var status = xmlHttp.status;
> status的值可能是200 404 500
得到服务器响应的内容：
* var content = xmlHttp.responseText
> 得到服务器响应的文本格式的内容
> 更加通用
* var content = xmlHttp.responseXML
> 得到服务器响应的XML内容，即Document对象
示例代码：
ajax.jsp
<html>
<head>
<base href="http://www.mamicode.com/">
<title>My JSP ‘ajax1.jsp‘ starting page</title>
<script type="text/javascript">
// 创建异步对象
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();
} catch (e) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("您的浏览器不支持Ajax");
throw e;
}
}
}
}
// 文档加载完毕后执行
window.onload = function() {
// 获取按钮
var btn = document.getElementById("btn");
// 给按钮的点击事件注册监听
btn.onclick = function() {
/*
* 四步操作：
* 1、得到异步对象
* 2、打开与服务器的连接
* 3、发送请求
* 4、给异步对象的onreadystatechange事件注册监听器
*/
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET", "<c:url value=http://www.mamicode.com/‘/AServlet‘ />", true);
// GET请求没有请求体，但也要给出null，否则FireFox可能不兼容
xmlHttp.send(null);
// 当xmlHttp的状态发生变化时执行
xmlHttp.onreadystatechange = function() {
// 双重判断，判断服务器响应结束和响应成功
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { // readyState 一定要大写
var h1 = document.getElementById("h1");
h1.innerHTML = xmlHttp.responseText;
}
};
};
};
</script>
</head>
<body>
<button id="btn">点击这里</button>
<h1 id="h1"></h1>
</body>
</html>
——Ajax第一例小结
1、创建XMLHttpRequest对象
2、调用open()方法打开与服务器的连接
3、调用send()方法发送请求
4、为XMLHttpRequest对象指定onreadystatechange事件函数，这个函数会在XMLHttpRequest的1 2 3 4四种状态时被调用。
5、XMLHttpRequest对象的5种状态
* 0：初始化未完成状态，只是创建了XMLHttpRequest对象，还未调用open()方法
* 1：请求已开始，open()方法已调用，但是还未调用send()方法
* 2：请求发送完成状态，send()方法已调用
* 3：开始读取服务器响应
* 4：读取服务器响应结束。
通常只关心第4种状态。
XMLHttpRequest对象的status属性表示服务器状态码，它只有在readyState为4时才能获取到。
XMLHttpRequest对象的responseText属性表示服务器响应内容，它只有在readyState为4时能获取到。
——第二例：发送POST请求
如果发送请求时需要带有参数，一般都用POST请求。
POST请求必须设置请求头：Content-Type: application/x-www-form-urlencoded。
表单的enctype默认值就是application/x-www-form-encoded，因为这是默认值，所以容易忽略这个值。
当设置了<form>的enctype="application/x-www-form-encoded"时，等同于设置了Content-Type请求头。
但在使用Ajax发送请求时，就没有默认值了，所以需要手动设置请求头：
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
当没有设置Content-Type请求头为application/x-www-form-urlencoded时，Web容器会忽略请求体的内容，容易造成空指针异常，所以在使用Ajax发送POST请求时，需要设置这一请求头，然后使用send()方法来设置请求体内容。
POST请求的三个步骤：
* open方法
> xmlHttp.open("POST", URL, async);
* 添加Content-Type请求头
> xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
* send方法
> xmlHttp.send("username=zhangSan&password=123456"); //发送请求时指定请求体
代码：
<html>
<head>
<script type="text/javascript">
function createXMLHttpRequest() {
return new XMLHttpRequest();
}
window.onload = function() {
var btn = document.getElementById("btn");
btn.onclick = function() {
var xmlHttp = createXMLHttpRequest();
/**********************使用POST请求****************************/
xmlHttp.open("POST", "<c:url value=http://www.mamicode.com/‘/AServlet‘/>", true);
/**********************设置请求头******************************/
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
/**********************发送请求时指定请求体，可以在后台用getParameter()获得参数*********************/
xmlHttp.send("username=zhangSan&password=123456");
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var h1 = document.getElementById("h1");
h1.innerHTML = xmlHttp.responseText;
}
}
}
}
</script>
</head>
<body>
<button id="btn">点击这里，POST</button>
<h1 id="h1"></h1>
</body>
</html>
——第三例：注册表单之校验用户名是否注册
1、编写页面：
* regist.jsp
> 给出注册表单页面
> 给用户名文本框添加onblur事件的监听
> 获取文本框的内容， 通过Ajax四步发送给服务器，得到响应结果
- 如果为1：在文本框后显示“用户名已被注册”
- 如果为0：什么都不做
2、编写Servlet
* ValidateUsernameServlet
> 获取客户端传递的用户名参数
> 判断是否为wyc
- 存在：返回1
- 不存在：返回0
代码：
<html>
<head>
<script type="text/javascript">
window.onload = function(){
// 获取文本框，给它的失去焦点事件注册监听
var userEle = document.getElementById("usernameID");
userEle.onblur = function(){
// 1、得到异步对象
var xmlHttp = createXMLHttpRequest();
// 2、打开链接
xmlHttp.open("POST", "<c:url value=http://www.mamicode.com/‘/ValidateUsernameServlet‘ />", true);
// 3、设置请求头
xmlHttp.setRequestHeader("Content-Type", "applicatio n/x-www-form-urlencoded");
// 4、发送请求，给出请求体
xmlHttp.send("username=" + userEle.value);
// 5、给xmlHttp的onreadystatechange事件注册监听
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
// 获取服务器的响应，判断是否为1
// > 1：获取span，添加内容“用户名已被注册”
var text = xmlHttp.responseText;
// 得到span元素
var span = document.getElementById("errorSpan");
if(text == "1"){
span.innerHTML = "<font color=‘red‘>用户名已被注册</font>";
} else {
span.innerHTML = "";
}
}
};
};
function createXMLHttpRequest(){
return new XMLHttpRequest();
};
};
</script>
</head>
<body>
<h1>用户名是否被注册</h1>
<form action="" method="post">
用户名：<input type="text" name="username" id="usernameID"/><span id="errorSpan"></span><br/>
<input type="button" id="sub" value="http://www.mamicode.com/注册"/>
</form>
</body>
</html>
——第四例：响应内容为XML
当服务器向客户端响应XML时，要将文本转换成XML的Document对象，然后通过解析DOM来操作。
服务端设置：
> 设置响应头：Content-Type，其值为：text/xml;charset=utf-8
客户端：
> var doc = xmlHttp.responseXML; // 得到的是Document对象
代码：
<html>
<head>
<script type="text/javascript">
// 创建异步对象
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();
} catch (e) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("您的浏览器不支持Ajax");
throw e;
}
}
}
}
// 文档加载完毕后执行
window.onload = function() {
// 获取按钮
var btn = document.getElementById("btn");
// 给按钮的点击事件注册监听
btn.onclick = function() {
/*
* 四步操作：
* 1、得到异步对象
* 2、打开与服务器的连接
* 3、发送请求
* 4、给异步对象的onreadychangestatechange事件注册监听器
*/
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET", "<c:url value=http://www.mamicode.com/‘/Bservlet‘ />", true);
// GET请求没有请求体，但也要给出null，否则FireFox可能不兼容
xmlHttp.send(null);
// 当xmlHttp的状态发生变化时执行
xmlHttp.onreadystatechange = function() {
// 双重判断，判断服务器响应结束和响应成功
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
/*************************************************************************************************/
// 获取服务器的响应结果（XML）
var doc = xmlHttp.responseXML;
// 获取文档下名为student的所有元素，得到数组，再获取第一个元素
var ele = doc.getElementsByTagName("student")[0];
// 获取number属性值
var number = ele.getAttribute("number");
// 获取student下的子元素
// 处理浏览器差异问题
var name;
var age;
var gender
if(window.addEventListener){
name = ele.getElementsByTagName("name")[0].textContent; // textContent，大多数浏览器支持
age = ele.getElementsByTagName("age")[0].textContent; // textContent，大多数浏览器支持
gender = ele.getElementsByTagName("gender")[0].textContent; // textContent，大多数浏览器支持
} else {
name = ele.getElementsByTagName("name")[0].text; // text，IE支持
age = ele.getElementsByTagName("age")[0].text; // text，IE支持
gender = ele.getElementsByTagName("gender")[0].text; // text，IE支持
}
var text = number + ", " + name + ", " + age + ", " + gender;
document.getElementById("h1").innerHTML = text;
/*************************************************************************************************/
};
};
};
};
</script>
</head>
<body>
<button id="btn">点击这里</button>
<h1 id="h1"></h1>
</body>
</html>
——第五例：省市联动
1、页面
<select name="province">
<option>==请选择省份===</option>
</select>
<select name="province">
<option>==请选择城市===</option>
</select>
2、ProvinceServlet
* 当页面加载完毕后马上请求这个Servlet
* 它需要加载china.xml文件，把所有的省的名称使用字符串发送给客户端。
3、页面
* 获取这个字符串，使用逗号分隔，得到数组。
* 循环便利每个字符串（省份的名称），使用每个字符串创建一个<option>元素，将元素添加到<select name="province">中。
4、CityServlet
* 当页面选择某个省时，发送请求。
* 得到省份的名称，加载china.xml文件，查询出该省份对应的元素对象，然后把这个元素转换成XML字符串，然后发送给客户端。
5、页面
* 把<select name="city">中的所有子元素删除，但不要删除<option>=== 请选择城市 ===</option>
* 得到服务器的响应结果：Document对象。
* 获取所有的<city>子元素，循环遍历，得到<city>的内容。
* 使用每个<city>的内容创建一个<option>元素，添加到<select name="city">中。
china.xml
<?xml version="1.0" encoding="UTF-8"?>
<china>
<province name="北京">
<city>东城区</city>
<city>西城区</city>
</province>
<province name="天津">
<city>和平区</city>
<city>河东区</city>
</province>
</china>
----------------------------------------------------------------------------------------------------------------------------
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
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="http://www.mamicode.com/">
<title>My JSP ‘ajax7.jsp‘ starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript">
/*
* 1、在文档加载完毕时发送请求，得到所有省份名称，显示在<select name="province">中
* 2、在选择了新的省份时，发送请求（参数为省份名），得到XML文档，即<province>元素
* 3、解析XML文档，得到七中的所有<city>，再得到每个<city>元素的内容，即市名，使用市名生成<option>元素，并插入到<select>元素中。
*/
window.onload = function() {
function createXMLHttpRequest() {
return new XMLHttpRequest();
}
/*
* 1、Ajax四步
* * 请求ProvinceServlet，得到所有省份名称
* * 使用每个省份名称创建一个<option>元素，添加到<select name="province">元素中
*/
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET", "<c:url value=http://www.mamicode.com/‘/ProvinceServlet‘ />", true);
xmlHttp.send(null);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
// 获取服务器响应
var text = xmlHttp.responseText;
// 使用逗号分隔，得到省份数组
var arr = text.split(",");
// 循环遍历每个省份名称，生成一个option对象，然后添加到<select>元素中
for (var i = 0; i < arr.length; i++) {
// 创建一个指定名称的元素
var op = document.createElement("option");
// 为元素设置实际值
op.value = http://www.mamicode.com/arr[i]; // 设置op的实际值为当前省份名称
// 设置显示值
var textNode = document.createTextNode(arr[i]); // 创建文本节点
op.appendChild(textNode); // 把文本节点添加到op元素中，指定其显示值
document.getElementById("p").appendChild(op);
}
}
};
/*
* 1、给<select name="province">添加改变事件监听器
* 2、使用选择的省份名称请求CityServlet，得到<Province>元素（XML）元素
* 3、获取<province>元素中所有的<city>元素，然后遍历获取每个<city>中的文本内容，即市名称
* 4、使用每个城市名称创建<option>元素，并添加到<select name="city">元素中
*/
var proSelect = document.getElementById("p");
proSelect.onchange = function() {
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("POST", "<c:url value=http://www.mamicode.com/‘/CityServlet‘/>", true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send("province=" + this.value);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
/*
* 1、把select中的所有option移除，除了“请选择”
*/
var citySelect = document.getElementById("c");
// 获取所有子元素
var optionList = citySelect.getElementsByTagName("option");
// 循环遍历每个option元素，然后在citySelect中移除
while (optionList.length > 1) {
// 如果子元素的个数大于1就循环，等于1就不循环了，最终会留下“请选择”
citySelect.removeChild(optionList[1]); // 每次都移除第二个
}
// 得到响应的XML元素
var doc = xmlHttp.responseXML;
// 得到所有名为city的元素
var cityList = doc.getElementsByTagName("city");
for (var i = 0; i < cityList.length; i++) {
// 得到city元素
var city = cityList[i];
var cityName;
// 处理浏览器的差异
if (window.addEventListener) {
// 火狐等浏览器兼容
cityName = city.textContent;
} else {
// 支持IE
cityName = city.text;
}
// 使用城市名称创建option元素，添加到<select name="city">元素中
var op = document.createElement("option");
// 设置实际值
op.value = http://www.mamicode.com/cityName;
// 设置显示值
var textNode = document.createTextNode(cityName);
op.appendChild(textNode);
citySelect.appendChild(op);
}
}
};
};
};
</script>
</head>
<body>
<h1>省市联动</h1>
<select name="province" id="p">
<option>=== 请选择省 ===</option>
</select>
<select name="city" id="c">
<option>=== 请选择市 ===</option>
</select>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------
ProvinceServlet
package com.wyc.web.servlet;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.io.IOUtils;
import org.dom4j.Attribute;
import org.dom4j.Document;
import org.dom4j.io.SAXReader;
public class ProvinceServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
/*
* 响应所有省份名称，使用逗号分隔
*/
/*
* 1、Document对象
* * 创建解析器对象
* * 调用解析器的read()方法，传递一个流对象，得到Document
*/
try {
SAXReader reader = new SAXReader();
InputStream input = this.getClass().getResourceAsStream("/china.xml");
Document doc = reader.read(input);
/*
* 查询所有province的name属性，得到全部省份名
* 循环便利，把所有的属性值连接成一个字符串，发送给客户端
*/
List<Attribute> list = doc.selectNodes("//province/@name");
StringBuilder sb = new StringBuilder();
for(Attribute attr : list){
sb.append(attr.getValue() + ",");
}
System.out.println(sb.toString());
response.getWriter().print(sb.substring(0, sb.length()-1));
} catch(Exception e) {
throw new RuntimeException(e);
}
}
}
----------------------------------------------------------------------------------------------------------------------------
CityServlet
package com.wyc.web.servlet;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.io.IOUtils;
import org.dom4j.Attribute;
import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.Element;
import org.dom4j.Node;
import org.dom4j.io.SAXReader;
import org.xml.sax.XMLReader;
public class CityServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
/*
* 获取省份名称，加载该省份对应的<province>元素
* 把元素转换成字符串发送给客户端
*/
/*
* 1、获取省份名称
* 2、使用省份名称查找到对应的<province>元素
* 3、把<province>元素转换成字符串
* 4、发送给客户端
*/
try {
/*
* 得到Document
*/
SAXReader reader = new SAXReader();
InputStream input = this.getClass().getResourceAsStream("/china.xml");
Document doc = reader.read(input);
/*
* 获取参数
*/
String pname = request.getParameter("province"); // 获取省份名称
Element ele = (Element) doc.selectSingleNode("//province[@name=‘" + pname + "‘]");
/*
* 把元素转换成字符串
*/
String xml = ele.asXML();
/*
* 向客户端响应XML
* 需要将Content-Type改为：text/xml;charset=utf-8
*/
response.setContentType("text/xml;charset=utf-8");
response.getWriter().print(xml);
} catch(Exception e) {
throw new RuntimeException(e);
}
}
}
——Ajax小工具
编写一个js文件。
// 创建request对象
function createXMLHttpRequest(){
return new XMLHttpRequest();
}
/*option对象属性
请求方式method, 请求URLurl, 是否异步asyn, 请求体内容params, 回调方法callback, 服务器相应数据转换类型type
*/
function ajax(option){
/*
* 1、得到xmlHttp
*/
var xmlHttp = createXMLHttpRequest();
/*
* 2、打开连接
*/
if(!option.method){
// 默认为GET请求
option.method = "GET";
}
if(option.asyn == undefined){
// 默认为异步处理
option.asyn = true;
}
xmlHttp.open(option.method,option.url,option.asyn);
/*
* 3、判断是否为POST请求
*/
if(option.method == "POST"){
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}
/*
* 4、发送请求
*/
xmlHttp.send(option.params);
/*
* 5、注册监听
*/
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var data;
// 获取服务器的响应数据进行转换
if(!option.type){
// 默认为纯文本
data = http://www.mamicode.com/xmlHttp.responseText;
} else if(option.type == "xml"){
data = http://www.mamicode.com/xmlHttp.responseXML;
} else if(option.type == "text"){
data = http://www.mamicode.com/xmlHttp.responseText;
} else if(option.type == "json"){
var text = xmlHttp.responseText;
data = http://www.mamicode.com/eval("(" + text + ")");
}
// 调用回调方法
option.callback(data);
}
}
}
----------------------------------------------------------------------------------------------------------------------------
在JSP页面中进行调用
<script type="text/javascript" src="http://www.mamicode.com/"></script>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
/*
* 1、发送请求
*/
ajax(
{
url:"<c:url value=http://www.mamicode.com/‘/AServlet‘ />",
type:"json",
callback:function(data){
document.getElementById("h2").innerHTML = data.name + ", " + data.age;
}
}
);
};
};
</script>
</head>
<body>
<h1>演示自己封装的小工具</h1>
<%-- 点击按钮后把服务器响应的数据显示到h2元素中 --%>
<h1>Hello World</h1>
<button id="btn">点击这里</button>
<h2 id="h2"></h2>
</body>
Ajax学习笔记
