一个简单的Ajax开发框架
首先要知道Ajax的开发流程:
1:初始化XMLHttpRequest,这一步要考虑跨浏览器的问题。
2:设置XMLHttpRequest对象的onReadyStateChange属性,指定服务器返回响应数据时要调用的回调函数,即指定响应处理函数,
3:调用XMLHttpRequest对象的open方法,创建http请求。
4:调用XMLHttpRequest对象的setResouceHeader等方法,设置必要的http请求头信息。
5:调用XMLHttpRequest对象的send方法,发送之前创建的http请求。
6:根据XMLHttpRequest对象的open方法参数,决定等待或者不等待服务器回响应数据。如果服务器返回响应数据,则将控制权交给之前设置回调函数。
了解上面的流程后,我们来一步步的解析和示范,形成一个发送和接收XMLHttpRequest请求的Ajax应用程序框架。
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文件
<script language="javascript" src="ajax.js"></script>
这个Ajax应用程序开发框架现在还是一个简单的初步的框架,其目的就是通过这个框架的示范,形式一个使用Ajax的基本方法和轮廓。 关于如何使用这个框架,将在以后的文章中写出
补充:
如果使用POST方法传递。则content一般使用XML的形式。例如:
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中可以如下获得
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开发框架相关推荐
- ajax登陆返回值判断,一个简单的ajax用户登陆返回值问题?有代码
一个简单的ajax用户登陆返回值问题?有代码 來源:互聯網 2009-11-13 11:55:56 評論 分類: 電腦/網絡 >> 程序設計 >> 其他編程語言 問題描述: ...
- 使用jQuery来实现一个简单的ajax请求
下面的程序使用ajax来实现一个简单的ajax请求 JSP页面代码 <%@ page language="java" import="java.util.*&quo ...
- 一个简单的Ajax例子
今天写个Ajax的小例子,我在项目中并没有用到过Ajax,看到Ajax很流行,今天写个demo,希望大家指点 创建一个全局的XMLrequest对象,该对象的方法如下 open():建立到服务器的新请 ...
- struts2框架下的一个简单的ajax例子
举个例子 jsp页面: <%@ page language="java" import="java.util.*" pageEncoding=" ...
- Prism for WPF 搭建一个简单的模块化开发框架
站长今天发现一个好项目,看原文贴图挺不错的,好项目应该让更多人知道,特别是该项目使得Prism搭建,网上使用prism做的开源成熟项目不多,这个值得大家研究. 看项目gitee仓库截图,项目不错,st ...
- 一个简单的Ajax实例
1.实例功能 在注册页面里验证一个用户名是否有效.在默认情况下,提交按钮为灰色,即不能使用状态. 当用户将焦点从[用户名]文本框中移出时,通过异步调用来判断该用户名是否已经存在.如果用户名已经存在,则 ...
- ajax开发 短期班,一个简单的ajax 来mock数据
目录结构: 图片.png index.html代码: 查询 var Oinput=document.querySelector("#username"); var Obtn=doc ...
- 使用struts2+JQuery实现的简单的ajax例子
也为简单的业务需要,所以使用了Struts配合JQuery制作的一个简单的AJAX的例子,希望有兴趣的朋友可以看看. Js代码 <script type="text/javascr ...
- 如何简单学会ajax,学会自己封装简单AJAX
什么是AJAX AJAX不是JavaScript的规范,他只是一种技术方案,也并不是新技术,他依赖于HTML/CSS/JS,全称是异步JavaScript和XML,核心是浏览器提供的XMLHttpRe ...
最新文章
- 赚钱的这些年(上)苦逼
- 除了 k8s,留给 k 和 s 中间的数字不多了!
- curl命令查看耗时
- IPHONE 64位和32位
- k8s Pod亲和性:pod与pod的亲和性
- 内嵌iframe_内嵌页面session超时,内嵌页面显示登录界面问题解决方案
- GP学习(九)—Working with geodatabases and the geoprocessor
- NASA 传奇数学家去世,她曾笔算了登月轨道
- C 语言 结构类型 结构
- 微信小程序——flex弹性布局水平垂直居中
- 虚拟机中XP系统激活
- 下载站mime属性设置(让文件可下载)
- 读书笔记《蛤蟆先生去看心理医生》
- win oracle卸载工具,[转]oracle windows 之完美卸载
- java惰性计算原理_利用 Lambda 表达式实现 Java 中的惰性求值
- lombok get/set 方法未生效,解决办法
- 【OpenGL学习笔记⑦】——键盘控制镜头的平移【3D正方体 透视投影 观察矩阵 对LookAt的理解】
- eChats折线图更新数据不自然,要闪一下,动态数据解决
- 如何给SCI收录的文章分区?
- 组态服务器协议,西门子1200PLC组态网络时间协议同步
热门文章
- VMSS上用Managed Disk和Data Disk进行自动扩展(1)
- C# 拖放操作源码详解2
- Fast RCNN 训练自己数据集 (1编译配置)
- hive 数据存储格式详解
- Spring MVC 向页面传值-Map、Model和ModelMap
- Python-使用python-memcache操作Memcached
- 使用HMSegmentedControl实现分段控件
- XenApp_XenDesktop_7.6实战篇之九:SQL Server数据库服务器规划及部署
- GString及IntelliJIdea中调试Groovy的操作步骤
- php.ini文件找不到