前言
之前的一篇博客,对Ajax的理解Ajax核心对象 XMLHTTPRequest五步学会使用 ,对Ajax的作用和基本使用有了一些了解。
这里做一个简单总结,AJAX核心对象XMLHTTPRequest和服务器的交互过程:
过程:初始化→发送请求→等待服务器响应→接收响应 |
2.使用open()方法设置和服务器端交互的相应参数,包括发送HTTP请求的方式(get orpost) ,请求的URL,是否异步方式交互
3.使用send()方法发送HTTP请求
4.使用onreadystatechange事件监听服务端反馈,根据readyState属性判断和服务器端的交互是否完成,还要根据status属性判断服务器是否正确返回了数据,完成后接受服务器端返回的数据。
这个过程是原始的AJAX的实现过程,对初学者明白这个过程是很有必要的。其实这里有一个更简单的实现方法——jQuery。
jQuery AJAX方法
$.load()
以之前的一篇博客为例,这里用jQuery load() 方法来实现:(把远程数据加载到被选的元素中)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
//从文本框中获取内容
var userName = document.getElementById("UserName").value;
//load()方法从服务器加载数据,并把返回的数据放入被选元素中。
//GET方式
$('#message').load("AJAX?name=" + userName);
//POST方式
//$('#message').load("AJAX?name=" + userName,{"Content-type":"application/x-www-form-urlencoded"});
});
});
</script>
</head>
<body>
<input type="text" id="UserName" value="admin"/>
<input type="button" id="btn" value="校验用户名"/>
<br/>
<div id="message"></div>
</body>
</html>
通过上例的实现,当我们引入jquery库后,一切变得好简单,只需要一行代码:
//GET方式
$('#message').load("AJAX?name="+ userName);
//POST方式
//$('#message').load("AJAX?name="+userName,{"Content-type":"application/x-www-form-urlencoded"});
我们不需要再关心AJAX的请求和响应这些过程了。
jQuery load()方法是jQuery中最简单但强大的AJAX方法,load() 方法从服务器加载数据,并把返回的数据放入被选元素中。它的语法如下:
$(selector).load(URL,data,callback);
说明:
selector:存放返回的数据的元素,示例中的<div id="message"></div>
load的三个参数:
URL(必须的):这个不用说都知道,请求的URL地址;
data(可选的):发送至服务器的key/value 数据;
callback(可选的):请求完成后想要执行的函数(不管请求成功或者失败)。
附:服务端和XML代码
服务端
//服务端
public class AJAX extends HttpServlet {
//服务器端代码
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
String old = request.getParameter("name");
if (old == null) {
out.println("用户名不能为空");
}else{
String name = new String(old.getBytes("ISO8859-1"),"gb2312");
//String name = URLDecoder.decode(old,"utf-8");
System.out.println(name);
if (name.equals("j")) {
out.println("用户名[" + name +"]已经存在,请使用其他用户名");
}else{
out.println("用户名[" + name +"]尚未存在,可以使用");
}
//out.println("<a href=\"classic.html\">返回校验页面</a>");
}
} finally {
out.close();
}
}
XML
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
<servlet>
<servlet-name>AJAX</servlet-name>
<servlet-class>AJAX</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>AJAX</servlet-name>
<url-pattern>/AJAX</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
</web-app>
前端显示
未完结...
正如上面所说的,$.load()是jQuery中最简单的AJAX方法,之后带来其它的jQuery AJAX方法。
$(selector).load(url,data,callback) | 把远程数据加载到被选的元素中 |
$.ajax(options) | 把远程数据加载到XMLHttpRequest 对象中 |
$.get(url,data,callback,type) $.post(url,data,callback,type) | 使用HTTP GET 来加载远程数据 |
$.getJSON(url,data,callback) | 使用HTTP GET 来加载远程 JSON 数据 |
$.getScript(url,callback) | 加载并执行远程的JavaScript 文件 |