ajax异步请求
同步是排队,异步即并行
js请求
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function showText(text){
var span = document.getElementById("span");
span.innerHTML = text;
}
function test(){
var uname = document.getElementById("uname").value;
var upass = document.getElementById("upass").value;
//Ajax
//创建到了一个Ajax的请求对象
var xhr = new XMLHttpRequest();
//设置回调方法
xhr.onreadystatechange = function(){
//共分为5个状态码: 0 1 2 3 4
if(xhr.status==200&&xhr.readyState==4){
//在这里代表响应已经结束, 且响应正常
//获取ajax中的 响应结果
var text = xhr.responseText;
if(text=="ok"){
showText("登录成功");
}else{
showText("登录失败, 请检查您的帐号或者密码");
}
}else if(xhr.stauts!=200){
showText("暂时无法登录 ,请联系管理员~");
}
}
//打开一个请求
/**
参数1. String:请求方式
参数2. String:请求的url
参数3. boolean:是否异步请求
*/
xhr.open("get","login.do?uname="+uname+"&upass="+upass,true);
//发起一个请求
//参数: 当请求方式为get时, 传递null
//参数: 当请求方式为post时 , 传递参数
// 例如: 要传递用户名+密码: "uname=xxx&upass=xxx"
xhr.send(null);
}
</script>
</head>
<body>
<form action="login.do">
帐号:<input name="uname" id="uname"/><span id="span"></span><br><br>
密码:<input type="password" id="upass" name="upass"/><br><br><br>
<input type="button" onclick="test()" value="登录"/>
</form>
</body>
</html>
script标签里写事件触发的代码
创建XMLHttpReqeust对象
设置回调函数 -- *.onreadystatechange = function(){}
打开一个请求 -- *.open(“请求方式”,”url”,boolean true);
-- url不需要加/,否则报错
发生这个请求 -- *.send(参数/null);
-- 如果是post方式需要在send()里传参,但事先需要设置*.setRequestHeader(“content-type”,”application/x-www-form-urlencoded”);
等待在步骤3回调函数中进行结果的处理
*.readyState; -- 1 执行的状态码 0 1 2 3 4
-- 0请求未初始化 1请求正在发送 2发生完毕 3响应交互中 4响应完成
*.status; -- 服务器沟通的状态码,200为正常
*.responseText; -- 或许响应的信息
jquery请求
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
var count = 0;
$(":button").click(function(){
count++;
//向服务器发起Ajax请求, 将获取的数据填充到div中
/**
url: 请求的地址
type:请求的方式
dataType: 服务器响应的数据类型, JSON/text
data: 携带的参数
success: 成功时执行的回调函数
error: 失败时 执行的回调函数
*/
$.ajax({
"url":"test.do",
"type":"get",
"dataType":"json",
"data":"count="+count,
"success":function(data){
//data就是获取到的数据 ,
//如果dataType是JSON, 那么data就是一个JSON对象
//如果dataType是text,那么data就是一个字符串
$("div").html("<img src='"+data.src+"'/>");
$("div").html($("div").html()+"<br>");
$("div").html($("div").html()+"<span>"+data.name+"</span>");
$("div").html($("div").html()+"<br>");
$("div").html($("div").html()+data.rmb+" ");
$("div").html($("div").html()+"<input type='button' value='查看详情'/>");
},
"error":function(xhr){
//xhr就是XMLHttpRequest
alert(xhr.readyState+","+xhr.status);
}
});
});
});
</script>
</head>
<body>
<input type="button" value="获取商品" />
<div id="div"></div>
</body>
</html>
Jquery常用的Ajax请求方法
$.ajax
$.ajax({
url:请求的地址,
type:请求的方式,
dataType:JSON/text,
async:true,//默认为true异步,false为同步,
data:"key=value" || {"key":value},
success:function(data){data是成功获取服务器的数据},
error:function(xhr){xhr.Status:服务器的错误号,xhr.readyState:执行的状态码}
});
$.get/$.post
$.get/post(“url”,”参数”,function(data){当获取响应结果执行的函数},”JSON/text”);
$.getJSON
$.getJSON(“url”,”参数”,function(data){获取响应结果执行的函数});
$(选择器).load
$(选择器).load(“url”[,”参数”,”function(data){同上}”]);
-- 中括号可写可不写,将返回的结果填充到选择器当中,
常用语页面的引用。