js中ajax的认识运用与封装_js ajax 访问封装

1.认识ajax(ajax的操作必须在服务器上运行，并且不能跨域，只能访问同域名下的其他文件)

ajax基本格式 ↓↓

 <script>
    //ajax基本格式
        var xhr = new XMLHttpRequest();
        xhr.open('get' , '01-test.txt' , true);
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4){
                alert( xhr.responseText );
            };
        };

    /*注解
    1. var xhr = new XMLHttpRequest();
        创建一个ajax对象，ajax的实现都是要通过这个对象

    2. xhr.open(); 准备发送请求
        三个参数：
            第一个：通过什么方式
                'get'
                'post'

            第二个：访问谁
                url路径

            第三个：是否异步
                true
                false

     3. xhr.send(); 发送请求
        get方式时不需要参数

     4.xhr.onreadystatechange = function () {
         if (xhr.readyState == 4){
             执行函数
         };
       };

         .onreadystatechange 当readystate发生改变的时候触发
         .readyState 状态码
            0 ：请求还没有建立（open执行之前）；
            1 ：请求建立了，但是还没有发送（open刚执行）；
            2 ：请求正式发送了（send执行了）；
            3 ：请求已经受理，有一部分数据已经可用，但是还没有完全处理完；
            4 ：请求完全处理完成。
         .responseText 请求的页面返回的字符串数据
     */

</script>
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

form表单中get和post方法的区别↓↓

1.get

<form action="get.php" method="get">
    <input type="text" placeholder="请输入您的用户名" name="user"> <br>
    <input type="text" placeholder="请输入您的密码" name="pwd"><br>
    <input type="submit">
</form>
1
2
3
4
5

使用get方法进行表单提交，提交的信息会在url链接中显示出来，并且页面变成了一个新的页面。

2.post

<form action="post.php" method="post">
    <input type="text" placeholder="请输入您的用户名" name="user"> <br>
    <input type="text" placeholder="请输入您的密码" name="pwd"><br>
    <input type="submit">
</form>
1
2
3
4
5

使用post方法，虽然提交的信息没有在url中显示出来，但依然跳到了新的页面。

而在平时，有的页面中，我们要实现的效果是在不刷新页面不跳转页面的情况下进行页面中某一块信息的更新，这就要用到ajax。

2.ajax中get和post方法的写法以及运用

1.get ↓↓

var xhr = new XMLHttpRequest();
xhr.open('get' , 'get.php?user=afei&pwd=789' , true);    //使用get方法时，需要把要传的数据以user=afei&pwd=789的方式写在url?后面
xhr.setRequestHeader('content-type' , 'application/x-www-form-urlencoded');
xhr.send();                    //get方法时，send()可以不填参数
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4){
        alert( xhr.responseText );
    };
};
1
2
3
4
5
6
7
8
9

2.post ↓↓

 var xhr = new XMLHttpRequest();
xhr.open('post' , 'post.php' , true);           //post方法url后面不需要写数据
xhr.setRequestHeader('content-type' , 'application/x-www-form-urlencoded');
xhr.send('user=afei&pwd=456');                 //post方法把要传的数据写在send()中
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4){
        alert( xhr.responseText );
    }
};
1
2
3
4
5
6
7
8
9

3.ajax运用（获取数组、json数据） ↓↓

setInterval(function () {
    var xhr = new XMLHttpRequest();
    xhr.open('get' , 'data.txt' , true);       //data.txt是我提前写好的json文件，里面放着要获取的数据
    xhr.setRequestHeader('content-type' , 'application/x-www-form-urlencoded');
    xhr.send();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4){
            var data = eval( xhr.responseText );     //eval在这里会把获取到的json当做是js代码来读转成数组
            var oUl =document.querySelector('#box ul');  //将获取的数组追加到新增的ul，li中
            oUl.innerHTML = '';
            for (var i=0; i<data.length; i++){
                var oLi = document.createElement('li');
                oLi.innerHTML = '姓名：'+ data[i].name +'，年龄：' + data[i].age;
                oUl.appendChild(oLi);
            }
        }
    };
},3000)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

data.txt内容 ↓↓

[{
    "name" : "第一个",
    "age" : "20"
},{
    "name" : "第二个",
    "age" : "20"
},{
    "name" : "第三个",
    "age" : "19"
},{
     "name" : "第四个",
     "age" : "24"
},{
    "name" : "第五个",
    "age" : "22"
},{
    "name" : "第六个",
    "age" : "21"
}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

效果图（不刷新页面的情况下，每三秒更新一次） ↓↓

上面提到eval()方法，他会把传给他的所有参数都当成js代码来读，包括非json部分，这样不安全，可能会把不需要的内容转成全局变量，对我们的代码会有影响。

同样的还有一个方法，JSON.parse()，如果传入的不是json就不会转，并且传入的json中，属性和值都必须用‘’‘’双引号。

这两种方法均兼容IE9及以上，要兼容IE9以下，需下载json2.js进行引用。

3.ajax的封装

<script>
     /*
      xhr.status   http状态码
     */

     ajax({
         url : 'get.php',
         data : 'user=heihei&pwd=111',
         success : function ( msg ) {
             alert( msg );
         },
         error : function (std) {
             alert('访问出错，错误代码：' + std);
         }
     });

/*
    ajax函数接受一个json参数，该json可以有一下属性：
        type : string 选填，发送请求的方式，默认'get'，
        url : string 必填，访问的文件路径，
        aysn : boolean 选填，是否异步，默认true，
        data : string/json，选填，需要发送的数据，
        success : function 选填，请求成功后的回调函数，第一个形参代表返回的数据，
        error : function 选填，请求失败后的回调函数，第一个形参代表http状态码。
 */
function ajax(mJson) {
    var type = mJson.type || 'GET';
    var url = mJson.url;
    var aysn = mJson.aysn || true;
    var data = mJson.data;
    var success = mJson.success;
    var error = mJson.error;
    if ( typeof data === 'object' ){
        var str = '';
        for (var key in data){str += key + '=' + data[key] + '&'};
        data = str + '_=' + new Date().getTime();
    }else if (typeof data === 'string'){
        data += '&_=' + new Date().getTime();
    }
    if (data && /^get$/i.test(type))url += '?' + data;
    var xhr = new XMLHttpRequest();
    xhr.open(type , url , aysn);
    xhr.setRequestHeader('content-type' , 'application/x-www-form-urlencoded');
    xhr.send(data);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4){
            if (xhr.status >= 200 && xhr.status < 300){
                success && success( xhr.responseText );
            }else{
                error && error( xhr.status );
            }
        }
    }
}
</script>
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

以上就完成了ajax的封装，以后要用的话，可以直接引用下面的function，然后用ajax()传json参数。