`
Franciswmf
  • 浏览: 799872 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

运用Ajax的xmlHttpRequest对象异步与后台交互并提示交互结果

 
阅读更多
---------------body
<td width="80%" height="26" valign="bottom" class="font13">
<div align="right">
<a href="javaScript:saveMissiveNo();" target="_self">保存</a>
&nbsp;|&nbsp;
<a href="<%=path%>/pages/missiveManage/MissiveNoManager.jsp"
						target="_parent">返回</a>
</div>
</td>
-------------action/session
						// response.setContentType("text/xml;charset=utf-8");
						   PrintWriter out=null;
						   try {
							out = response.getWriter();
						   } catch (IOException e1) {
						 	e1.printStackTrace();
						   }
						   try{
						    String userName=request.getParameter("userName");
						    if ("ss".equals(userName)) {
								out.print("是");
							} else {
								out.print("否");
							}
						   }catch(Exception e){
						    e.printStackTrace();
						   }
-------------js
function saveMissiveNo(){
var isTrue = true;
var flag=0;
var isDepartment=1;//所属类型:部门
var isYes=1;//是否:是新公文类型
var typeScope=document.getElementById("typeScope").value;//公司:不提示选择部门
var orgname=document.getElementById("orgname").value;
var orgid=document.getElementById("orgid").value;
var describe=document.getElementById("describe").value;
var dealType=document.getElementById("dealType").value;
var year=document.getElementById("year").value;
var arr="";//数组无法直接传,用传递字符串的方法
if(typeScope==0){isDepartment=0;}
if(document.getElementById("dept").style.display=="block"){
if(document.getElementById("old").checked){ isYes=0;}
}
//js非空判断
if (typeScope == -1) {
    alert( "请选择所属类型!" );
    document.forms[0].typeScope.focus();
   isTrue=false; 
   return; 
}
if(document.getElementById("good").style.display=="block"){
if(document.getElementById("pop").value==1){
var es=document.getElementsByName("missiveType");
if(es.length>0) {
 for (i = 0; i < es.length; i++) {
		if (es[i].checked==true) {
			flag=1;
			break;
		} else {
			flag=0; 
		}
	}
		if(flag==0){
		alert('请至少选择一个公文类别');
		document.forms[0].mm.focus();
		isTrue=false;
		return;
		}
  }
for (i = 0; i < es.length; i++) {
if(es[i].checked){
arr=arr+es[i].value+",";
}
}
}
}
if(document.getElementById("good").style.display=="block"&&document.getElementById("pop").value==-1){
 alert("公文类别无数据,无法保存");
 isTrue=false; 
 return;
 }
if(document.getElementById("div").style.display=="block"&&document.forms[0].orgname.value==""&&typeScope!="0"){
    alert('请选择部门');
    document.forms[0].orgname.focus();
   isTrue=false; 
   return;
  }
if(document.getElementById("news").checked==true||document.getElementById("comp").style.display=="block"){
if(document.getElementById("pop").value==1&&document.getElementById("div5").style.display=="block"){
if(document.getElementById("describe").value == ""||document.getElementById("describe").value ==null){
		alert('固定描述不能为空');
		document.forms[0].describe.focus();
		isTrue=false;
		return; 
		}
}
}
if(document.getElementById("news").checked==true||document.getElementById("comp").style.display=="block"){
if(document.getElementById("pop").value==1&&document.getElementById("div3").style.display=="block"){
if(document.getElementById("dealType").value == ""||document.getElementById("dealType").value ==null){
		alert('请选择处理类型');
		document.forms[0].dealType.focus();
		isTrue=false;
		return; 
		}
}
}
if(isTrue){
 saveMissiveNoAjax(isDepartment,orgname,orgid,isYes,arr,dealType,year,describe);
 //新增成功之后重新返回addMissiveNo.jsp页面
}
}
var xmlHttp;//放在外面,照顾回调函数
function createXDOM(){//创建xmlhttprequest
 try
    {
    xmlHttp=new XMLHttpRequest();
    }
 catch (e)
    {
   try
      {
     xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
   catch (e)
      {

      try
         {
         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
         }
      catch (e)
         {
         alert("您的浏览器不支持XMLHTTP对象!");
         return false;
         }
      }
    }
}

function saveMissiveNoAjax(x,y,z,o,p,q,r,s){
var userName=document.getElementById("userName").value;
var url="<%=path%>/pages/MissiveNoManager/index.do?doaction=saveMissiveNo&isDepartment="+x+"&orgname="+y+"&orgid="+z+"&isYes="+o+"&arr="+p+"&dealType="+q+"&year="+r+"&describe="+s+"&userName="+userName;
createXDOM();
if (xmlHttp){//成功创建xmlhttprequest
   xmlHttp.onreadystatechange=callBack;
   xmlHttp.open("POST",url,true);//与服务端建立连接(请求方式post或get,地址,true表示异步)
   xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//传递数据的方法同样有GET和POST两种,但是当方法为POST时下面的一句话就必须写
   xmlHttp.send(null);//发送请求
  } 
}
function callBack(){//回调函数
if(xmlHttp.readyState==4){//请求状态为4表示成功
    if(xmlHttp.status==200){//http状态200表示OK
   if(xmlHttp.responseText=='Y'){alert("保存成功!");
    document.forms[0].submit();
   }
   else {alert("保存失败!");
   document.forms[0].submit();
   }
    }
    else{//http返回状态失败
    alert("服务端返回状态" + xmlHttp.statusText);
    }
}
else{//请求状态还没有成功,页面等待
    document.getElementById("resultMess").innerHTML="数据加载中……";
}
}


分享到:
评论

相关推荐

    ajax与后台交互案例组件

    本组件是一个入门级的Ajax web应用实例,适用于初学者了解和学习Ajax如何与后台进行数据交互。 1. **Ajax的基本原理**: - **异步通信**:Ajax的核心是XMLHttpRequest对象,它允许JavaScript在后台与服务器通信,...

    全面剖析 Ajax XMLHttpRequest对象

    总之,XMLHttpRequest对象是Ajax技术的基础,它的属性和方法提供了与服务器进行异步交互的能力,极大地丰富了Web应用的动态性和用户体验。开发者深入理解和掌握XMLHttpRequest的使用,对于构建高效、交互性强的Web...

    Ajax Demo Ajax 示例 XMLHttpRequest 异步 静态

    1. **XMLHttpRequest 对象**:这是 Ajax 的基石,它允许 JavaScript 在后台与服务器通信。在 JavaScript 中创建一个 XMLHttpRequest 实例,然后利用其 open() 和 send() 方法发起请求,并通过 onreadystatechange ...

    简单Ajax实例(带前后台交互)

    1. XMLHttpRequest对象:它是Ajax的核心,负责与服务器建立连接并发送请求,接收响应。 2. 异步:Ajax的核心特性是异步处理,这意味着用户可以继续浏览网页,而无需等待服务器的响应。 3. JSON:在实际应用中,XML...

    Ajax深度剖析,XMLHttpRequest对象大揭秘

    总的来说,XMLHttpRequest对象是实现Ajax技术的关键,它使得前端和后端可以更高效、更灵活地交互,极大地提升了Web应用的用户体验。理解并熟练掌握XMLHttpRequest的使用,对于任何前端开发者来说都至关重要。

    jQuery AJAX XMLHttpRequest对象PPT

    总结来说,XMLHttpRequest对象是前端开发中不可或缺的一部分,它为网页动态更新和与服务器的异步交互提供了可能。随着浏览器和Web标准的发展,XMLHttpRequest的功能越来越强大,为开发更复杂的Web应用提供了基础。...

    VS2008 AJAX控件介绍 AJAX组成及XMLHttpRequest对象

    2. **XMLHttpRequest对象**:这是AJAX的基础,它提供了一个在后台与服务器进行通信的API。JavaScript通过XMLHttpRequest对象可以异步地发送GET或POST请求,并获取服务器的响应数据。 3. **DOM(Document Object ...

    AJAX同步或异步流程图

    AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器交换...理解并熟练运用AJAX的同步和异步模式,是提升Web应用性能和交互性的重要手段。

    全面剖析Ajax的XMLHttpRequest对象.doc

    Ajax 是一种异步的 JavaScript 与 XML 技术,用于在客户端脚本与服务器之间实现数据交互过程。XMLHttpRequest 对象是 Ajax 的技术基础,尽管现在提供了各种 Ajax 框架,但是理解这个对象的详细工作机制仍然很有必要...

    Ajax与servlet后台交互,数据类型JSON

    在Web开发中,Ajax(Asynchronous JavaScript and XML)与Servlet的交互是常见的技术组合,用于构建动态、异步的用户界面。本知识点主要探讨如何利用Ajax进行前后台数据交换,特别是当后台服务(Servlet)返回的数据...

    AJAX学习实例与数据库交互实例

    1. XMLHttpRequest对象:AJAX的核心是XMLHttpRequest(XHR)对象,它允许在后台与服务器交换数据,从而实现页面的无刷新更新。通过创建XMLHttpRequest实例,设置请求方法、URL、同步/异步方式,以及发送请求。 2. ...

    ajax页面交互

    它通过JavaScript进行异步数据请求,并在后台与服务器交换数据,从而实现网页的局部刷新。 ### 1. Ajax 基础 - **XMLHttpRequest 对象**:Ajax 的核心是XMLHttpRequest对象,它是JavaScript的一个内置对象,负责与...

    Ajax页面局部异步刷新技术

    `XMLHttpRequest`是Ajax的核心组件,用于在后台与服务器交换数据,并执行异步请求而无需重载整个网页。其主要功能包括发送异步HTTP请求、处理服务器响应等。 #### 创建XMLHttpRequest对象 ```javascript var ...

    Ajax模式在异步交互Web环境中的应用.pdf

    Ajax 模式的异步交互机制是通过使用 XMLHttpRequest 对象来实现的,该对象可以在不重新加载整个页面的情况下异步地从服务器获取数据。同时,Ajax 模式还可以使用 JavaScript 和 DOM 技术来实现页面的局部刷新,从而...

    C# 前后台交互访问

    10. **前后端分离**:随着前端框架(如React、Vue、Angular)的发展,现代Web应用更多地采用API驱动的方式,前端通过调用RESTful API与后台交互,C#可以专注于构建后端服务。 了解并熟练掌握以上知识点,对于实现C#...

    Ajax简单的异步交互及Ajax原生编写

    首先我们创建ajax的核心对象,由于浏览器的兼容问题我们在创建ajax核心对象的时候不得考虑其兼容问题,因为要想实现异步交互的后面步骤都基于第一步是否成功的创建了ajax核心对象. function getXhr(){ // 声明...

    基于嵌入式Linux和Ajax技术的Web异步交互设计.pdf

    本文提出了一种解决方案,即结合Ajax技术,来实现Web页面的异步交互,以减少数据传输量并实现页面局部刷新。 嵌入式Linux操作系统是嵌入式设备的基础,它提供了稳定且可定制的操作环境,适合于各种小型和微型设备。...

    ajax 入门基础之 XMLHttpRequest对象总结

    在Ajax的核心中,XMLHttpRequest(XHR)对象扮演着至关重要的角色,它允许JavaScript与服务器进行后台通信,实现数据的交换,而无需用户感知。下面我们将深入探讨XMLHttpRequest对象的主要属性和方法。 **1. 创建...

    使用AJAX发送异步请求

    总之,AJAX通过XMLHttpRequest对象实现了页面的局部更新,提高了用户体验,而异步请求则确保了用户在等待服务器响应期间仍能继续与页面交互。理解并熟练掌握AJAX和XMLHttpRequest对象的使用,对于开发交互性更强的...

    AjaxXMLHttpRequest_Demo02.zip

    在AjaxXMLHttpRequest_Demo02.zip中,我们可能会看到以下几个关键组成部分: 1. **HTML文件**:通常命名为index.html,它是用户界面的基础,包含用户交互的元素,如按钮、输入框等。当用户触发某个事件(如点击按钮...

Global site tag (gtag.js) - Google Analytics