原生js方式实现ajax，并仿jquery方式简单调用
2011-04-22 18:35 飞魚 阅读(635) 评论(0) 编辑 收藏 举报以下为下效果图和实现代码 注：此demo要在.net环境下运行
ajax.js代码：
var $ = {};
$.xho = function () { //创建xmlhttprequest对象
var http_request = null;
if (window.XMLHttpRequest) { //Mozilla 浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//设置MIME类别
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) { }
}
}
return http_request;
}
$.rsc = function (obj, callfunc) {
return function () {
if (obj.readyState == 4) {
if (obj.status == 200) {
callfunc(obj.responseText);
}
}
}
}
$.GET = function (url, callfunc) {
var xho = $.xho();
if (xho == null) return;
xho.onreadystatechange = $.rsc(xho, callfunc); //设置回调函数
//第三个参数指定在等待服务器返回信息的时间内是否继续执行下面代码，如果为true，则不会继续执行，默认为true
xho.open("GET", url, true);
xho.send(null);
}
$.POST = function (url, data, callfunc) {
var xho = $.xho();
if (xho == null) return;
xho.onreadystatechange = $.rsc(xho, callfunc); //设置回调函数
xho.open("POST", url, true);
xho.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //post请求必须修改MIME类别
xho.send(data);
}
html页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="ajax.js" type="text/javascript"></script>
<script type="text/javascript">
function btn(method) {
if (method == 'get') {
$.GET("Handler.ashx?name=hello,get", function (data) {
document.getElementById("get_div").innerHTML = "GET数据：" + data;
});
} else {
$.POST("Handler.ashx", "name=holle,post", function (data) {
document.getElementById("post_div").innerHTML = "POST数据：" + data;
});
}
}
</script>
</head>
<body>
<input type="button" value="GET点击" onclick="btn('get')" />
<div id="get_div">
</div>
<input type="button" value="POST点击" onclick="btn('post')" />
<div id="post_div">
</div>
</body>
</html>
Handler.ashx处理程序代码
<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
public class Handler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
if (context.Request.QueryString["name"] != null)
{
context.Response.Write(context.Request.QueryString["name"]);
}
else
{
context.Response.Write(context.Request.Form["name"]);
}
context.Response.End();
}
public bool IsReusable
{
get
{
return false;
}
}
}
另 赋另一种调用方式实现的ajax的js代码
//创建一个XMLHttpRequest对象
function XmlHttpObj() {
var xmlhttp = null;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
if (xmlhttp.overrideMimeType) { //设置MiME类别
xmlhttp.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) { }
}
}
return xmlhttp;
}
//回调函数
function ReadyStateChange(obj, funcname) {
return function () {
if (obj.xho.readyState == 4 && obj.xho.status == 200) {
funcname(obj.xho.responseText);
}
}
}
function AjaxRequest() {
this.xho = XmlHttpObj();
if (this.xho == null) return;
}
AjaxRequest.prototype.Post = function (url, data, funcname) {
this.xho.open('POST', url, false);
this.xho.onreadystatechange = ReadyStateChange(this, funcname);
this.xho.setRequestHeader("CONTENT-TYPE", "application/x-www-form-urlencoded");
this.xho.send(data);
}
AjaxRequest.prototype.Get = function (url, funcname) {
this.xho.open("GET", url, true);
this.xho.onreadystatechange = ReadyStateChange(this, funcname);
this.xho.send(null);
}
