根据Ajax与XMLHttpRequest对象一文的介绍,我们可以开发一个简单的Ajax框架供以后开发应用。
首先要知道Ajax的开发流程:
1:初始化XMLHttpRequest,这一步要考虑跨浏览器的问题。
2:设置XMLHttpRequest对象的onReadyStateChange属性,指定服务器返回响应数据时要调用的回调函数,即指定响应处理函数,
3:调用XMLHttpRequest对象的open方法,创建http请求。
4:调用XMLHttpRequest对象的setResouceHeader等方法,设置必要的http请求头信息。
5:调用XMLHttpRequest对象的send方法,发送之前创建的http请求。
6:根据XMLHttpRequest对象的open方法参数,决定等待或者不等待服务器回响应数据。如果服务器返回响应数据,则将控制权交给之前设置回调函数。

了解上面的流程后,我们来一步步的解析和示范,形成一个发送和接收XMLHttpRequest请求的Ajax应用程序框架。

//定义XMLHttpRequest对象实例
var http_request = false;
//定义创建跨浏览器XMLHttpRequest方法
function createXMLHttpRequest()
{
    http_request = false;
    //开始初始化XMLHttpRequest对象
    if(window.XMLHttpRequest) { //Mozilla 浏览器
        http_request = new XMLHttpRequest();
        if (http_request.overrideMimeType) {//设置MiME类别
            //有些版本的浏览器在处理服务器返回的未包含XML mime-type头部信息的内容时会报错,因此,要确保返回的内容包含text/xml信息。
            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) { // 异常,创建对象实例失败
        window.alert("不能创建XMLHttpRequest对象实例.");
        return false;
    }
}
//定义可复用的http请求发送函数
function send_request(method,url,content,callback) {//请求方式,请求目标,内容,处理函数名称
    
    //第一步:初始化XMLHttpRequest
    createXMLHttpRequest();
    
    //第二步:指定响应处理函数
    http_request.onreadystatechange = callback;//注意这里不用加括号

    //第三步:向服务器发出http请求 调用 open和send方法
    // 确定发送请求的方式和URL以及是否异步执行下段代码
    if(method.toLowerCase()=="get") {
        http_request.open(method, url, true);//第三个参数 为 是否异步
    }
    else if(method.toLowerCase()=="post") {
        http_request.open(method, url, true);
        http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//这个位置不能放错
    }
    else {
        window.alert("http请求类别参数错误。");
        return false;
    }

    http_request.send(content);
    //send方法如果POST方式发出的话,可以是任何想传给服务器的内容,不过与form一样,如果要传的是文件或者POST内容给服务器,在调用open方法之后send方法之前,必须先调用XMLHttpRequest对象的setRequestHeader方法,修改http请求头信息中的MIME类别。
}
    //最后一步 就是处理服务器返回信息的方法了,由于每个页面的应用不同,所以应该将具体方法写在相应的页面中。这写一个示例:
    
    // 处理返回文本格式信息的函数 示例
function processTextResponse() {
    if (http_request.readyState == 4) { // 判断对象状态(4表示完成)
        if (http_request.status == 200) { // 200 信息已经成功返回,开始处理信息
            //这里面即是具体的处理代码
            alert("Text文档响应。");
        } else { //页面不正常
            alert("您所请求的页面有异常。");
        }
    }
} 

//我们将以上文件保存为ajax.js文件
//然后在以后的每个需要应用Ajax的页面中引入
<script language="javascript" src="ajax.js"></script>

这个Ajax应用程序开发框架现在还是一个简单的初步的框架,其目的就是通过这个框架的示范,形式一个使用Ajax的基本方法和轮廓。 关于如何使用这个框架,将在以后的文章中写出

补充:

如果使用POST方法传递。则content一般使用XML的形式。例如:

Code
function login()
{
 
    var xml = "<root><userName>123</userName><pwd>中国</pwd></root>";
    send_request("post","/StockSacChat/ChatHander.aspx",xml,result);
}
function result()
{
     if (http_request.readyState == 4) { 
        if (http_request.status == 200) {
         
            alert(http_request.responseText);
        } else { //页面不正常
            alert("页面有异常。");
        }
    }
}

而相应的后台代码 ASP.NET中可以如下获得

Code
private void Page_Load(object sender, System.EventArgs e)

    XmlDocument xmlDoc = new  System.Xml.XmlDocument();
    xmlDoc.Load(Request.InputStream);
    //得到root所有子节点
    XmlNodeList xnl=xmlDoc.SelectSingleNode("root").ChildNodes;
    
    Response.Write(xnl.Item(0).InnerText);//输出userName值
}

