前端知识点整理系列(一)—— Ajax

        

2017-05-14

准备找实习了,打算对前端的基础知识点做一些整理,做为找实习前的准备,这将会是一个系列的文章总结。


今天,我们来谈谈Ajax

首先来看看Ajax的全称是什么? AJAX = Asynchronous JavaScript and XML(异步的 JavaScript
和 XML)。

Ajax被使用之前,假如我们要更新页面内容的话,需要重新加载整个的页面,但Ajax出现后,改变了这个劣势,我们可以在不重新加载整个网页的情况下,对网页的某部分进行更新。现如今,Web开发的过程中,Ajax已经普遍化了,在我们身边处处可见。例如谷歌,百度的搜索引擎,当我们在搜索框输入查询的内容时,提示框会实时更新而不需要重新加载网页,这就是用到了Ajax技术。
下面整理一下Ajax的工作原理。
Ajax的核心是XMLHttpRequest对象,它是Ajax实现的关键——发送异步请求,接收响应及执行回调都是通过它来完成的。

实现Ajax的基本步骤

  1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象.
  2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
  3. 设置响应HTTP请求状态变化的函数.
  4. 发送HTTP请求.
  5. 获取异步调用返回的数据.
  6. 使用JavaScript和DOM实现局部刷新.

我们先来看看原生javascript的ajax实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function Ajax(){
//声明一个空对象来装入XMLHttpRequest对象
var xmlHttpReq = null;
//实例化XMLHttpRequest对象
if(window.ActiveXobject){ //IE5.6是以ActiveXobject的方式实现
xmlHttpReq = new ActiveXobject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){ //除IE5,6以外的浏览器实现
xmlHttpReq = new XMLHttpRequest();
}
//调用open()方法并采用异步方式
xmlHttpReq.open("GET","test.php",true);
//将请求发送到服务器(post可加入参数string)
xmlHttpReq.send();
//请求状态改变回调
xmlHttpReq.onreadystatechange=function(){
if (xmlHttpReq.readyState==4 && xmlHttpReq.status==200){
document.getElementById("myDiv").innerHTML=xmlHttpReq.responseText;
}
}
}

下表是readyState对应的状态码和描述
| 属性 | 描述 |
| ————- |:————-:|
| onreadystatechange | 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 |
| readyState 0| 请求未初始化 |
| readyState 1 | 服务器连接已建立 |
| readyState 2 | 请求已接收 |
| readyState 3 | 请求处理中 |
| readyState 4 | 请求已完成,且响应已就绪 |


再罗列一些http状态码吧。
| 状态码 | 描述 |
| ————- |:————-:|
| 200 | OK 一切正常,对GET和POST请求的应答文档跟在后面 |
| 301 | Moved Permanently 客户请求的文档在其他地方,新的URL在Location头中给出,浏览器应该自动地访问新的URL。 |
| 302 | Found 类似于301,但新的URL应该被视为临时性的替代,而不是永久性的。 |
| 304 | Not Modified 客户端有缓冲的文档并发出了一个条件性的请求(一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档)。服务器告诉客户,原来缓冲的文档还可以继续使用。 |
| 400 | Bad Request 请求出现语法错误。 |
| 403 | Forbidden 资源不可用。 |
| 404 | Not Found 无法找到指定位置的资源 |
| 500 | Internal Server Error 服务器遇到了意料不到的情况,不能完成客户的请求 |
| 501 | Not Implemented 服务器不支持实现请求所需要的功能。例如,客户发出了一个服务器不支持的PUT请求 |


我们再看看jQueryajax的实现是怎么样的。在jQuery$.ajax()方法属于最底层的方法,第二层是load(),$.get()方法,第三层是$.getScript()和$.getJSON()方法。我只整理一下$.ajax()方法,因为我平时用的最多。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$.ajax({
url: "http://www.microsoft.com", //请求的url地址
dataType: "json", //返回格式为json
async: true, //请求是否异步,默认为异步,这也是ajax重要特性
data: { "id": "value" }, //参数值
type: "GET", //请求方式
beforeSend: function() {
//请求前的处理
},
success: function(data,textStatus) {
//请求成功时处理
alert(data);
},
complete: function() {
//请求完成的处理
},
error: function() {
//请求出错处理
}
});

本篇的Ajax使用就总结到这里,当然还有一些方法并未能全部的总结。在以后使用中,我会把它们也总结下来。