优点:使用ajax读取数据文件,不需要刷新页面就能取出文件数据

目  录

1.0 基于ajax请求的理论支持

1.1 js 实现jquray中 ajax请求功能

基于ajax请求的理论支持

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title></title> <script type="text/javascript">
function ajax(url, fnSucc, fnFaild) {
//1.创建Ajax对象
if (window.XMLHttpRequest) {
var oAjax = new XMLHttpRequest();
}
else {
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
} //2.连接服务器
//open(方法, 文件名, 异步传输)
oAjax.open('GET', url, true); //3.发送请求
oAjax.send(); //4.接收返回
oAjax.onreadystatechange = function () {
//oAjax.readyState //浏览器和服务器,进行到哪一步了
if (oAjax.readyState == 4) //读取完成
{
if (oAjax.status == 200) //成功
{
fnSucc(oAjax.responseText);
}
else {
if (fnFaild) {
fnFaild(oAjax.status);
}
//alert('失败:'+oAjax.status);
}
}
};
}
window.onload = function () {
var oBtn = document.getElementById('myDiv');
oBtn.onclick = function () {
ajax('test1.txt?t='+new Date().getTime(),
function (str) {
//?t='+new Date().getTime() 可以控制缓存,即每次改变 test1.txt文件不需要刷新页面既可读取文件改变后的值
var oTxt = document.getElementById('txt');
oTxt.value = str;
}
);
};
};
</script>
</head>
<body>
<input type="button" id="myDiv" value="读取"/><br />
用户名: <input type="text" id="txt" />
<input type="text" id="Text1" />
</body>
</html>

  

 

js 实现jquray中 ajax请求功能

下面是根据W3C上的解析,自己写的一个小小的ajax请求   框架是 ASP.NET  MVC

<input type="button" id="btn_nowTime1" onclick="Myajax()" value="请求" />
var createAjax = function () {
var xhr = null;
try {
//IE系列浏览器
xhr = new ActiveXObject("microsoft.xmlhttp");
} catch (e1) {
try {
//非IE浏览器
xhr = new XMLHttpRequest();
} catch (e2) {
window.alert("您的浏览器不支持ajax,请更换!");
}
}
return xhr;
}; var ajax = function (conf) {
// 初始化
//type参数,可选
var type = conf.type;
//url参数,必填
var url = conf.url;
//data参数可选,只有在post请求时需要
var data = conf.data;
//datatype参数可选
var dataType = conf.dataType;
//回调函数可选
var success = conf.success; if (type == null) {
//type参数可选,默认为get
type = "get";
}
if (dataType == null) {
//dataType参数可选,默认为text
dataType = "text";
}
// 创建ajax引擎对象
var xhr = createAjax();
// 打开
xhr.open(type, url, true);
// 发送
if (type == "GET" || type == "get") {
xhr.send(null);
} else if (type == "POST" || type == "post") {
xhr.setRequestHeader("content-type",
"application/x-www-form-urlencoded");
xhr.send(data);
}
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
if (dataType == "text" || dataType == "TEXT") {
if (success != null) {
//普通文本
success(xhr.responseText);
}
} else if (dataType == "xml" || dataType == "XML") {
if (success != null) {
//接收xml文档
success(xhr.responseXML);
}
} else if (dataType == "json" || dataType == "JSON") {
if (success != null) {
//将json字符串转换为js对象
success(eval("(" + xhr.responseText + ")"));
}
}
}
};
};

  

调用:

function Myajax() {
ajax({
url: '/home/index',
success: function (data) {
alert(data);
}
})
}

  

开始对XMLHttpRequest 这个对象很模糊,最详解的也摸过于W3C 上的解析,现在想来这也许就是开发中该用的API 是行业标准了吧!

发现几篇好的文章,就把链接给拿来了

滴答的雨

dipoo

