ajax从入门到放弃

发表于   |   分类于 ，   |  

写在前面

一晃已经三月份了，从去年10月底开始学习到html到现在红宝书翻完，感觉自己什么都懂一点，却又说不出哪里懂。。。。索性辞职好好学段时间。趁着今天辞职说一说ajax

ajax从入门到放弃

AJAX的作用

AJAX即(asynchronous Javascript And XML) 简而言之就是实现页面和web服务器之间的数据异步传输。
举个例子：当我们正常浏览网页的时候，在页面发出请求，就要等待服务器回应响应，然后再下载整个的页面。这个过程是同步的，在等待过程中用户不能做任何事，而且我们有时候只是需要部分的信息，而不是全部的页面信息。这时候AJAX就运应而生。有了AJAX之后，浏览器在发出请求后，用户还能继续做其他事，而且WEB服务器和浏览器之间之传输我们需要的数据，时间和用户体验程度会大大改善。

ajax分为哪几步

我感觉其实ajax并不难，概念也很好懂。主要就是分为这四步

  • 生成一个ajax请求.(创建引擎)针对不同的浏览器有不同的方法，这里暂时只针对于现代浏览器;
1
var xml=new XMLHttpRequest();

  • 设置事件处理函数，处理服务器的响应结果。

    1
    2
    3
    4
    5
    6
    7
    8
    xml.onreadystatechange=function(){
        if(xml.readyState===4&& xml.status===200){
            var json=JSON.parse(xml.responseText);
        }else if(xml.readyState===4&& xml.status===404){
            console.log("出错啦！");    
    }
    }
    这里状态码 下面一会补充

  • 打开一个连接open允许客户端用一个Ajax调用向服务器发送请求

    1
    xml.open(type,url,asynch);
1
2
3
4
5
三个参数的含义如下：

 * method：请求类型，类似 “GET”或”POST”的字符串
 * url：请求路径字符串，指向所请求的服务器上的那个文件（servlet，jsp，action）
 *  asynch：表示请求是否要异步传输，默认值为true(异步)
  • 发送数据send(data)
    1
    2
    xml.send(data)；
    这里根据请求类型的不同有所区别

封装一个ajax函数(跨浏览器那种的)

感觉上面的说的有点力不从心。写一个跨浏览器都能使用的ajax函数，来尝试说明

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
var xmlhttp = false;//初始化

function ajax(opts) {
    //跨浏览器创建xhr对象
    xmlhttp = false;
    if (window.XMLHttpRequest) { //现代浏览器
        xmlhttp = new XMLHttpRequest();
        if (xmlhttp.overrideMimeType) { //设置MIME类别，针对某些特定版本的mozillar浏览器的BUG进行修正
            xmlhttp.overrideMimeType('text/xml');
        }
    } else if (window.ActiveXObject) { //针对IE5,6
        try {
            xmlhttp = new ActiveXObject("Msxm12.XMLHTTP");
        } catch (e) {
            try {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
    }
     if (!xmlhttp) { //异常，创建xhr对象实例失败
        alert('Giving up :( Cannot create an XMLHTTP instance');
        return false;
    }
    xmlhttp.onreadystatechange=function (){
    if(xmlhttp.readyState===4 && xmlhttp.status===200){
        var json=JSON.parse(xml.responseText);
        opts.success(json);
    }else if(xmlhttp.readyState===4 && xmlhttp.status===404){
        opts.error();
    }
    }
    var str="";//新建一个空字符串
    for (var key in opts.date){
        str+=(key+"="+opts.date[key]+"&");
    }
    //除去最后一位的"&"
    str=str.replace(/&$/,"");
    
    if(opts.type.toLowerCase()==="get"){
    xmlhttp.open(opts.type,opts.url+"?"+str,true);
    xmlhttp.send();
    }
    
    if(opts.type.toLowerCase()==="post"){
    xmlhttp.open(opts.type,opts.url,true);
          xml.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    xmlhttp.send(str);
    }
}
ajax({
    url:"ajax.php",
    type:"post",
    date:{
        name:"李瑞",
        age:"22"
    },
    success:function(data){
        onSuccess(data);
    },
    error:function(){
        onSuccess();
    }
})

第二个就是状态码

ajax的几个状态码

1
2
3
4
5
6
7
readyState 属性表示Ajax请求的当前状态。它的值用数字代表。分别是：

      0 代表未初始化。 还没有调用 open 方法
      1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
      2 代表已加载完毕。send 已被调用。请求已经开始
      3 代表交互中。服务器正在发送响应
      4 代表完成。响应发送完毕
1
2
3
4
5
6
7
status 属性表示状态码，也是用数字表示，分别是：

      404 没找到页面(not found)
      403 禁止访问(forbidden)
      500 内部服务器出错(internal service error)
      200 一切正常(ok)
      304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改 )

最后一个例子.利用ajax 写的一个很简单的注册验证界面

服务器挂了 上床不上去，先看本地的示例图把
示例图简单的注册界面
点我查看github Demo