javascript ajax实现数据post提交

最新推荐文章于 2022-07-18 10:47:25 发布

上帝之手

最新推荐文章于 2022-07-18 10:47:25 发布

阅读量1.3k

点赞数

简单的 new

首先需要创建一个新变量并赋给它一个 XMLHttpRequest 对象实例。这在 JavaScript 中很简单，只要对该对象名使用 new 关键字即可，如清单 1 所示。

清单 1. 创建新的 XMLHttpRequest 对象

代码如下复制代码
<script language="javascript" type="text/javascript">
var request = new XMLHttpRequest();
</script>

不难吧？记住，JavaScript 不要求指定变量类型，因此不需要像清单 2 那样做（在 Java 语言中可能需要这样）。

清单 2. 创建 XMLHttpRequest 的 Java 伪代码

代码如下复制代码
XMLHttpRequest request = new XMLHttpRequest();

因此在 JavaScript 中用 var 创建一个变量，给它一个名字（如 “request”），然后赋给它一个新的 XMLHttpRequest 实例。此后就可以在函数中使用该对象了。

错误处理

在实际上各种事情都可能出错，而上面的代码没有提供任何错误处理。较好的办法是创建该对象，并在出现问题时优雅地退出。比如，任何较早的浏览器（不论您是否相信，仍然有人在使用老版本的 Netscape Navigator）都不支持 XMLHttpRequest，您需要让这些用户知道有些地方出了问题。清单 3 说明如何创建该对象，以便在出现问题的时候发出 JavaScript 警告。

清单 3. 创建具有错误处理能力的 XMLHttpRequest

代码如下复制代码
<script language="javascript" type="text/javascript">
var request = false;
try {
request = new XMLHttpRequest();
} catch (failed) {
request = false;
}
if (!request)
alert("Error initializing XMLHttpRequest!");
</script>

一定要理解这些步骤：

创建一个新变量 request 并赋值 false。后面将使用 false 作为判定条件，它表示还没有创建 XMLHttpRequest 对象。
增加 try/catch 块：
尝试创建 XMLHttpRequest 对象。
如果失败（catch (failed)）则保证 request 的值仍然为 false。
检查 request 是否仍为 false（如果一切正常就不会是 false）。
如果出现问题（request 是 false）则使用 JavaScript 警告通知用户出现了问题。
代码非常简单，对大多数 JavaScript 和 Web 开发人员来说，真正理解它要比读写代码花更长的时间。现在已经得到了一段带有错误检查的 XMLHttpRequest 对象创建代码，还可以告诉您哪儿出了问题。

以下是xmlHttp的coding：

代码如下复制代码
var xmlHttp;
function createXMLHttpRequest(){
    //Mozilla 浏览器（将XMLHttpRequest对象作为本地浏览器对象来创建）
    if(window.XMLHttpRequest){ //Mozilla 浏览器
        xmlHttp = new XMLHttpRequest();
    }else if(window.ActiveXObject) { //IE浏览器
    //IE浏览器（将XMLHttpRequest对象作为ActiveX对象来创建）
        try{
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }catch(e){}
        }
    }
    if(xmlHttp == null){
        alert("不能创建XMLHttpRequest对象");
        return false;
    }
}
//用于发出异步请求的方法
function sendAsynchronRequest(url,parameter,callback){
    createXMLHttpRequest();
    if(parameter == null){
        //设置一个事件处理器，当XMLHttp状态发生变化，就会出发该事件处理器，由他调用
        //callback指定的javascript函数
        xmlHttp.onreadystatechange = callback;
        //设置对拂去其调用的参数（提交的方式，请求的的url，请求的类型（异步请求））
        xmlHttp.open("GET",url,true);//true表示发出一个异步的请求。
        xmlHttp.send(null);
    }else{
        xmlHttp.onreadystatechange = callback;
        xmlHttp.open("POST",url,true);
        xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
        xmlHttp.send(parameter);
    }
}
//以上代码是通用的方法，接下来是调用以上的方法
function loadPros(title,count,pid,cid,level){
    // 调用异步请求方法
    url = "。。。。。。。。";
    sendAsynchronRequest(url,null,loadCallBack);
}
// 指定回调方法
function loadCallBack(){
try
{
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
            if(xmlHttp.responseText != null && xmlHttp.responseText != ""){
               var divProid = document.getElementById('videolist');
               divProid.innerHTML = xmlHttp.responseText;
               for(i=0;i<len;i++)
               {
                   var video_url = document.getElementById("videolist"+i+"").href;
                   if(video_url != undefined && video_url != null && video_url != ""){
                      window.location.href = video_url;
                   }
               }
           }
        }
     }
     if (xmlHttp.readyState == 1)
     {
        //alert("正在加载连接对象......");
     }
     if (xmlHttp.readyState == 2)
     {
        //alert("连接对象加载完毕。");
     }
     if (xmlHttp.readyState == 3)
     {
        //alert("数据获取中......");
     }
}
catch (e)
{
      //alert(e);
}
}

一个兼容性比较好的ajax代码

代码如下复制代码
var http_request = false;     //ajax 对象
function changepage(url,idname)
{
if(url.indexOf("?")>-1)
url=url+ "&now="+(new Date()).getTime();
else
url=url+ "?now="+(new Date()).getTime();
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');
            }
        } else if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }

        if (!http_request) {
            alert('Giving up :( Cannot create an XMLHTTP instance');
            return false;
        }
        http_request.onreadystatechange = LoadContent(idname);
//alert("url="+url)
        http_request.open('GET', url, true);
        http_request.send(null);
}