之前的一篇博客，对Ajax的理解Ajax核心对象 XMLHTTPRequest五步学会使用 ，对Ajax的作用和基本使用有了一些了解。
这里做一个简单总结，AJAX核心对象XMLHTTPRequest和服务器的交互过程：
过程：初始化→发送请求→等待服务器响应→接收响应
1.创建XMLHTTPRequest对象
2.使用open()方法设置和服务器端交互的相应参数，包括发送HTTP请求的方式(get orpost) ，请求的URL，是否异步方式交互
3.使用send()方法发送HTTP请求
4.使用onreadystatechange事件监听服务端反馈，根据readyState属性判断和服务器端的交互是否完成，还要根据status属性判断服务器是否正确返回了数据，完成后接受服务器端返回的数据。
这个过程是原始的AJAX的实现过程，对初学者明白这个过程是很有必要的。其实这里有一个更简单的实现方法——jQuery。
jQuery AJAX方法 $.load()
以之前的一篇博客为例，这里用jQuery load() 方法来实现：（把远程数据加载到被选的元素中）
我要评论
<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>
通过上例的实现，当我们引入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：存放返回的数据的元素，示例中的
load的三个参数：
URL(必须的)：这个不用说都知道，请求的URL地址；
data(可选的)：发送至服务器的key/value 数据；
callback(可选的)：请求完成后想要执行的函数（不管请求成功或者失败）。
服务端
//服务端
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("返回校验页面");
}
} finally {
out.close();
}
}
XML
AJAX
AJAX
1
AJAX
/AJAX
30
前端显示
vcD4KPGgxPs60zeq94S4uLjwvaDE+CjxwPjwvcD4KPHA+ICAgINX9yOfJz8Pmy/nLtbXEo6wkLmxvYWQoKcrHalF1ZXJ51tDX7rzytaW1xEFKQVi3vbeoo6zWrrrztPjAtMbky/y1xGpRdWVyeQogQUpBWLe9t6ihozwvcD4KPHA+Cjx0YWJsZSBhbGlnbj0="center" border="1" cellpadding="1" cellspacing="1" width="600">
$(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 文件
如对本文有疑问， 点击进行留言回复！！
offset、client、scroll (width,height、left,top、X,Y)
网友评论