Ajax学习笔记
|
时间：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完成局部刷新。
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;
}
}
}
}
<html>
<head>
<base href="<%=basePath%>">
<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='/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 >点击这里</button>
<h1 ></h1>
</body>
</html>
<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='/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 >点击这里，POST</button>
<h1 ></h1>
</body>
</html>
<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='/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" /><span ></span><br/>
<input type="button" value="注册"/>
</form>
</body>
</html>
<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='/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 >点击这里</button>
<h1 ></h1>
</body>
</html>
<?xml version="1.0" encoding="UTF-8"?>
<china>
<province name="北京">
<city>东城区</city>
<city>西城区</city>
</province>
<province name="天津">
<city>和平区</city>
<city>河东区</city>
</province>
</china>
----------------------------------------------------------------------------------------------------------------------------
<%@ 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="<%=basePath%>">
<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='/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 = 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='/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 = cityName;
// 设置显示值
var textNode = document.createTextNode(cityName);
op.appendChild(textNode);
citySelect.appendChild(op);
}
}
};
};
};
</script>
</head>
<body>
<h1>省市联动</h1>
<select name="province" >
<option>=== 请选择省 ===</option>
</select>
<select name="city" >
<option>=== 请选择市 ===</option>
</select>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------
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,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);
}
}
}
----------------------------------------------------------------------------------------------------------------------------
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,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);
}
}
}
// 创建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 = xmlHttp.responseText;
} else if(option.type == "xml"){
data = xmlHttp.responseXML;
} else if(option.type == "text"){
data = xmlHttp.responseText;
} else if(option.type == "json"){
var text = xmlHttp.responseText;
data = eval("(" + text + ")");
}
// 调用回调方法
option.callback(data);
}
}
}
---------------------------------------------------------------------------------------------------------------------------- 在JSP页面中进行调用
<script type="text/javascript" src="<c:url value='/ajax-lib/ajaxutils.js'/>"></script>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
/*
* 1、发送请求
*/
ajax(
{
url:"<c:url value='/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 >点击这里</button>
<h2 ></h2>
</body>
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |