ajax学习

Ajax可以解决传统网站中页面加载和表单填写等出现的问题.

¶基础介绍

Ajax属于Javascript中的范畴内的知识点.

它是浏览器提供的一套方法,可以实现页面无刷新更新数据,提高用户浏览网站应用的体验.

¶应用场景

1. 应用上拉加载数据
2. 列表数据无刷新分页
3. 表单项离开焦点数据验证
4. 搜索框提示文字下拉列表

¶基本流程

1. 创建Ajax对象

var xhr=XMLHttpRequest();

2. 告诉Ajax请求地址以及请求方法

xhr.open('get',url);

3. 发送请求

xhr.send();

4. 获取响应数据

xhr.onload=function(){
    console.log(xhr.responseText);
}

5. 解析数据

// 对于json数据的转换
var json = JSON.parse(xhr.responseText);
// 属性name的值
var str='<h2>'+json.name+'</h2>'

¶请求参数传递

如下图所示,get方式较为简单,post稍稍复杂.

¶Ajax状态码

xhr.readyState//Ajax状态码

当Ajax状态码发生改变时,会调用xhr.onreadystatechange这个方法.

¶Ajax错误处理

xhr.status

¶Ajax封装

一个简单的例子.

function ajax(options){
    var xhr = null;
    var params = formsParams(options.data);
    //创建对象
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest()
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    // 连接
    if(options.type == "GET"){
        xhr.open(options.type,options.url + "?"+ params,options.async);
        xhr.send(null)
    } else if(options.type == "POST"){
        xhr.open(options.type,options.url,options.async);
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(params);
    }
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            options.success(xhr.responseText);
        }
    }
    function formsParams(data){
        var arr = [];
        for(var prop in data){
            arr.push(prop + "=" + data[prop]);
        }
        return arr.join("&");
    }
 
}
 
ajax({
    url : "a.php",  // url---->地址
    type : "POST",   // type ---> 请求方式
    async : true,   // async----> 同步：false，异步：true 
    data : {        //传入信息
        name : "张三",
        age : 18
    },
    success : function(data){   //返回接受信息
        console.log(data);
    }
})