本篇文章主要解释浏览器环境下，针对ajax的HTTP请求以及如何通过ajax与服务器实现简单的数据交互。文中会给出实践性代码以便初学者对ajax的实际应用有一个初步的认识。
关于它们的知识背景和定义在此不再赘述。在此贴上关于HTTP的参考文章和XHR对象的详细解释。
- 前端必备HTTP技能之XMLHttpRequest对象详解:
http://www.jianshu.com/p/7dc28f991f99 - 你需要了解的HTTP知识都在这里了！
http://www.jianshu.com/p/a6d086a3997d - 一次完整的浏览器请求流程
http://www.jianshu.com/p/fbe0e9fa45a6 - HTTP请求响应报文&&相关状态码&&GET_POST请求方法 总结
http://www.jianshu.com/p/56b90403789c
先明确两个概念：HTTP请求和响应
HTTP请求
一个HTTP请求分为四个部分：
- 请求方法(get/post)
- 请求地址URL
- 一个可选的请求头集合。可能包括身份验证信息
- 一个可选的请求主体
HTTP响应
分为三个部分：
-
一个数字和文字组成的状态码，用来显示请求的成功或失败
-
一个响应头集合
-
响应主体
那么，如何通过js发起一个请求呢？
不管是get还是post，概括来说，发起请求在具体执行的时候分为三步
1.创建XHR对象
2.调用open()方法并且配置请求参数
3.调用send()方法指定可选的请求主体并且发送到服务器
下面是一个简单的get请求实例,这个实例能够读取一个json文件，并且把json数据在控制台中打印出来。
<script type="text/javascript">
function showJson(){
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest(); //其他浏览器
}else if(window.ActiveXObject){
xmlhttp = new window.ActiveXObject(); //IE5，6
}else {
alert("请升级浏览器！");
}
if(xmlhttp != null){
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState ==4 && xmlhttp.status==200){
console.log(xmlhttp.responseText)
var obj = JSON.parse(xmlhttp.responseText);
console.log(obj)
}
}xmlhttp.open("GET","test.json?t="+Math.random(),true); xmlhttp.send(null); } } window.onload = function(){ showJson(); } </script>
先来看open方法。这里传了三个参数，请求方法，URL，是否异步。其中true代表异步。一般都是异步。
可以看到，URL中，我给test.json加了一个 ?t=Math.random()，为什么呢？因为如果重复请求，可能得到的是缓存数据。为了确保得到的是最新的json文件，我给每次请求的URL添加一个唯一的ID。
另外，我们经常会通过url发送一些参数给服务器。也是通过这种方式发送的。例如URL:
10347.json?fname=august&lname=leone
到此，open()方法的基本用法我们搞定了。值得注意的是，open()方法还可以有第4，第5个参数用来传递用户名和密码，一般用于POST请求。这里先不说POST。
再来看send()方法。
send()方法：指定可选的请求主体并且发送到服务器 。
由于GET请求没有主体。所以上面的代码传递的是null(也可以省略这个参数)
而POST请求通常都有主体。这里我们先不说POST。
到此，一个完整的get请求我们已经了解了。现在来谈谈响应。
先来介绍几个XHR对象的重要属性。
1.onreadystatechange事件：每当readyState属性改变就会触发。
2.readyState属性：从0-4
- 0: UNSENT open()未调用，请求未初始化。
- 1: OPENED open()已调用 服务器连接已建立。
- 2: HEADERS_RECEIVED 接收到头信息
- 3: LOADING 接收到响应主体，处理请求中
- 4: DONE 响应完成
3.status: 状态码，用来显示请求的成功或失败。 - 200: "OK"
- 404: "未找到页面"
现在再来看上面的代码，是不是一目了然？
通过监听onreadystatechange事件，readyState为4，status为200时，打印数据。
题外话：
1.如果open的第三个参数为false，也就是同步，怎么写呢？
这时，不用编写onreadystatechange函数。直接open,send,然后操作xmlhttp.responseText就可以啦。
2.如果一个页面有多个ajax任务，怎么办？
为创建XHR对象编写一个标准的函数。参数包括url和一个callback。这样，需要的时候直接调用就好了。
网友评论