技术博客

Ajax详解(上)

一、Ajax介绍

  • Asynchronous JavaScript and XML (异步的JavaScript和XML)

二、同步和异步

  • 同步：提交请求→等待服务器处理→处理完毕返回（这期间客户端浏览器不能执行别的代码）
  • 异步：请求通过事件触发→服务器处理（这时浏览器仍然可以执行其他代码）→处理完毕

XMLHttpRequest对象

  • XMLHttpRequest：用于在后台与服务器交换数据；通过它，我们可以很容易地取回一个URL上的资源数据，并且它可以取回所有类型的数据资源，并不局限于XML

三、XMLHttpRequest对象创建

1
var request = new XMLHttpRequest();

四、HTTP请求

超文本传输协议（HTTP）的设计母的是保证客户机与服务器之间的通信。

1.HTTP请求过程

  1. 建立TCP链接
  2. 浏览器向服务器发送请求命令
  3. 浏览器发送请求头信息
  4. 服务器应答
  5. 服务器发送应答头信息
  6. 服务器向浏览器发送数据
  7. 服务器关闭TCP连接

2.GET与POST请求

  • GET：一般用于信息获取、使用URL传递参数、对所发送信息的数量有限制，在2000个字符。
  • POST：一般用于修改服务器上的资源，对所发送信息的数量无限制。

4.HTTP请求组成部分

  1. HTTP请求的方法或动作，GET或POST
  2. 正在请求的URL
  3. 请求头，包含客户端环境信息，身份验证信息
  4. 请求体，包含客户提交的查询字符串信息，表单信息等
1
2
3
4
5
6
GET /login.php HTTP/1.1         // 请求头
Host:localhost
Connection:Keep-Alive
...

username=admin&password=123456  // 请求体

5.HTTP响应组成部分

  1. 一个数字和文字组成的状态码，用来显示请求是否成功
  2. 响应头，包含服务器类型、日期时间、内容类型和长度等
  3. 响应体，包含客户想从服务器获取的信息
1
2
3
4
5
6
7
HTTP/1.1 200 OK                 // 响应成功
Data:Sun,23 Nov 2014 10:14:45 GMT
Server:Apache
Content-Encoding:gzip
Content-Length:7112
Connection:Keep-Alive
Content-Type:application/javascript

6.request.status–HTTP状态码

  1. 1XX：信息类，表示收到浏览器请求，正在进一步的处理中
  2. 2XX：成功，表示用户请求被正确接收，如：200 OK
  3. 3XX：重定向，表示请求没有成功，客户必须采取进一步的动作
  4. 4XX：客户端错误，表示客户端提交的请求有错误，如：404 NOT Found，意味着请求中所引用的文档不存在
  5. 5XX：服务器错误，表示服务器不能完成对请求的处理，如：500

五、XMLHttpRequest发送请求

  • open(method,url,async)
  • send(string)
  • setRequestHeader()：向一个打开但未发送的请求设置或添加一个HTTP请求
1
2
3
4
5
6
7
// GET
request.open("GET","get.php",true);
request.send();
// POST
request.open("POST","creat.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=翌子涵&sex=男");

六、XMLHttpRequest取得响应

XHR的方法和属性

  1. responseText：获取字符串形式的响应数据
  2. responseXML：获得XML形式的响应数据
  3. status和statusText：以数字和文本形式返回HTTP状态码
  4. getAllResponseHeader()：获取所有的响应报头
  5. getResponseHeader()：查询响应中的某个字段的值
  6. readyState属性（存有XMLHttpRequest的状态码）
    • 0：请求未初始化
    • 1：服务器连接已建立
    • 2：请求已接收，也就是接收到头信息了
    • 3：请求处理中，也就是接收到响应主体了
    • 4：请求已完成，且响应已就绪，也就是响应完成了
1
2
3
4
5
6
7
8
9
// 整个请求的过程
var request = new XMLHttpRequest();
request.open("GET","get.php",true);
request.send();
request.onreadystatechange = function(){
  if(request.readyState === 4 && request.status === 200){
    // Todo
  }
}

七、客户端例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// 发送GET请求
document.getElementById("search").onclick = function(){
  // 发送Ajax查询请求
  var request = new XMLHttpRequest();
  request.open("GET","service.php?number=" + document.getElementByID("keyword").value);
  request.send();
  // 获取服务器响应
  request.onreadystatechange = function(){
    if(request.readyState === 4){
      if(request.status === 200){
        // 获取响应信息文本
        document.getElementById("searchResult").innerHTML = request.responseText;
      }else{
        alert("发生错误：" + request.status);
      }
    } 
  }
}

// 发送POST请求
document.getElementById("save").onclick = function(){
  // 发送Ajax查询请求
  var request = new XMLHttpRequest();
  request.open("POST","service.php");
  // 构造参数
  var data = "name=" + document.getElementById("staffName").value
           + "number=" + document.getElementById("staffNumber").value
           + "&sex=" + document.getElementById("staffSex").value
           + "&job=" + document.getElementById("staffJob").value;
  // 指定一个HTTP请求的头部，它应该包含在通过后续send()调用而发布的请求中
  request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  // 传入参数
  request.send(data);
  // 获取服务器响应
  request.onreadystatechange = function(){
    if(request.readyState === 4){
      if(request.status === 200){
        // 获取响应信息文本
        document.getElementById("searchResult").innerHTML = request.responseText;
      }else{
        alert("发生错误：" + request.status);
      }
    } 
  }
}