javascript之模拟ajax#

原javascript的异步请求方法#

很多人可能一直用jquery封装好的ajax异步请求，可能不知道原生javascript是怎么异步请求的，javascript是用XMLHttpRequest来创建异步对象的，以下是简单的请求方法。

1
    var ajax = new XMLHttpRequest();
2
    ajax.open('post','http://www.baidu.com');
3
    //因为是post请求所以必须加上setRequestHeader(get请求可以忽略)
4
    ajax.setRequestHeader('Content-type','text/plain;charset=UTF-8');
5
    //请求所带的参数
6
    ajax.send("username=123456");
7
    //绑定onreadystatechange事件
8
    ajax.onreadystatechange=function(){
9
    //判断如果请求的状态是否成功
10
      if (ajax.readyState==4&&ajax.status==200) {
11
            console.log("请求的结果是"+ajax.responseText);
12
    }
13
    };

简单封装，便于理解#

当然是我没有看到jquery是如何写的ajax，只是在自己理解范围写了这个ajax。

ajax.js

1
//requestParameter为一个JSON对象
2
var ajax=function(requestParameter){
3
  var requestObj = new XMLHttpRequest();
4
  var requestMethod=requestParameter.type.toLowerCase();
5
    switch(requestMethod){
6
      case "get":
7
        break;
8
      case "post":
9
        break;
10
      case "options":
11
        break;
12
      case "head":
13
        break;
14
      case "put":
15
        break;
16
      case "detele":
17
        break;
18
      case "trace":
19
        break;
20
      default:
21
        throw("ajax:type don't null");
22
        break;
23

24
    }
25
  //  请求地址及请求方法设置
26
  if (requestParameter.url) {
27
    requestObj.open(requestMethod,requestParameter.url);
28
  }else{
29
    throw("ajax:url don't null");
30
  }
31
  //请求头
32
  if (requestParameter.head) {
33
    requestObj.setRequestHeader('Content-type',requestParameter.head);
34
  }
35
  //请求参数，data为一个JSON对象并发送
36
  if (requestParameter.data) {
37
    var dataParameter="";
38
    for(var o in requestParameter.data){
39
      dataParameter+=o+"="+requestParameter.data[o]+"&"
40
    }
41
    dataParameter=dataParameter.substring(0,dataParameter.length-1)
42
    requestObj.send(dataParameter);
43
  }
44
  //结果返回
45
  requestObj.onreadystatechange=function(){
46
    var result={
47
      status:requestObj.status,
48
      result:requestObj.responseText
49
    };
50
    if (requestObj.readyState==4&&requestObj.status==200&&requestParameter.success) {
51
       requestParameter.success(result);
52
    }else if (requestObj.readyState==4&&requestParameter.error) {
53
      requestParameter.error(result);
54
    }
55

56
  }
57

58
  return requestObj;
59

60
};

简单调用#

1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>测试</title>
6
  <script src="ajax.js" type="text/javascript"></script>
7
</head>
8
<body>
9
    <!-- login('abc','123456') -->
10
    <input type="submit" value="登录" onclick="testLogin()"/><br>
11
</body>
12
<script type="text/javascript">
13
//登录
14
function testLogin(username,pass){
15
    ajax({
16
      url:"http://www.server.com",
17
      type:"post",
18
      data:{
19
        username:username,
20
        pass:pass
21
      },
22
      success:function(obj){
23
        console.log("index: 成功了，状态代码是"+obj.status+"返回结果"+obj.result);
24
      },
25
      error:function(obj){
26
        console.log("index: 失败了，状态代码是"+obj.status+"返回结果"+obj.result);
27
      }
28
    });
29
}
30
</script>
31
</html>

如果有觉得写不好，请在下方评论一起讨论