ajax是异步的JavaScript和XML。ajax是一种通过在后台与服务器进行少量数据交换，在无需重新加载整个网页的情况下，更新部分网页的技术。
如何实现ajax请求
- 创建XMLHttpRequest实例。通过创建一个XMLHttpRequest对象得到一个实例，调用实例的
open()方法为这次ajax请求设定相应的HTTP方法，相应的地址以及是否异步。 - 发送HTTP请求。调用
send()方法发送请求，其可以接收一个参数，即要作为请求主题所发送的数据。 - 接收服务器响应数据。监听readystatechange事件，通过该实例的readyState属性来判断请求状态，其分为0，1，2，3，4四种状态，4表示请求完成且响应就绪。这时可通过HTTP的status判断请求结果，进行相应的操作。
下面是一个ajax请求改变文本内容的实例。
var xhr;
if(window.XMLHttpRequest) {
//ie7+,firefox,chrome,safari,opera
xhr = new XMLHttpRequest();
} else {
//ie5,ie6
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange = function() {
if(xhr.readyState==4 && xhr.status==200) {
console.log(xhr.responseText);
}
}
xhr.open("GET", "xhr_info.txt", true);
xhr.send(null);
ajax创建XMLHttpRequest对象
XMLHttpRequest用于在后台与服务器交换数据。
创建XMLHttpRequest对象：
var xhr;
if(window.XMLHttpRequest) {
//ie7+,firefox,chrome,safari,opera
xhr = new XMLHttpRequest();
}else {
//ie5,ie6
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
ajax向服务器发送请求
使用XMLHttpRequest对象的open()和send()。
//请求类型，文件在服务器上的位置，是否异步
xhr.open("GET", "ajax_info.txt", ture);
xhr.send(null);
- GET还是POST
GET和POST是TCP/IP协议中两种发送请求的方法，本质上都是TCP链接。他们运输数据的渠道有些不一样，GET通过URL传递参数，POST放在request body中传递参数。
与POST相比，GET更简单也更快(只产生一个数据包)，在大部分情况下可以使用。
以下情况一般使用post
- 无法使用缓存文件
- 向服务器发送大量数据(POST没有数据量限制)
- 发送包含未知字符的用户输入时
-
url--服务器上的文件
url相对于执行代码的当前页面，也可为绝对路径。 -
异步--true或false
如果异步，则有：
- 在等待服务器响应时执行其他脚本
- 当响应就绪后对响应进行处理
-
send()方法接收一个参数，即要作为请求主题发送的数据。如不需要发送数据则传入null。
ajax服务器响应
如需获取来自服务器的响应，可以使用XMLHttpRequest对象的responseText或responseXML属性。
- responseText
如果来自服务器的响应并非XML，使用responseText将返回字符串响应数据。
document.getElementById("mydiv").innerHTML = xhr.responseText;
-
responseXML
如果来自服务器的响应是XML，而且需要XML对象进行解析，可使用responseXML获得XML形式的响应数据。 -
status
响应的HTTP状态。服务器常用的状态码如下:
- 200 服务器响应正常
- 304 该资源在请求后没有做任何修改（通常用于浏览器的缓存机制）
- 400 无法找到请求的资源
- 404 访问的资源不存在
- 500 服务器内部错误
- readyState
表示请求/响应过程的当前活动阶段。
可取的值如下：
- 0: 未初始化。尚未调用
open()方法。- 1: 启动。已经调用
open()方法，但尚未调用send()方法。- 2: 发送。已经调用
send()方法，但尚未接收到响应。- 3: 接收。接收到部分响应数据。
- 4: 完成。接收到全部响应数据，而且已可以在客户端使用了。
onreadystatechange事件
当请求发送到服务器时，我们需要执行一些基于响应的任务。
只要readyState属性的值由一个值变成另一个值，都会触发一次onreadystatechange事件，可以利用这个事件来检测每次状态变化后的readyState的值。
当readyState==4且status==200时，响应就已经就绪。
xhr.onreadystatechange = function() {
if(xhr.readyState==4) {
//服务器完成了请求或客户端执行GET请求但文件未发生变化(后者通常用于浏览器的缓存机制)
if((xhr.status>=200 && xhr.status<=300) || xhr.status==304) {
console.log(xhr.responseText);
}else{
console.log("request error."+xhr.status);
}
}
}
使用回调函数
回调函数是一种以参数形式传递给另一个函数的函数。如果网页存在多个ajax任务，可以为创建XMLHttpRequest对象编写一个标准的函数，并为每个ajax任务调用该函数。该函数调用应该包含URL和发生onreadystatechange事件时执行的任务。
下面是一个调用回调函数与服务器进行交互的实例。
//ajax_func.js
var xhr;
function changeContent(url, cfunc) {
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange = cfunc;
xhr.open("GET", url, true);
xhr.send(null);
}
function ajaxFunc() {
changeContent("ajax_info.txt", function() {
if(xhr.readyState==4) {
if(xhr.status==200 || xhr.status==304) {
document.getElementById("mydiv").innerHTML = xhr.responseText;
}else{
alert("request error." + xhr.status);
}
}
})
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>ajax回调函数</title>
</head>
<body>
<div id="mydiv" >
<h1>ajax回调函数</h1>
</div>
<button type="button" onclick="ajaxFunc()" ></button>
</body>
<script src="ajax_func.js" > </script>
</html>
网友评论