ajax 基础实例的更多相关文章

  1. Ajax基础实例

    前端代码 <script type="text/javascript"> var xmlhttp; function go(url) { xmlhttp=null; i ...

  2. 【Java EE 学习 31】【JavaScript基础增强】【Ajax基础】【Json基础】

    一.JavaScript基础增强 1.弹窗 (1)使用window对象的showModelDialog方法和showModelessDialog方法分别可以弹出模式窗口和非模式窗口,但是只能在IE中使 ...

  3. Ajax基础--JavaScript实现

    ajax原理 1.ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. 通俗地讲就是:AJAX 通过在后台与 ...

  4. Ajax基础知识(二)

    接上一篇  Ajax基础知识(一) 在上一篇博客里,抛弃了VS中新建aspx页面,拖个button写上C#代码的方式.使用ajax的方式,异步向服务器请求数据.我们让服务器只简单的返回一个" ...

  5. AJAX基础_AJAX获取PHP数据

    前言 本篇AJAX基础教程,只讲干货,拒绝废话. 全文通过两个实例来讲解AJAX的基本用法,第1个实例是使用AJAX技术从服务器获取纯文本(HTML)数据, 第2个实例是获取从服务器PHP文件的数据. ...

  6. Web前端-Ajax基础技术(上)

    Web前端-Ajax基础技术(上) ajax是浏览器提供一套的api,用于向服务器发出请求,接受服务端返回的响应,通过javascript调用,实现通过代码控制请求与响应,实现网络编程. ajax发送 ...

  7. Python自动化运维 - Django(二)Ajax基础 - 自定义分页

    Ajax基础 AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. 什么是Ajax AJAX = 异步 Java ...

  8. APP接口自动化测试JAVA+TestNG(二)之TestNG简介与基础实例

    前言 继上篇环境篇后,本篇主要对TestNG进行介绍,给出最最基础的两个实例,通过本文后,学会并掌握TestNG测试用例的编写与运行,以及生成美化后的报告.下一篇为HTTP接口实战(国家气象局接口自动 ...

  9. 史上最全的Ajax基础详解

    同步请求和异步请求 先解释一下同步和异步的概念: 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯 ...

随机推荐

  1. eclipse maven SLF4J: Failed to load class org.slf4j.impl.StaticLoggerBinder

    现象:运行eclipse maven build,console 有红色日志如下: SLF4J: Failed to load class "org.slf4j.impl.StaticLog ...

  2. jQuery.validate 中文 API

    名称 返回类型 描述 validate(options) Validator 验证所选的 FORM. valid() Boolean 检查是否验证通过. rules() Options 返回元素的验证 ...

  3. win7 原版下载&激活

    参考http://bbs.ithome.com/thread-478939-1-1.html品牌机 win7 32 位系下载http://bbs.ithome.com/forum.php?mod=vi ...

  4. MultiView空间例子

    CSS代码: body { font-size:11pt; font-family:宋体; } .mainTitle { font-size:11pt; font-weight:bold; font- ...

  5. Php 使用 fsockopen发送http请求

    <?php function HTTP_Post($URL,$data, $referrer="") { // parsing the given URL $URL_Info ...

  6. 基于Visual C++2013拆解世界五百强面试题--题16-进制分析

    清写出下列代码的输出内容 #include <stdio.h> int main() { int a = -1, b = -12, c = -123, d = -1234; printf( ...

  7. hdoj 1251 统计难题(字典树)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1251 思路分析:该问题要求求出以某个字符串为前缀的单词数目,通过使用字典树,在字典树中添加count记 ...

  8. Home | WebScraping.com

    Home | WebScraping.com We specialize in extracting data from websites, which is known as web scrapin ...

  9. 面试之get和post(转)

    总结1 表单提交中get和post方式的区别归纳如下几点: GET是从服务器上获取数据,POST是向服务器传送数据,GET 请求一般不应产生副作用.就是说,它仅仅是获取资源信息,就像数据库查询一样,不 ...

  10. Oracle存储过程function语法及案例

    create or replace function F01_SX03_SUM(statdate varchar2, code varchar2, para varchar2) RETURN numb ...