AJAX(Asynchronous JavaScript and XML) , 异步的JavaScript和XML
注:AJAX是一种可以实现网页异步更新的技术,这意味着可以在不重复加载整个网页的情况下,对网页局部内容进行更新
JS原生和JQuery实现AJAX异步处理
- JS原生
XMLHttpRequest对象是JS实现AJAX的基础,所有现代浏览器(Chrome、Safarii、IE7+等)均内建有该对象。
注:老版本的IE(IE5/IE6)使用ActiveXObject对象
创建XMLHttpRequest对象
var xhr;
if(window.XMLHttpRequest)
{
xhr = new XMLHttpRequest(); //Chrome、IE7+、Safari等
}
else
{
xhr = new ActiveXObject("Microsoft.XMLHTTP"); //IE5、IE6
}
向服务器发送请求
- open(method, url, async) method 请求类型(GET或POST);url 请求的服务器地址;async (true异步,false同步)
- send(string) string 仅用于POST请求传参
注:GET请求时,为避免得到缓存的请求结果,需要在url后添加一个唯一ID参数(使用Math.random()函数)
//GET请求(参数直接添加在url后面)
xhr.open("GET", "response.php?code=mycode&t=" + Math.random(), true);
xhr.send();
//POST请求(参数添加到send()方法中,需要为xhr对象添加HTTP头信息)
xhr.open("POST", "response.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("code=mycode");
获取服务器响应状态及响应数据
响应状态
- onreadystatechange 每当xhr对象的readyState状态改变时,会调用该函数
- readyState 记录xhr对象的状态(0请求未初始化; 1服务器建立连接;2请求已接收;3请求处理中;4请求完成)
- status http状态(200 “OK”)
响应数据
- responseText 获取字符串形式的响应数据
- responseXML 获取XML形式的响应数据
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4 && xhr.status == 200)
{
xhr.responseText;
}
}
下面是完整的JS原生实现AJAX请求GET和POST示例代码(后端使用PHP)
→前端
<html>
<head>
<title>js for ajax</title>
<script type="text/javascript">
//创建XMLHttpRequest对象
function getxhr()
{
var xmlHttp;
if(window.XMLHttpRequest)
{
//Chrome、IE7+、Safari等
xmlHttp = new XMLHttpRequest();
}
else
{
//IE5、IE6
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}
//GET请求
function ajax_get()
{
var xhr1 = getxhr();
xhr1.open("GET","response.php?name=colin&t="+Math.random(),true);
xhr1.send();
xhr1.onreadystatechange = function()
{
if(xhr1.readyState == 4 && xhr1.status == 200)
{
document.getElementById("res1").innerHTML += xhr1.responseText;
}
}
}
//POST请求
function ajax_post()
{
var xhr2 = getxhr();
xhr2.open("POST","response.php",true);
xhr2.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr2.send("name=jason");
xhr2.onreadystatechange = function()
{
if(xhr2.readyState == 4 && xhr2.status == 200)
{
document.getElementById("res2").innerHTML += xhr2.responseText;
}
}
}
</script>
</head>
<body>
<div id="time"><?php echo date('Y-m-d h:i:s'); ?></div>
<div id="res1"></div>
<div id="res2"></div>
<input type="button" value="ajax_get" onclick="ajax_get()" />
<input type="button" value="ajax_post" onclick="ajax_post()" />
</body>
</html>
→后端
<?php
if($_GET["name"])
$name = $_GET["name"];
else if($_POST["name"])
$name = $_POST["name"];
echo $name.", 你好";
?>
→页面显示
注:点击“ajax_get”和“ajax_post”按钮,对服务器进行请求,页面显示的时间不会改变,证明请求过程是异步执行的,只有刷新当前页面时间才会改变
- JQuery
JQuery是一个JS库,其中对原生JS的AJAX进行了封装,使得操作更加简洁、高效,下面介绍基于JQuery的几个主要AJAX函数
GET请求函数
$.get(url, data, function(data, status, xhr), dataType)
POST请求函数
$.post(url, data, function(data, status, xhr), dataType)
注:请求参数描述,其中data为发送至服务器的请求数据,可以是json或key=value形式(建议json格式);function为回调函数,额外参数data、status、xhr分别为服务器返回的数据数据、请求状态和XMLHttpRequest对象
AJAX请求函数
$.ajax({name:value, name:value, ... })
请求参数描述如下,常用参数有url、data(请求数据:常用json格式)、async(true异步,false同步)、type(请求类型:GET/POST)、dataType(服务器返回数据类型:常用text和json)、success、error等
基于JQuery的GET、POST和AJAX函数请求实例(后端使用PHP)
→前端
<html>
<head>
<title>jquery for ajax</title>
<!-- 注意引入JQuery库 -->
<script type="text/javascript" src="./jquery-1.11.2.min.js" /></script>
<script type="text/javascript">
function jq_ajax_get()
{
var data = '{"name":"zen","age":18}'; //设置请求数据
$.get("response.php", data, function(data, status, xhr){ //回调函数
$("#res1").html(data); //将请求返回的结果设置为div的innerHTML值
},"json");
}
function jq_ajax_post()
{
var data = '{"name":"link","age":23}'; //设置请求数据
$.post("response.php",data,function(data, status, xhr){ //回调函数
$("#res1").html(data); //将请求返回的结果设置为div的innerHTML值
},"json");
}
function jq_ajax()
{
$.ajax({
url:"response.php",
data:{"name":"bob","age":37},
async:true,
type:"GET",
dataType:"text",
success:function(result,status,xhr){
$('#res3').html(result);
},
error:function(xhr,status,error){
$('#res3').html(error);
}
});
}
</script>
</head>
<body>
<div><?php echo date('Y-m-d h:i:s'); ?></div>
<div id="res1"></div>
<div id="res2"></div>
<div id="res3"></div>
<input type="button" value="jq_ajax_get" onclick="jq_ajax_get()" />
<input type="button" value="jq_ajax_post" onclick="jq_ajax_post()" />
<input type="button" value="jq_ajax" onclick="jq_ajax()" />
</body>
</html>
→后端
<?php
if($_GET["name"])
$name = $_GET["name"];
else if($_POST["name"])
$name = $_POST["name"];
if($_GET["age"])
$age = $_GET["age"];
else if($_POST["age"])
$age = $_POST["age"];
echo $name.", 你好,年龄:".$age;
?>
→页面显示
注:点击“jq_ajax_get”、“jq_ajax_post”和“jq_ajax”按钮,通过JQuery对服务器进行请求,页面显示的时间不会改变,证明请求过程是异步执行的,只有刷新当前页面时间才会改变