AJAX基础知识:
AJAX英文全称为:Asynchronous Javascript And XML,它是客户端与服务端交互的方式。
交互的方式有两种:
同步/异步。
它的特点可以总结为8个字:
异步交互,局部刷新。
ajax并不是一个新的技术,而是用一些老的技术去实现一个新的web应用程序访问的效果(异步交互)。
涉及到的技术有:
html,css,javascript,dom,xml,servlet,jsp,json等。
javascript(缩写为js)与ajax的关系:
在使用js去完成ajax的异步交互,局部刷新的访问效果时,在这个过程中有一个最核心的对象:XMLHttpRequest。
异步交互主要依赖:
XMLHttpRequest对象的操作。
在js中使用XMLHttpRequest对象去实现异步交互。XMLHttpRequest对象最早出现在ie浏览器中,后来也被其他各大浏览器支持。(在实际应用中,如果想要使用该对象,需要在js中去先创建它,在创建它的时候,我们就会遇到浏览器兼容性问题,关于该问题的解决办法,会在下边的介绍中提到)。
局部刷新主要依赖:
dom对象。其英文全称为Document Object Model,翻译为文档对象模型。
dom使用的是面向对象的思想,它把文档(通常是xml,html,json等)中的元素和内容用对象的方式变现出来。
AJAX工作原理(摘自蚂蚁的博客地址:http://blog.sina.com.cn/s/blog_696986ce01012fql.html)
要了解ajax的工作原理,就要从理解XMLHttpRequest这个对象开始:
1)open()方法,建立到服务器的新请求,XMLHttpRequest对象的open方法会指定发送的请求,它有5个参数:
1.1)request-type:发送请求的方式get/post;
1.2)URL:要连接的URL;
1.3)asynch:值可以使true或是false,如果是true,表示该请求是异步的,否则是同步的;
1.4)username:身份验证(用户名),//这个我目前是没见过,只用过三参的(即包含前三个参数的open()方法)
1.5)password:身份验证(密码),//这个我目前也没见过。
2)send()方法,向服务器发送请求
一旦用open()配置好后,就可以发送请求了。send()方法只有一个参数,就是要发送的内容。但是在考虑这个方法之前,URL本身发送过数据的。虽然可以通过send()发送数据但URL本身也能够发送数据。事实上,get请求(在典型的ajax应用中大约占80%)中,用URL传递数据要容易的多。如果需要发送安全信息或xml,可能要考虑send()传递null作为方法参数即可。
3)abort()方法,退出当前请求;
4)readyState,提供当前HTML的状态;
5)responseText,服务器返回的响应文本;
6)onreadystatechange,回调方法(回调函数);
该属性允许指定一个回调函数。回调允许服务器反向调用js中定义的方法,它给了服务器一定程度的控制权,当服务器完成请求之后,会去查看XMLHttpRequest对象,特别是onreadystatechange属性的值。
7)responseXML,服务器返回的xml格式的对象文本
Ajax兼容性问题:
在原生态的AJAX代码中之所以会出现浏览器兼容问题主要是因为不同的浏览器对XMLHttpRequest对象的支持有不同。也就是说不同的浏览器在创建XMLHttpRequest对象时略有区别:在IE浏览器中使用ActiveXObject对象,而在其他浏览器中使用XMLHttpRequest对象,同时该对象也是js的内建对象。
示例代码为:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function ajaxFunction() {
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // ie msxml3.0+(IE7.0及以上)
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //ie msxml2.6(IE5/6)
} catch (e2) {
xmlHttp = false;
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}
</script>
</head>
<body>
<form name="myForm" action="" method="post">
用户: <input type="text" name="username" />
时间: <input type="text" name="time" />
</form>
</body>
</html>
--上边的代码引自wenwusq的博客地址http://blog.csdn.net/wenwusq/article/details/7943567。
在jQuery中的兼容性问题:在使用jQuery的AJAX时,使用get方式去检测数据是否存在时,出现ie浏览器不兼容问题。
解决办法:数据类型封装成json格式。这种情况,我还没有测过,这个问题是我在网上查询ajax兼容性问题时发现的。来源于王永涛365的博客,地址是:http://blog.sina.com.cn/s/blog_6c971aa301014mva.html。
原生态的AJAX实现的代码示例:
1)get方式的原生态AJAX代码示例(本例子同时也避免了中文参数乱码的问题):
前台页面代码:
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ajax commit use get method</title>
<script type="text/javascript">
function commitUseGet() {
//先创建XMLHttpRequest对象
var xmlhttp = createXMLHttpRequest();
var name = document.getElementById("name").value;
var url = "AjaxDemoServlet?time=" + new Date().getTime() + "&name=" + name;
//调用open方法
xmlhttp.open("get",url,true);
//调用回调函数callback
xmlhttp.onreadystatechange = callback;
//调用send方法发送数据,因为在open方法中的URL中已经包含了数据并且已发送,所以send()方法中的参数可以使null
//起到保护信息安全的作用
xmlhttp.send(null);
}
var xmlHttp;
function createXMLHttpRequest() {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // ie msxml3.0+(IE7.0及以上)
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //ie msxml2.6(IE5/6)
} catch (e2) {
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}
function callback() {
//判断readystate的值
if(xmlHttp.readyState == 4){//说明所有的信息都已加载成功
if(xmlHttp.status == 200){//说明客户端与服务端通信正常
alert(xmlHttp.responseText);
}
}
}
</script>
</head>
<body>
<form action="">
姓名:<input type="text" name="name" id="name">
<input type="button" value="提交" οnclick="commitUseGet()">
</form>
</body>
</html>
后台servlet代码:
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
resp.setContentType("text/html;charset=utf-8");
System.out.println("into ajaxservlet class=====>");
System.out.println("name = " + new String((req.getParameter("name")).getBytes("iso8859-1"),"utf-8"));
resp.getWriter().print("haha" + new String((req.getParameter("name")).getBytes("iso8859-1"),"utf-8"));
System.out.println("结束了");
}
web.xml中的配置:
<servlet>
<servlet-name>AjaxDemoServlet</servlet-name>
<servlet-class>com.gx.servlet.AjaxDemoServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AjaxDemoServlet</servlet-name>
<url-pattern>/AjaxDemoServlet</url-pattern>
</servlet-mapping>
2)post方式的原生态AJAX代码示例(本例子同时也避免了中文参数乱码的问题):
前台页面:
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript">
function commitUsePost() {
//先创建XMLHttpRequest对象
var xmlhttp = createXMLHttpRequest();
var name = document.getElementById("name").value;
var url = "AjaxDemoServlet?time=" + new Date().getTime();
//调用open方法
xmlhttp.open("post",url,true);
//设置传输的文件http头信息
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=" + name);
//调用回调函数callback
xmlhttp.onreadystatechange = callback;
}
var xmlHttp;
function createXMLHttpRequest() {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // ie msxml3.0+(IE7.0及以上)
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //ie msxml2.6(IE5/6)
} catch (e2) {
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}
function callback() {
//判断readystate的值
if(xmlHttp.readyState == 4){//说明所有的信息都已加载成功
if(xmlHttp.status == 200){//说明客户端与服务端通信正常
alert(xmlHttp.responseText);
}
}
}
</script>
</head>
<body>
<form action="">
姓名:<input type="text" name="name" id="name">
<input type="button" value="提交" οnclick="commitUsePost()">
</form>
</body>
</html>
后台servlet代码:
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
System.out.println("into ajaxservlet class=====>");
String username = req.getParameter("name");
System.out.println("name = " + username);
resp.getWriter().print("haha" + username);
System.out.println("结束了");
}
web.xml中的配置:
<servlet>
<servlet-name>AjaxDemoServlet</servlet-name>
<servlet-class>com.gx.servlet.AjaxDemoServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AjaxDemoServlet</servlet-name>
<url-pattern>/AjaxDemoServlet</url-pattern>
</servlet-mapping></span>
jQuery中的AJAX实现的代码示例:
想要用jQuery封装的Ajax方法,就必须首先在页面中引入jQuery的js文件。如果传送的数据格式是json的,那么在项目中我们还要有json的相关jar包,去解析这些数据。
get方式:
$.get("test.cgi", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});</span>
--摘自w3School,get()方法中三个参数,依次为目标URL,要传送的数据data在这个例子中可以看到它是一个json格式的对象,最后一个就是回调函数了。post方式:
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("/example/jquery/demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("数据:" + data + "\n状态:" + status);
});
});
});
</script>
</head>
<body>
<button>向页面发送 HTTP POST 请求,并获得返回的结果</button>
</body>
</html>
--摘自问w3School教程,在这个例子中post()方法中包含三个参数,依次为目标地址URL,要传到后台的信息data,在这个例子中是一个键值对的形式,最后一个就是callback回调函数。