1.简单介绍：
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页 的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
AJAX不是一种新的编程语言，而是一种使用现有标准的新方法。
2. 前台后台数据交互： 使用 XMLHttpRequest对象
创建 XMLHttpRequest对象：
var request;
if(window.XMLHttpRequest){
request=new XMLHttpRequest();
}
else{
request=new ActiveXObject("Microsoft.XMLHTTP"); //ie5 ie6
}
HTTP请求：
一个HTTP请求一般由四个部分组成：
1. 请求的动作、方法
2. 正在请求的url
3. 请求头：包含一些客户端环境信息，身份验证信息等。
4. 请求体
HTTP相应一般由三部分组成：
1. 一个数字和文字组成的状态码，用来显示请求是否成功。
2. 响应头：包含服务器的一些信息
3. 响应体。
3. XMLHttpRequest 发送请求：
该对象的一些方法： open(method,url,async)
send(string) string可以为空
4. XMLHttpRequest 取得响应
responseText: 获得字符串形式的响应
responseXML : 获得xml 形式的响应数据
readyState属性：0 1 2 3 4
readyState的每一次变化会出发函数 request.onreadyStatechange=function(){}
例：
request.onreadyStateChange=function(){
if(request.readyState===4&&
request.status===200
){
//做一些事情
//request.responseText
}
}
简单介绍 json
JSON解析： 1.eval 2. JSON.parse (推荐使用)
推荐校验工具： jsonlint.com
使用JQuery实现Ajax
Jquery在异步提交方面封装的很好，直接用AJAX非常麻烦，Jquery大大简化了我们的操作，
不用考虑浏览器的诧异了。
jquery.ajax([settings]);
一般格式：
$.ajax({
type: 'POST',
url: url ,
data: data ,
success: success ,
dataType: dataType
});
关于jquery.ajax();
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="Public/js/jquery-easyui-1.3.1/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
//按钮单击时执行
$("#testAjax").click(function(){
//Ajax调用处理
var html = $.ajax({
type: "POST",
url: "test.php",
data: "name=garfield&age=18",
async: false
}).responseText;
$("#myDiv").html('<h2>'+html+'</h2>');
});
});
</script>
</head>
<body>
<div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
<button id="testAjax" type="button">Ajax改变内容</button>
</body>
</html>
这里结合实际项目中的需求，演示 ajax的使用。springmvc+hibernate框架：
jsp部分代码：
<script type="text/javascript">
// 为了验证合同编号 是否有重复的出现，这里采用 焦点事件+ajax 来实现 author: pc 2016-06-28
$(document).ready(function() {
$("#number").focus(function() {
//获得焦点 ，不做处理
// $("#number").css("background-color","#FFFFCC");
});
var valid = true;
$("#number").blur(function() {
// 使用ajax 提交填写的合同编号
if (valid) {
$.ajax({
type : "POST",
url : "addorupdatecontractInspect.json",
dataType : "json",
data : {
// 键值对的形式
number : $("#number").val(),
},
async : true,
success : function(data) {
if (data.numberError == true) {
$("#numberError").html("该合同编号已存在,请更改!");
//禁止提交
// e.preventDefalut();
} else {
//数据库中没有该合同编号，不处理
}
},
error : function() {
// ajax 提交错误处理
alert("请求有误");
}
});
}
;
});
})
</script>下面的代码看 绿色标记的地方。
<tr >
<!-- 这个地方使用了ajax 验证数据库中是否已经存在 pc 20160628-->
<th >合同编号:（<font color="red">*</font>）</th>
<td align="left" ><form:input id="number" type="text" value="${contract.contractNumber }"
path="contractNumber" /><form:errors cssClass="error" path="contractNumber" >
</form:errors> <span style="background-color: rgb(51, 255, 51);"></span>
<span style="background-color: rgb(51, 255, 51);"><span style="color: red;" id="numberError">${numberError}</span></span></td>
</tr>
controller:
@RequestMapping(value = {"addorupdatecontractInspect.json"})
public @ResponseBody Map<String,Boolean> contractNumberInspect(HttpSession session,
HttpServletRequest request) {
Map<String,Boolean> map = new HashMap<String,Boolean>();
String contractNumber=request.getParameter("number");
if(contractService.getContractByContractNumber(contractNumber)!=null){
map.put("numberError", true);
}
else
map.put("numberError", false);
return map;
}contractService.getContractByContractNumber()方法：
public Contract getContractByContractNumber(String contractNumber) {
@SuppressWarnings("unchecked")
List<Contract> list = (List<Contract>) hibernateTemplate.find(
"from Contract a where a.contractNumber=?", contractNumber );
if(list.size()>0){
return list.get(0);
}
else
return null;
}
注意：
这里提交的时候，，使用的后缀是 .json，使用 .html会报以下错误
Failed to load resource: the server responded with a status of 406 (Not Acceptable)
The resource identified by htis request is only capable of generating responses with
characteristics not
acceptable
according to the request "accept" headers.
这里贴出 配置文件和maven中相关依赖包。
web.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_2_5.xsd" version="2.5">
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/spring/root-context.xml</param-value>
</context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<servlet>
<servlet-name>appServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/spring/appServlet/servlet-context.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<span style="background-color: rgb(51, 255, 51);"> <servlet-mapping>
<servlet-name>appServlet</servlet-name>
<url-pattern>*.json</url-pattern>
</servlet-mapping></span>
<servlet-mapping>
<servlet-name>appServlet</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
</web-app>pom.xml
<!-- jackson -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>${jackson.version}</version>
</dependency>
<dependency>
<groupId>javax.xml.bind</groupId>
<artifactId>jaxb-api</artifactId>
<version>${jaxb-api.version}</version>
<scope>runtime</scope>
</dependency>
参考文章：
http://blog.csdn.net/wabiaozia/article/details/50117561#comments
http://blog.csdn.net/zhujianli1314/article/details/43193183
http://chinesethink.iteye.com/blog/1552070
http://blog.csdn.net/wabiaozia/article/details/50803581
http://blog.csdn.net/wabiaozia/article/details/50601515
4998
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
