1、什么是AJAX请求
-
AJAX 即”Asynchronous Javascript And XML“（异步JavaScript和XML）
-
是指一种创建交互式网页应用的网页开发技术。
-
Ajax是一种浏览器通过js异步发起请求。局部更新页面的技术。
-
ajax请求的局部更新，浏览器地址栏不会发生改变
2、原生AJAX请求示例
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta content="no-cache" http-equiv="pragma"/>
<Meta content="no-cache" http-equiv="cache-control"/>
<Meta content="0" http-equiv="Expires"/>
<Meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>Insert title here</title>
<script type="text/javascript">
// 在这里使用JavaScript语言发起Ajax请求，访问服务器AjaxServlet中javascriptAjax
function ajaxRequest() {
//1、我们首先要创建XMLHttpRequest
var xmlHttpRequest = new XMLHttpRequest();
//2、调用open方法设置请求参数
/*
* 第一个参数method：请求的类型，GET或POST
* 第二个参数url：请求地址
* 第三个参数async：true（异步）或false（同步）
* */
xmlHttpRequest.open("GET", "http://localhost:8080/10_filter_json_ajax_i18n/ajaxServlet?action=javascriptAjax", true)
//4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
xmlHttpRequest.onreadystatechange = function () {
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
var jsonObj = JSON.parse(xmlHttpRequest.responseText);
// 把响应的数据显示到页面上
document.getElementById("div01").innerHTML = "JavaScript 编号= " + jsonObj.id + "，姓名= " + jsonObj.name;
}
}
//3、调用send方法发送请求
xmlHttpRequest.send();
}
</script>
</head>
<body>
<button onclick="ajaxRequest()">ajax request</button>
<div id="div01">
</div>
</body>
</html>
3、JQuery中的AJAX请求
1）$.ajax方法
- url 表示请求的地址
- type 表示请求的类型GET或POST请求
- data 表示发送给服务器的数据 ； 两种格式：
- name=value&name=value
- {key:value}
- success 请求成功，响应的回调函数
- dataType 响应的数据类型；常用数据类型有：
- text 表示纯文本
- xml 表示xml数据
- json 表示json对象
2）$.get方法和$.post方法
$.get(url,data,collback,type);
$.psot(url,data,collback,type);
3）$.getJSON方法
4）表单序列化 serialize()方法
示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta content="no-cache" http-equiv="pragma"/>
<Meta content="no-cache" http-equiv="cache-control"/>
<Meta content="0" http-equiv="Expires"/>
<Meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>Insert title here</title>
<script src="script/jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// ajax请求
$("#ajaxBtn").click(function () {
$.ajax({
url: "http://localhost:8080/10_filter_json_ajax_i18n/ajaxServlet",
data: "action=jQueryAjax",
type: "GET",
success: function (data) {
// data是服务器返回的数据
$("#msg").html("jQueryAjax 编号：" + data.id + "，姓名：" + data.name);
},
dataType: "json"
});
});
// ajax--get请求
$("#getBtn").click(function () {
$.get("http://localhost:8080/10_filter_json_ajax_i18n/ajaxServlet",
"action=jQueryGet",
function (data) {
$("#msg").html("jQueryGet 编号：" + data.id + "，姓名：" + data.name);
}, "json");
});
// ajax--post请求
$("#postBtn").click(function () {
$.get("http://localhost:8080/10_filter_json_ajax_i18n/ajaxServlet",
"action=jQueryPost",
function (data) {
$("#msg").html("jQueryPost 编号：" + data.id + "，姓名：" + data.name);
}, "json");
});
// ajax--getJson请求
$("#getJSONBtn").click(function () {
$.getJSON("http://localhost:8080/10_filter_json_ajax_i18n/ajaxServlet",
"action=jQueryGetJSON", function (data) {
$("#msg").html("getJSON 编号：" + data.id + "，姓名：" + data.name);
});
});
// ajax请求
$("#submit").click(function () {
// 把参数序列化
$.getJSON("http://localhost:8080/10_filter_json_ajax_i18n/ajaxServlet",
"action=jQuerySerialize&" + $("#form01").serialize(),
function (data) {
$("#msg").html("jQuerySerialize 编号：" + data.id + "，姓名：" + data.name);
});
});
});
</script>
</head>
<body>
<div>
<button id="ajaxBtn">$.ajax请求</button>
<button id="getBtn">$.get请求</button>
<button id="postBtn">$.post请求</button>
<button id="getJSONBtn">$.getJSON请求</button>
</div>
<div id="msg"></div>
<br/><br/>
<form id="form01">
用户名：<input name="username" type="text"/><br/>
密码：<input name="password" type="password"/><br/>
下拉单选：<select name="single">
<option value="Single">Single</option>
<option value="Single2">Single2</option>
</select><br/>
下拉多选：
<select multiple="multiple" name="multiple">
<option selected="selected" value="Multiple">Multiple</option>
<option value="Multiple2">Multiple2</option>
<option selected="selected" value="Multiple3">Multiple3</option>
</select><br/>
复选：
<input name="check" type="checkBox" value="check1"/> check1
<input checked="checked" name="check" type="checkBox" value="check2"/> check2<br/>
单选：
<input checked="checked" name="radio" type="radio" value="radio1"/> radio1
<inpu
t name="radio" type="radio" value="radio2"/> radio2<br/>
</form>
<button id="submit">提交--serialize()</button>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
