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>@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("结束了");
} <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>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回调函数。
1471
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
