ajax:Asynchronous JavaScript And XML
一、概念
Ajax 是一种在无需重新加载整个网页的情况下，能够局部刷新网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
-
异步和同步：客户端和服务端相互通信的基础上
- 同步：客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
- 异步：客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。
-
Ajax技术特点
- 异步
- 局部刷新
二、原生js实现方式【不推荐使用】
1.创建核心对象
if(window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// ie5,6
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
}
2.指定请求方式
- get请求(方法,url,是否异步)
// 指定方式
xmlhttp.open("get", "/jquery/index?name=xiaoqing&age=20", true);
// 发送请求
xmlhttp.send();
- post请求
// 指定方式
xmlhttp.open("post", "/jquery/index")
// 指定数据格式，这里以表单为例
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 发送请求
xmlhttp.send("name=xiaoqing&age=18");
3.指定回调函数
// 回调函数
xmlhttp.onreadystatechange = function () {
// xmlhttp.readyState=4表示就绪状态，
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
// xmlhttp.responseText是服务器返回的响应体
$("选择器").text(xmlhttp.responseText)
}
}
三、JQuery实现方式【强烈推荐使用】
1.jquery中ajax的语法格式
- 通用格式：
$.ajax({key:value...}) - 使用模板
$.ajax({
url: "/jquery/index",
type: "get"/"post",
data: {"name":"xiaoqing","age":18}, // ?username=xiaoqing&age=18 或者在请求体中
success: function (data) {
$("选择器").text(data)
},
error: function (e) {
$("选择器").text(e)
},
dataType: "text" // 响应格式
})
案例
<body>
<div style="display: inline-block; height: 100px; width: 400px; background-color: darkcyan">
<input id="getMethod" type="button" value="get请求">
<input id="postMethod" type="button" value="post请求">
<p id="back"></p>
</div>
</body>
<script>
$(function () {
$("#getMethod").click(function () { myAjax("get"); });
$("#postMethod").click(function () {myAjax("post")});
function myAjax(method) {
$.ajax({
url: "/jquery/index",
type: method,
data: {"name":"xiaoqing","age":18},
success: function (data) {
$("#back").text(data)
},
error: function (e) {
$("#back").text(e)
},
dataType: "text" // 响应格式
})
}
})
</script>
-
$.get(): 发送get请求- 语法：
$.get(url, [data], [callback], [type]) - 参数
- url: 请求参数
- data: 请求参数
- callback: 回调函数
- type: 响应结果的类型
案例
- 语法：
$.get("/jquery/index",
{"name":"xiaoqing","age":18},
function (data) { $("#back").text(data) },
"text" // "json"
)
-
$.post(): 发送post请求- 语法：
$.post(url, [data], [callback], [type]) - 参数：
- url: 请求路径
- data: 请求参数
- callback: 回调函数
- type: 响应结果的类型
案例
- 语法：
$.post(
"/jquery/index",
{"name":"xiaoqing","age":18},
function (data) {
$("#back").text(data)
},
"json" // "text" // 响应格式
)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery发送请求</title>
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
</head>
<body>
<div style="display: inline-block; height: 100px; width: 400px; background-color: darkcyan">
<input id="getMethod" type="button" value="get请求">
<input id="postMethod" type="button" value="post请求">
<p id="back"></p>
</div>
</body>
<script>
$(function () {
$("#getMethod").click(function () { myAjax("get"); });
$("#postMethod").click(function () {myAjax("post")});
function myAjax(method) {
$.ajax({
url: "/xiaoyu/asp/mapping",
type: method,
dataType: "json", // 响应格式
contentType: 'application/json;charset=UTF-8',
data: JSON.stringify({"name":"xiaoqing","age":18}),
success: function (data) {
$("#back").text(data)
},
error: function (e) {
$("#back").text(e)
},
})
}
})
</script>
</html>
