javascript ajax实现数据post提交

简单的 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);
}
 

function LoadContent(idname)
{
 
 if (http_request.readyState != 4)
 {
  //alert("出现错误http_request.readyState"+http_request.readyState);
  return;
 }
 if (http_request.status != 200)
 {
   //alert("出现错误"+http_request.status);;
  return;
 }
 eval("document.getElementById('"+idname+"').innerHTML") = http_request.responseText;
 //document.getElementById('programlist').innerHTML = "ddddddddddddddddddddddddd"; 

时间: 2024-10-30 00:24:50

javascript ajax实现数据post提交的相关文章

javascript ajax提交数据中文乱码解决办法

一个UTF8页面需要POST数据到GB2312页面,这时中文的编码是按照UTF8提交过去的,GB2312页面无法接收.如何实现,网络搜索了一种很不错的方法,但有缺陷,这里一一说起. 1.FORM标签里加上accept-charset代码,这个能把FORM里的数据自动编码成指定的字符集提交,比如在UTF8页面提交数据到GB2312,代码就是accept-charset="GB2312″,但accept-charset除了IE其他浏览器都支持... 2.这时可以在提交时触发JS,document.c

.NET的Ajax请求数据提交实例_实用技巧

本文实例讲述了.NET的Ajax请求数据提交实现方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>    <head runat="server">      <title>ajax请求</title>      <link type

ci检测是ajax还是页面post提交数据的方法_php实例

本文实例讲述了ci检测是ajax还是页面post提交数据的方法.分享给大家供大家参考.具体实现方法如下: 一.问题: 因为项目需要我们希望知道提交数据来源是由ajax提交过来的数据还是由页面的post提交过来的数据从而进行不同层面上的处理. 二.解决方法: 在php中解决方法如下: 如果是ajax请求,以下表达式的值为真 复制代码 代码如下: $_SERVER["HTTP_X_REQUESTED_WITH"]=="XMLHttpRequest" 就是一个PHP的环境

ajax post get方式提交数据详解

ajax有两种提交数据的方式,分别为get和post.post方法可传输大于2K的数据,在Ajax里的应用不同之处在于:"post方法的请求地址与传输的数据是放在两个对象里--请求地址放在open对象里,传输的数据放在send对象里:并且在传输数据之前定义一个传输文件HTTP头信息(setRequestHeader)" 用上循环就是为了在数据发送前进行合理的处理,解决在脚本语言对数据进行另外需求处理时出现的超时现象.处于对ajax认识未深,如有说得不对或不到位的,还请指教. ajax中

纯javascript的ajax实现php异步提交表单的简单实例

很多时候需要异步提交表单,当表单太多是时候,一个个getElementById变得很不实际 当然,jquery可以实现异步提交表单,jquery.form.js这个库貌似也挺流行 只是有时候并不想使用额外的库,所以就琢磨着自己写,用纯js来实现异步提交表单 实现如下(本例用POST方式提交,用php作为服务器脚本) HTM L文件:test <html> <head> <script type="text/javascript" src="nam

javascript 获取多条数据(模拟ajax获取数据)_javascript技巧

()'>于发表: 获取多条数据(模拟ajax获取数据)

利用JQuery方便实现基于Ajax的数据查询、排序和分页功能

ajax|分页|排序|数据        之前很少会用javascript去实现页功能主要怕麻烦,但了解JQuery后这种想法发生了变化:有了这样的脚本组件就可以在编写脚本时方便和HTML隔离出来,这样编写高重用性的脚本就更方便.下面就是介绍在学习JQuery过程中编写的基于Ajax的数据查询.排序和分页功能的复用脚本,只要遵循脚本的某些规则描述HTML把脚本文件引入就可以方便实现以上描述的功能.        先看下实现功能的脚代码: /**应用脚本规则:           引用脚本: JQ

ajax与隐藏form提交的利与弊

 本篇文章主要是对AJAX提交与FORM提交的区别进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 现在来对比一下ajax与隐藏form提交的利与弊.   1.隐藏form提交,更新数据完成后,需要转到一个空白页面再对原页面进行提交后处理:ajax则不用,可以直接返回原页面进行提交后的处理.可见ajax可以比隐藏form提交少增加一个页面.   2.ajax出于安全性考虑,不能对文件进行操作,所以就不能通过ajax来实现文件上传,而通过隐藏form提交则可以实现这个功能,所以这就是

ajax 异步数据操作详解(1/3)

ajax 异步数据操作详解 AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. 主要包含了以下几种技术: Ajax(Asynchronous JavaScript + XML)的定义 基于web标准(standards-based presentation)XHTML+CSS的表示: 使用 DOM(Document Object Model)进行动态显示及交互: 使用 XML