原生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);
}