ajax 基础实例
- 优点:使用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 是行业标准了吧!
发现几篇好的文章,就把链接给拿来了
ajax 基础实例的更多相关文章
- Ajax基础实例
前端代码 <script type="text/javascript"> var xmlhttp; function go(url) { xmlhttp=null; i ...
- 【Java EE 学习 31】【JavaScript基础增强】【Ajax基础】【Json基础】
一.JavaScript基础增强 1.弹窗 (1)使用window对象的showModelDialog方法和showModelessDialog方法分别可以弹出模式窗口和非模式窗口,但是只能在IE中使 ...
- Ajax基础--JavaScript实现
ajax原理 1.ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. 通俗地讲就是:AJAX 通过在后台与 ...
- Ajax基础知识(二)
接上一篇 Ajax基础知识(一) 在上一篇博客里,抛弃了VS中新建aspx页面,拖个button写上C#代码的方式.使用ajax的方式,异步向服务器请求数据.我们让服务器只简单的返回一个" ...
- AJAX基础_AJAX获取PHP数据
前言 本篇AJAX基础教程,只讲干货,拒绝废话. 全文通过两个实例来讲解AJAX的基本用法,第1个实例是使用AJAX技术从服务器获取纯文本(HTML)数据, 第2个实例是获取从服务器PHP文件的数据. ...
- Web前端-Ajax基础技术(上)
Web前端-Ajax基础技术(上) ajax是浏览器提供一套的api,用于向服务器发出请求,接受服务端返回的响应,通过javascript调用,实现通过代码控制请求与响应,实现网络编程. ajax发送 ...
- Python自动化运维 - Django(二)Ajax基础 - 自定义分页
Ajax基础 AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. 什么是Ajax AJAX = 异步 Java ...
- APP接口自动化测试JAVA+TestNG(二)之TestNG简介与基础实例
前言 继上篇环境篇后,本篇主要对TestNG进行介绍,给出最最基础的两个实例,通过本文后,学会并掌握TestNG测试用例的编写与运行,以及生成美化后的报告.下一篇为HTTP接口实战(国家气象局接口自动 ...
- 史上最全的Ajax基础详解
同步请求和异步请求 先解释一下同步和异步的概念: 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯 ...
随机推荐
- 第一个VC++ win32程序 绘制简单图形
创建一个VC++ win32 打开VS 新工程类型中选择Win32----Win32 Project 自己取个名字(假如叫做My1stWin) 一路next 系统会自动生成好最基本的代码 然后我们 ...
- 帝国cms语句调用
帝国cms系统,灵动标签,有着非常强大的数据调用功能.这里为广大菜鸟站长普及一下. 我们来看这段代码. [e:loop={,,}] <li>·<a target="_bla ...
- Eclipse运行慢
http://blog.csdn.net/chrissata/article/details/7759836 http://blog.csdn.net/heyutao007/article/detai ...
- QT小技巧—更好管理项目(增加预编译头文件,并且指定moc文件的生成位置)good
预编译加速编译 QT也可以像VS那样使用预编译头文件来加速编译器的编译速度.首先在.pro文件中加入: CONFIG += precompiled_header 然后定义需要预编译的头文件: PREC ...
- 利用bind搭建dns
下载bind,我下载的是bind-9.3.1rc1.tar.gz 我下载的文件放在/root目录下 进入目录解压缩 [root@linux root]#tar xfz bind-9.3.1rc1.ta ...
- mfc删除标题和边框
//删除标题和边框WS_CAPTION和WS_BORDER风格 ModifyStyle(WS_CAPTION, 0);ModifyStyle(WS_BORDER, 0);
- Node.mongoose
简介 mongodb是一款面向文档的数据库,不是关系型数据库,新手熟悉mysql.sqlserver等数据库的人可能入手稍微困难些,需要转换一下思想,可以不需要有固定的存储模式,以文档模型为存储内容相 ...
- UIControl IOS控件编程 及UITextField的讲解
第一部分 UIKit提供了一组控件:UISwitch开关.UIButton按钮.UISegmentedControl分段控件.UISlider滑块.UITextField文本字段控件.UIPageCo ...
- Matlab pivotgolf
function scoreout = pivotgolf(course,pivotstrat) % PIVOTGOLF Pivot Pickin' Golf. % Your goal is to u ...
- hdu2964-Prime Bases
http://acm.hdu.edu.cn/showproblem.php?pid=2964 题意,给你一个整数n,现在要你分解成 n = k1 * ( 2 * 3 * ....*x1 ) + k2 ...