AJAX 简介
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
AJAX是基于现有的Internet标准
AJAX是基于现有的Internet标准,并且联合使用它们:
- XMLHttpRequest 对象 (异步的与服务器交换数据)
- JavaScript/DOM (信息显示/交互)
- CSS (给数据定义样式)
- XML (作为转换数据的格式)
创建 XMLHttpRequest 对象
所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。
创建 XMLHttpRequest 对象的语法:
variable=new XMLHttpRequest();
老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:
variable=new ActiveXObject("Microsoft.XMLHTTP");
为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject :
如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
xmlhttp.send();
方法 | 描述 |
---|---|
open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。
|
AJAX 响应
属性 | 描述 |
---|---|
responseText | 获得字符串形式的响应数据。 |
responseXML | 获得 XML 形式的响应数据。 |
案例点击打开链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax_demo</title>
<script>
function loadXMLDoc() {
var xmlhttp;
var userName = document.getElementById("userName").value;
var queryString = "AjaxDemo?userName="+userName;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
} else {
// IE6, IE5 浏览器执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("show").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST", queryString, true);
xmlhttp.send();
}
</script>
</head>
<body>
<form action="#">
<h2>获取姓名:</h2>
<input id="userName" type="text" />
<br>
<div id="show" style="border-bottom-color: red;" ></div>
<br>
<button type="button" οnclick="loadXMLDoc()">请点击</button>
</form>
</body>
</html>
servlet文档
package cn.oneday.ajaxdemo;
/**
* @author oneday
*/
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 AjaxDemo extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String encoding = "UTF-8";// 字符编码
request.setCharacterEncoding(encoding);// 请求编码
response.setContentType("text/html;charset=" + encoding);// 响应编码
PrintWriter out = response.getWriter();
String userName = request.getParameter("userName");
System.out.println(userName+"hhh");
String responseText = "UserName" + userName;
out.println(responseText);
out.close();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
xml文档
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>ajax_demo</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
<servlet>
<!-- servlet的内部名称,自定义。尽量有意义 -->
<servlet-name>AjaxDemo</servlet-name>
<!-- servlet的类全名: 包名+简单类名 -->
<servlet-class>cn.oneday.ajaxdemo.AjaxDemo</servlet-class>
</servlet>
<!-- servlet的映射配置 -->
<servlet-mapping>
<!-- servlet的内部名称,一定要和上面的内部名称保持一致!! -->
<servlet-name>AjaxDemo</servlet-name>
<!-- servlet的映射路径(访问servlet的名称) -->
<url-pattern>/AjaxDemo</url-pattern>
</servlet-mapping>
</web-app>
使用回调函数
回调函数是一种以参数形式传递给另一个函数的函数。
如果您的网站上存在多个 AJAX 任务,那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax_demo</title>
<script>
var xmlhttp;
var userName = document.getElementById("userName").value;
var queryString = "AjaxDemo?userName=" + userName;
function myFunction() {
loadXMLDoc(
queryString,
function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("show").innerHTML = xmlhttp.responseText;
}
});
}
function loadXMLDoc(url, statechange) {
if (window.XMLHttpRequest) {// IE7+, Firefox, Chrome, Opera, Safari 代码
xmlhttp = new XMLHttpRequest();
} else {// IE6, IE5 代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = statechange;
xmlhttp.open("POST", url, true);
xmlhttp.send();
}
</script>
</head>
<body>
<form action="#">
<h2>获取姓名:</h2>
<input id="userName" type="text" />
<br>
<div id="show" style="border-bottom-color: red;" ></div>
<br>
<button type="button" οnclick="loadXMLDoc()">请点击</button>
</form>
</body>
</html>