Ajax
一、介绍
1.1 简介
Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)
Ajax是一种使用现有标准的方法而不是新的编程语言
Ajax可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容
Ajax不需要插件,但是需要浏览器可以运行JavaScript
1.2 Ajax所包含的技术
- 使用CSS和XHTML表示
- 使用DOM模型来交互数据
- 使用XMLHttpRequest来和服务器进行异步通信
- 使用JavaScript来绑定和调用
理解:无需刷新的方式是通过JavaScript
二、工作原理
Ajax的工作原理是在用户和服务器之间使用了一个中间层(Ajax引擎)来负责交互,从而使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
三、使用
3.1 XMLHttpRequest 常用属性
-
onreadystatechange 事实上属于事件句柄
onreadystatechange 属性存有处理服务器响应的函数
var xmlHttp; //... xmlHttp.onreadystatechange = function() { //我们需要在这写一些代码 }
-
readyState
readyState 属性存有服务器响应的状态信息。每当 readyState 改变时,onreadystatechange 函数就会被执行。
状态 描述 0 请求未初始化(在调用 open() 之前) 1 请求已提出(调用 send() 之前) 2 请求已发送(这里通常可以从响应得到内容头部) 3 请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应) 4 请求已完成(可以访问服务器响应并使用它) 响应验证
xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4) { //从服务器的response获得数据 } }
-
responseText
可以通过 responseText 属性来取回由服务器返回的数据
xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4) { document.myForm.time.value = xmlHttp.responseText; } }
-
responseXML
对请求的响应,解析为 XML 并作为 Document 对象返回
-
status
由服务器返回的 HTTP 状态代码,如 200 表示成功,而 404 表示 “Not Found” 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常
-
statusText
这个属性用名称而不是数字指定了请求的 HTTP 的状态代码
3.2 XMLHttpRequest 方法
-
open() 方法
open() 有三个参数。第一个参数定义发送请求所使用的方法,第二个参数规定服务器端脚本的URL,第三个参数规 定应当对请求进行异步地处理
xmlHttp.open("GET","test.php",true);
-
send() 方法
send() 方法将请求送往服务器
xmlHttp.send(null);
-
abort()
取消当前响应,关闭连接并且结束任何未决的网络活动
-
getAllResponseHeaders()
把 HTTP 响应头部作为未解析的字符串返回
-
getResponseHeader()
返回指定的 HTTP 响应头部的值。其参数是要返回的 HTTP 响应头部的名称。可以使用任何大小写来制定这个头部名字,和响应头部的比较是不区分大小写的
-
setRequestHeader()
向一个打开但未发送的请求设置或添加一个 HTTP 请求
3.3 Ajax编程步骤
- 创建XMLHttpRequest对象
- 设置请求方式
- 调用回调函数
- 发送请求
3.3.1 创建XMLHttpRequest对象
var xmlHttp;
if (window.XMLHttpRequest) {
//非IE
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
//IE
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
}
3.3.2 设置请求方式
- 参数1:设置请求类型(GET 或 POST)
- 参数2:文件在服务器上的位置
- 参数3:是否异 步处理请求,是为true,否为false
var url = "http://localhost:8080/JsLearning3/getAjax";
xmlHttp.open("POST", url, true);
3.3.3 调用回调函数
果在上一步中open方法的第三个参数选择的是true,那么当前就是异步请求,这个时候需要写一个回调函数, XMLHttpRequest对象有一个onreadystatechange属性,这个属性返回的是一个匿名的方法,所以回调函数就在 这里写xmlHttp.onreadystatechange=function{},function{}内部就是回调函数的内容
//第三步:注册回调函数
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var obj = document.getElementById(id);
obj.innerHTML = xmlHttp.responseText;
} else {
alert("AJAX服务器返回错误!");
}
}
}
3.3.4 发送请求
//设置发送请求的内容和发送报送。然后发送请求
var uname= document.getElementsByName("userName")[0].value;
var upass= document.getElementsByName("userPass")[0].value ;
var params = "userName=" + uname+ "&userPass=" +upass+ "&time=" + Math.random();
// 增加time随机参数,防止读取缓存
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");
// 向请求添加 HTTP 头,POST如果有数据一定加加!!!!
xmlHttp.send(params);
四、jQuery操作Ajax
4.1 ajax()
$.ajax({
url:请求地址
type:"get | post | put | delete " 默认是get,
data:请求参数 {"id":"123","pwd":"123456"},
dataType:请求数据类型"html | text | json | xml | script | jsonp ",
success:function(data,dataTextStatus,jqxhr){ },//请求成功时
error:function(jqxhr,textStatus,error)//请求失败时
})
4.2 get() 方法通过远程 HTTP GET 请求载入信息
data是参数信息,通过 parameter=value 的形式
$.get(url,data,function(result) {
//省略将服务器返回的数据显示到页面的代码
});
4.3 post() 方法通过远程 HTTP GET 请求载入信息
data是参数信息,通过 parameter=value 的形式
$.post(url,data,function(result) {
//省略将服务器返回的数据显示到页面的代码
});
五、Ajax和Json
栗子
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
$(function(){
$("[name='uid']").blur(function(){
var uid=$(this).val();
$.ajax({
url:"getuser",
data:"userid="+uid,
type:"post",
dataType:"JSON",//设置服务器端响应回来的格式
success:function(rs){
//alert(rs.username);
$("[name='uname']").val(rs.username);
$("[name='address']").val(rs.address);
if(rs.sex=='男'){
$("#boy")[0].checked=true;
}else{
$("#girl")[0].checked=true;
}
}
});
});
})
</script>
</head>
<body>
userid:<input type="text" name="uid"><br>
username <input type="text" id="uname" name="uname"><br>
address <input type="text" id="address" name="address"><br>
sex:<input type="radio" name="sex" id="boy">男
<input type="radio" name="sex" id="girl">女
</body>