原生js ajax 实例

如今原生js ajax 如今已经不多用了，jQuery框架等更方便；本人由于喜欢原生js，不喜欢框架，因此才用原生js，各位根据本身状况使用

什么是 XMLHttpRequest 对象？

XMLHttpRequest 对象用于在后台与服务器交换数据。

XMLHttpRequest 对象是开发者的梦想，由于您可以：

• 在不从新加载页面的状况下更新网页
• 在页面已加载后从服务器请求数据
• 在页面已加载后从服务器接收数据
• 在后台向服务器发送数据

全部现代的浏览器都支持 XMLHttpRequest 对象。

更多详情 请参考 w3school

// js 建立XMLHttpRequest 对象
function createXMLHttpRequest()
{
    var XMLHttpReq;
    try 
    {
        XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");//IE高版本建立XMLHTTP  
    }
    catch(E)
    {
        try
        {
            XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//IE低版本建立XMLHTTP
        }
        catch(E)
        {
            try
            {
                XMLHttpReq = new XMLHttpRequest();//兼容非IE浏览器，直接建立XMLHTTP对象
            }
            catch(E)
            {
                alert("你的浏览器不支持XMLHTTP对象，请升级到IE6以上版本！");
                XMLHttpReq = false;
            }    
        }
        
    }
    return XMLHttpReq;
}

 

// url 地址
// type 同步或者异步  true|false（true，即为异步方式，不用等待请求完成，便可执行ajax后面方法。若要将其设置为false，则全部的请求均为同步请求，在没有返回值以前，同步请求将锁住浏览器，用户其它操做必须等待请求完成 才能够执行。通常用true）
// parameter 参数格式为 a=1&b=2&c=3
// callback 回调函数
function ajax(url,method,type,parameter,callback)
{
　　 // 获取XMLHttpRequest对象 
    XMLHttpReq = createXMLHttpRequest();
    XMLHttpReq.open(method,url,type);
    
    // post 传参须要添加上这个 不然 post 失败
    if(method == 'post')
    {
        XMLHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    }

　　// 调用回调函数 
    XMLHttpReq.onreadystatechange = callback;

　　// 发送参数 
    XMLHttpReq.send(parameter);
}

 

// 回调函数
function callback_check_video()  
{
　　 // 0：请求未初始化（尚未调用 open()）。
    // 1：请求已经创建，可是尚未发送（尚未调用 send()）。
    // 2：请求已发送，正在处理中（一般如今能够从响应中获取内容头）。
    // 3：请求在处理中；一般响应中已有部分数据可用了，可是服务器尚未完成响应的生成。
    // 4：响应已完成；您能够获取并使用服务器的响应了。
    // readyState 状态为4 响应已完成
    if (XMLHttpReq.readyState==4)  
    {  
        // 200表示访问成功
        if (XMLHttpReq.status==200)  
        {  
            // 获取相应文本
            var res = XMLHttpReq.responseText;
            // 如下为处理相应数据逻辑根据本身业务逻辑作相应处理
            // 把json串 转换为对象
            var objRes = JSON.parse(res)；
            if(objRes.status != 0)
            {
                alert(objRes.msg)
                return false;
            }
            alert(objRes.msg)；
            window.location.reload();
        }  
        XMLHttpReq = null;
    }  
}

 

// 调用实例 此处为post 
// 若是为get方式，则把参数拼接到url中,method为get,parameter为null便可
function check_video(obj)
{
    var url = "";
    var method = "post";
    var type = true;

　　// js 获取html标签自定义属性
    var check_type = obj.getAttribute('checkvideo');
    // 参数
    var parameter = "checkvideo="+check_type+"&videoid="+obj.getAttribute('videoid');
    ajax(url,method,type,parameter,callback_check_video);
}