您的位置：首页 > 其它

AJAX入门

2016-06-27 12:25 423 查看

1.简单介绍：

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

AJAX不是一种新的编程语言，而是一种使用现有标准的新方法。

[b]2. 前台后台数据交互：使用 XMLHttpRequest对象[/b]

创建 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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享