一个简单的Ajax开发框架相关推荐

  1. ajax登陆返回值判断,一个简单的ajax用户登陆返回值问题?有代码

    一个简单的ajax用户登陆返回值问题?有代码 來源:互聯網  2009-11-13 11:55:56  評論 分類: 電腦/網絡 >> 程序設計 >> 其他編程語言 問題描述: ...

  2. 使用jQuery来实现一个简单的ajax请求

    下面的程序使用ajax来实现一个简单的ajax请求 JSP页面代码 <%@ page language="java" import="java.util.*&quo ...

  3. 一个简单的Ajax例子

    今天写个Ajax的小例子,我在项目中并没有用到过Ajax,看到Ajax很流行,今天写个demo,希望大家指点 创建一个全局的XMLrequest对象,该对象的方法如下 open():建立到服务器的新请 ...

  4. struts2框架下的一个简单的ajax例子

    举个例子 jsp页面: <%@ page language="java" import="java.util.*" pageEncoding=" ...

  5. Prism for WPF 搭建一个简单的模块化开发框架

    站长今天发现一个好项目,看原文贴图挺不错的,好项目应该让更多人知道,特别是该项目使得Prism搭建,网上使用prism做的开源成熟项目不多,这个值得大家研究. 看项目gitee仓库截图,项目不错,st ...

  6. 一个简单的Ajax实例

    1.实例功能 在注册页面里验证一个用户名是否有效.在默认情况下,提交按钮为灰色,即不能使用状态. 当用户将焦点从[用户名]文本框中移出时,通过异步调用来判断该用户名是否已经存在.如果用户名已经存在,则 ...

  7. ajax开发 短期班,一个简单的ajax 来mock数据

    目录结构: 图片.png index.html代码: 查询 var Oinput=document.querySelector("#username"); var Obtn=doc ...

  8. 使用struts2+JQuery实现的简单的ajax例子

    也为简单的业务需要,所以使用了Struts配合JQuery制作的一个简单的AJAX的例子,希望有兴趣的朋友可以看看. Js代码   <script type="text/javascr ...

  9. 如何简单学会ajax,学会自己封装简单AJAX

    什么是AJAX AJAX不是JavaScript的规范,他只是一种技术方案,也并不是新技术,他依赖于HTML/CSS/JS,全称是异步JavaScript和XML,核心是浏览器提供的XMLHttpRe ...

最新文章

  1. 赚钱的这些年(上)苦逼
  2. 除了 k8s,留给 k 和 s 中间的数字不多了!
  3. curl命令查看耗时
  4. IPHONE 64位和32位
  5. k8s Pod亲和性:pod与pod的亲和性
  6. 内嵌iframe_内嵌页面session超时,内嵌页面显示登录界面问题解决方案
  7. GP学习(九)—Working with geodatabases and the geoprocessor
  8. NASA 传奇数学家去世,她曾笔算了登月轨道
  9. C 语言 结构类型 结构
  10. 微信小程序——flex弹性布局水平垂直居中
  11. 虚拟机中XP系统激活
  12. 下载站mime属性设置(让文件可下载)
  13. 读书笔记《蛤蟆先生去看心理医生》
  14. win oracle卸载工具,[转]oracle windows 之完美卸载
  15. java惰性计算原理_利用 Lambda 表达式实现 Java 中的惰性求值
  16. lombok get/set 方法未生效,解决办法
  17. 【OpenGL学习笔记⑦】——键盘控制镜头的平移【3D正方体 透视投影 观察矩阵 对LookAt的理解】
  18. eChats折线图更新数据不自然,要闪一下,动态数据解决
  19. 如何给SCI收录的文章分区?
  20. 组态服务器协议,西门子1200PLC组态网络时间协议同步

热门文章

  1. VMSS上用Managed Disk和Data Disk进行自动扩展(1)
  2. C# 拖放操作源码详解2
  3. Fast RCNN 训练自己数据集 (1编译配置)
  4. hive 数据存储格式详解
  5. Spring MVC 向页面传值-Map、Model和ModelMap
  6. Python-使用python-memcache操作Memcached
  7. 使用HMSegmentedControl实现分段控件
  8. XenApp_XenDesktop_7.6实战篇之九:SQL Server数据库服务器规划及部署
  9. GString及IntelliJIdea中调试Groovy的操作步骤
  10. php.ini文件找不到