ajax简单的框架

最新推荐文章于 2022-04-04 19:05:10 发布

xixian87

最新推荐文章于 2022-04-04 19:05:10 发布

阅读量75

点赞数

分类专栏： ajax 文章标签：框架 Ajax JSP JavaScript 浏览器 ViewUI

ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

[color=red]参照了网上资料，由于对ajax用的不深入，该框架只获取到responseText响应内容[/color]

参考资料
[url]http://commandos.blog.51cto.com/154976/115723[/url]
[color=orange]--------------------------myajax.js---------------------[/color]




function $( elementId ) { 
  return document.getElementById(elementId).value; 
} 


/* 
*  根据不同的浏览器，获取Ajax对象 
*/ 
function getAjaxObject() { 
        var xmlHttpRequest; 
        //  判断是否把XMLHttpRequest实现为一个本地javascript对象 
        if(window.XMLHttpRequest){ 
        xmlHttpRequest = new XMLHttpRequest(); 
        }else if(window.ActiveXObject){  //  判断是否支持ActiveX控件 
        try{ 
          //  通过实例化ActiveXObject的一个新实例来创建XMLHttpRequest对象 
            xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");  
        }catch(e){ 
            try{ 
              //  通过实例化ActiveXObject的一个新实例来创建XMLHttpRequest对象 
              xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
              }catch(e){} 
        } 
        } 
        if ( !xmlHttpRequest ) { 
          alert("创建Ajax对象失败，您将无法正常浏览网页"); 
        } 
        return xmlHttpRequest; 
} 

/* 
*  异步方式提交请求 
*  method get/post
*  url    访问数据的地址
*  data   需传入的参数
*  yourfunction 你的处理函数
*/ 
function sendRequestByAjax(method, url, data, yourfunction) { 
  //  获取Ajax对象 
  request = getAjaxObject(); 
  //  设置回调函数 
    request.onreadystatechange = function(){
    	onreadystatechange(yourfunction);
    }; 
  request.open(method, url, true);  //  true代表使用异步方式 false代表使用同步方式 
  //  处理提交方式 
  if ( "get" == method.toLowerCase() ) { 
    //  使用GET方式提交数据 
    var urls = url.split("?"); 
    if ( urls[1] == "" || typeof(urls[1]) == "undefined" ) { 
      url = urls[0] + "?" + data; 
    } else { 
      url = urls[0] + "?" + urls[1] + "&" + data; 
    } 
    data = null;  //   for GET method,request必须为空

  } else if ( "post" == method.toLowerCase() ){ 
    //  使用POST方式提交数据 
          request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
      } 
  request.send(data); 
}

/* 
* 回调函数
* 这里获取到响应内容responseText传人你写的处理函数yourfunction()
*/ 
function onreadystatechange(yourfunction){
if (request.readyState == 4){
	if (request.status == 200){  	
	var responseText=request.responseText;	 
	yourfunction(responseText);
		}
   }  
}
}

[color=red]以下两个是测试文件 testAjax.jsp和date.jsp[/color]

[color=orange]-------------------------------testAjax.jsp------------------------[/color]

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" language="javascript"  src="myajax.js" ></script> 
<title>Insert title here</title>
<script language="javascript">
	function getResponseText(responseText){	//你的处理函数
		alert(responseText);
	}
	function testAjax(){
		sendRequestByAjax('post','date.jsp',null,getResponseText);
	}
</script>
</head>
<body>
       <input type="button" name="button" id="button" value="测试"  onclick="testAjax()">
</body>
</html>

[color=orange]-----------------------date.jsp-----------------------[/color]

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@page import="java.io.PrintWriter"%>
<%
String count="your get it";
out.println(count);
%>

xixian87

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax简单的框架

[color=red]参照了网上资料，由于对ajax用的不深入，该框架只获取到responseText响应内容[/color]参考资料[url]http://commandos.blog.51cto.com/154976/115723[/url][color=orange]--------------------------myajax.js--------------------...
复制链接

扫一扫

专栏目录