Submitted by aming on 2008, May 28, 10:21 PM
参数:
options
返回值:
XMLHttpRequest
使用HTTP请求一个页面。
这是jQuery的低级AJAX实现。要查看高级抽象,见$.set、$.post等,这些方法更易于理解和使用。但是功能上有限制(例如,没有错误处理函数)。
警告:如果数据类型指定为"script",那么POST自动转化为GET方法。(因为script会作为一个嵌入页面的script标签进行载入)
$.ajax()函数返回它创建的XMLHttpRequest对象。在大部分情况下,你不需要直接操作此对象。通常,这个XMLHttpRequest对象主要用于需要手动中断XMLHttpRequest请求的时候。
注意:如果你指明了下面列出的数据类型,请确保服务端发送了正确的MIME响应类型(如. xml 的类型是 "text/xml")。错误的MIME类型能够导致脚本出现意想不到的问题。请查看AJAX的范例来了解数据类型的更多信息。
$.ajax()函数需要一个参数,一个包含有键/值对的对象,用于初始化并操作请求对象。
在jQuery 1.2版本中,如果你指明了一个JSONP回调函数,你就可以从其它的域中载入JSON类型的数据,写法类似于 "myurl?callback=?" 。jQuery会自动调用正确的方法名称来代替查询字符串,执行你指定的回调函数。或者,你也可以指定jsonp的数据类型的回调函数,此函数会自动添加到Ajax请求中。
参数选项:
async(true) 数据类型: Boolean
默认情况下,所有的请求都是异步发送的(默认为true)。 如果需要发送同步请求, 设置选项为false。注意,同步请求可能会暂时的锁定浏览器, 当请求激活时不能进行任何操作。
beforeSend 数据类型: Function
一个预处理函数用于在发送前修改XMLHttpRequest对象,设置自定义头部等。 XMLHttpRequest作为惟一的参数被传递。这是一个 Ajax 事件。
» 阅读全文
Tags: jquery, ajax
JQUERY | 评论:1
| Trackbacks:0
| 阅读:554
Submitted by aming on 2008, May 28, 10:18 PM
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯。
废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到).
1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中。
url (String) : 请求的HTML页的URL地址。
data (Map) : (可选参数) 发送至服务器的 key/value 数据。
callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。
这个方法默认使用 GET 方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。
这个方法可以很方便的动态加载一些HTML文件,例如表单。
» 阅读全文
Tags: jquery, ajax
JQUERY | 评论:1
| Trackbacks:0
| 阅读:517
Submitted by aming on 2008, May 4, 11:36 AM
登陆框,无刷新就把用户名密码提交给后台php程序,验证后发回
前台代码:
<script src="./javascript/jquery-latest.pack.js" type="text/javascript"></script> //导入jQuery框架文件 要用jQuery必须做此步
<script type="text/javascript">
$(document).ready(function(){//这个就是jQueryready ,它就像C语言的main 所有操作包含在它里面
$("#button_login").mousedown(function(){
login(); //点击ID为"button_login"的按钮后触发函数 login();
});
});
function login(){ //函数 login();
var username = $("#username").val();//取框中的用户名
var password = $("#password1").val();//取框中的密码
$.ajax({ //一个Ajax过程
type: "post", //以post方式与后台沟通
url : "./php_ajax/login.php", //与此php页面沟通
dataType:'json',//从php返回的值以 JSON方式 解释
data: 'username='+username+'&password='+password, //发给php的数据有两项,分别是上面传来的u和p
success: function(json){//如果调用php成功
alert(json.username+'\n'+json.password); //把php中的返回值(json.username)给 alert出来
}
});
}
</script>
具体的php 我只是把代码原封返回,以后该改成到数据库检查。
<?php
echo json_encode(array ('username'=>$_REQUEST['username'],'password'=>$_REQUEST['password']));
?>
json_encode的功能是 把php中的变量组成数组 再封装成Json格式 再echo出来返回给调用它的jquery.ajax()
总的来说 过程是:
用户填完用户名密码 单击按钮“登陆”
jQuery 取得用户名 密码
jQuery把两个变量以post方式发送给login.php
login.php 把变量进行处理 然后把返回封装成Json
把Json抛给 前台页面
前台解释得到的Json数据 并进行下一步处理。
关于Json 就是一种数据封装,类似于XML 但更适合轻量级应用。
Tags: jquery, ajax, php
JQUERY | 评论:0
| Trackbacks:0
| 阅读:440
Submitted by aming on 2008, May 4, 11:03 AM
程序员(使用后端应用程序)和 Web 程序员(编写 HTML、CSS 和 JavaScript)之间的分水岭是长久存在的。但是,Document Object Model (DOM) 弥补了这个裂缝,使得在后端使用 XML 同时在前端使用 HTML 切实可行,并成为极其有效的工具。在本文中,Brett McLaughlin 介绍了 Document Object Model,解释它在 Web 页面中的应用,并开始挖掘其在 JavaScript 中的用途。
与许多 Web 程序员一样,您可能使用过 HTML。HTML 是程序员开始与 Web 页面打交道的方式;HTML 通常是他们完成应用程序或站点前的最后一步——调整一些布局、颜色或样式。不过,虽然经常使用 HTML,但对于 HTML 转到浏览器呈现在屏幕上时到底发生了什么,人们普遍存在误解。在我分析您认为可能发生的事情及其可能错误的原因之前,我希望您对设计和服务 Web 页面时涉及的过程一清二楚:
1、一些人(通常是您!)在文本编辑器或 IDE 中创建 HTML。
2、然后您将 HTML 上载到 Web 服务器,例如 Apache HTTPD,并将其公开在 Internet 或 intranet 上。
3、用户用 Firefox 或 SafariA 等浏览器请求您的 Web 页面。
4、用户的浏览器向您的服务器请求 HTML。
5、浏览器将从服务器接收到的页面以图形和文本方式呈现;用户看到并激活 Web 页面。
这看起来非常基础,但事情很快会变得有趣起来。事实上,步骤 4 和步骤 5 之间发生的巨大数量的 “填充物(stuff)” 就是本文的焦点。术语 “填充物” 也十分适用,因为多数程序员从来没有真正考虑过当用户浏览器请求显示标记时到底在标记身上发生了什么。
» 阅读全文
Tags: dom, web, 响应
AJAX | 评论:0
| Trackbacks:0
| 阅读:298
Submitted by aming on 2008, May 4, 10:52 AM
对于很多 Web 开发人员来说,只需要生成简单的请求并接收简单的响应即可;但是对于希望掌握 Ajax 的开发人员来说,必须要全面理解 HTTP 状态代码、就绪状态和 XMLHttpRequest 对象。在本文中,Brett McLaughlin 将向您介绍各种状态代码,并展示浏览器如何对其进行处理,本文还给出了在 Ajax 中使用的比较少见的 HTTP 请求。
在本系列的 上篇文章 中,我们将详细介绍 XMLHttpRequest 对象,它是 Ajax 应用程序的中心,负责处理服务器端应用程序和脚本的请求,并处理从服务器端组件返回的数据。由于所有的 Ajax 应用程序都要使用 XMLHttpRequest 对象,因此您可能会希望熟悉这个对象,从而能够让 Ajax 执行得更好。
在本文中,我将在上一篇文章的基础上重点介绍这个请求对象的 3 个关键部分的内容:
·HTTP 就绪状态
·HTTP 状态代码
·可以生成的请求类型
这三部分内容都是在构造一个请求时所要考虑的因素;但是介绍这些主题的内容太少了。然而,如果您不仅仅是想了解 Ajax 编程的常识,而是希望了解更多内容,就需要熟悉就绪状态、状态代码和请求本身的内容。当应用程序出现问题时 —— 这种问题总是存在 —— 那么如果能够正确理解就绪状态、如何生成一个 HEAD 请求或者 400 的状态代码的确切含义,就可以在 5 分钟内调试出问题,而不是在各种挫折和困惑中度过 5 个小时。
下面让我们首先来看一下 HTTP 就绪状态。
深入了解 HTTP 就绪状态
您应该还记得在上一篇文章中 XMLHttpRequest 对象有一个名为 readyState 的属性。这个属性确保服务器已经完成了一个请求,通常会使用一个回调函数从服务器中读出数据来更新 Web 表单或页面的内容。清单 1 给出了一个简单的例子(这也是本系列的上一篇文章中的一个例子 —— 请参见 参考资料)。
XMLHttpRequest 或 XMLHttp:换名玫瑰
Microsoft™ 和 Internet Explorer 使用了一个名为 XMLHttp 的对象,而不是 XMLHttpRequest 对象,而 Mozilla、Opera、Safari 和 大部分非 Microsoft 浏览器都使用的是后者。为了简单性起见,我将这两个对象都简单地称为 XMLHttpRequest。这既符合我们在 Web 上看到的情况,又符合 Microsoft 在 Internet Explorer 7.0 中使用 XMLHttpRequest 作为请求对象的意图。(有关这个问题的更多内容,请参见 第 2 部分。)
» 阅读全文
Tags: ajax, 高级请求, 响应
AJAX | 评论:0
| Trackbacks:0
| 阅读:244
Submitted by aming on 2008, May 4, 10:46 AM
多数 Web 应用程序都使用请求/响应模型从服务器上获得完整的 HTML 页面。常常是点击一个按钮,等待服务器响应,再点击另一个按钮,然后再等待,这样一个反复的过程。有了 Ajax 和 XMLHttpRequest 对象,就可以使用不必让用户等待服务器响应的请求/响应模型了。本文中,Brett McLaughlin 介绍了如何创建能够适应不同浏览器的 XMLHttpRequest 实例,建立和发送请求,并响应服务器。
本系列的上一期文章(请参阅 参考资料 中的链接),我们介绍了 Ajax 应用程序,考察了推动 Ajax 应用程序的基本概念。其中的核心是很多您可能已经了解的技术:JavaScript、HTML 和 XHTML、一点动态 HTML 以及 DOM(文档对象模型)。本文将放大其中的一点,把目光放到具体的 Ajax 细节上。
本文中,您将开始接触最基本和基础性的有关 Ajax 的全部对象和编程方法:XMLHttpRequest 对象。该对象实际上仅仅是一个跨越所有 Ajax 应用程序的公共线程,您可能已经预料到,只有彻底理解该对象才能充分发挥编程的潜力。事实上,有时您会发现,要正确地使用 XMLHttpRequest,显然不能 使用 XMLHttpRequest。这到底是怎么回事呢?
» 阅读全文
Tags: javascript, ajax, 异步请求
AJAX | 评论:0
| Trackbacks:0
| 阅读:310
Submitted by aming on 2008, May 4, 10:38 AM
Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本文的作者是一位 Ajax 专家,他演示了这些技术如何协同工作 —— 从总体概述到细节的讨论 —— 使高效的 Web 开发成为现实。他还揭开了 Ajax 核心概念的神秘面纱,包括 XMLHttpRequest 对象。
五年前,如果不知道 XML,您就是一只无人重视的丑小鸭。十八个月前,Ruby 成了关注的中心,不知道 Ruby 的程序员只能坐冷板凳了。今天,如果想跟上最新的技术时尚,那您的目标就是 Ajax。
但是,Ajax 不仅仅 是一种时尚,它是一种构建网站的强大方法,而且不像学习一种全新的语言那样困难。
但在详细探讨 Ajax 是什么之前,先让我们花几分钟了解 Ajax 做 什么。目前,编写应用程序时有两种基本的选择:
·桌面应用程序
·Web 应用程序
两者是类似的,桌面应用程序通常以 CD 为介质(有时候可从网站下载)并完全安装到您的计算机上。桌面应用程序可能使用互联网下载更新,但运行这些应用程序的代码在桌面计算机上。Web 应用程序运行在某处的 Web 服务器上 —— 毫不奇怪,要通过 Web 浏览器访问这种应用程序。
不过,比这些应用程序的运行代码放在何处更重要的是,应用程序如何运转以及如何与其进行交互。桌面应用程序一般很快(就在您的计算机上运行,不用等待互联网连接),具有漂亮的用户界面(通常和操作系统有关)和非凡的动态性。可以单击、选择、输入、打开菜单和子菜单、到处巡游,基本上不需要等待。
» 阅读全文
Tags: ajax
AJAX | 评论:0
| Trackbacks:0
| 阅读:401