当前位置：文档之家 › jQueryAjax应用

jQueryAjax应用

  • 格式：doc
  • 大小：97.50 KB
  • 文档页数：12

Ajax发展历史AJAX全称为“Asynchronous JavaScript and XML”<异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

该技术在1998年前后得到了应用。

允许客户端脚本发送HTTP请求(XMLHTTP>的第一个组件由Outlook Web Access小组写成。

该组件原属于微软Exchange Server，并且迅速地成为了Internet Explorer 4.0的一部分。

部分观察家认为，Outlook Web Access是第一个应用了Ajax技术的成功的商业应用程序，并成为包括Odd post的网络邮件产品在内的许多产品的领头羊。

但是，2005年初，许多事件使得Ajax被大众所接受。

Google在它著名的交互应用程序中使用了异步通讯，如Google讨论组、Google地图、Google搜索建议、Gmail等。

Ajax这个词由《Ajax: A New Approach to Web Applications》一文所创，该文的迅速流传提高了人们使用该项技术的意识。

另外，对Mozilla/Gecko的支持使得该技术走向成熟，变得更为易用。

使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。

这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息，减少网络阻塞。

随着web2.0的兴起，RIA<rich interface application ）概念的推出，Ajax的作用越来重要，甚至还没有找到一个更好的替代品。

虽然Adobe公司的as3.0也推出，但是flash庞大的躯体，在目前拥挤的网络上还有点力不从心。

(>6.2 Ajax的基础应用首先，我们需要用JavaScript来创建XMLHttpRequest 对象向服务器发送一个HTTP 请求，XMLHttpRequest 类首先由Internet Explorer以ActiveX对象引入，被称为XMLHTTP。

后来Mozilla﹑Netscape﹑Safari 和其他浏览器也提供了XMLHttpRequest类，不过它们创建XMLHttpRequest类的方法不同。

对于Internet Explorer浏览器，创建XMLHttpRequest 方法如下：xmlHttp = new ActiveXObject("Msxml2.XMLHTTP.3.0">。

//3.0或4.0, 5.0xmlHttp = new ActiveXObject("Msxml2.XMLHTTP">。

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP">。

对于Mozilla﹑Netscape﹑Safari等浏览器，创建XMLHttpRequest 方法如下(IE7和Firefox3是一样的了>：xmlHttp = new XMLHttpRequest(>。

在实际应用中，为了兼容多种不同版本的浏览器，一般将创建XMLHttpRequest类的方法写成如下形式：var xmlHttp = false。

//开始初始化XMLHttpRequest对象if(window.XMLHttpRequest>{ //Mozilla (IE7>浏览器xmlHttp = new XMLHttpRequest(>。

if(xmlHttp.overrideMimeType> {//设置MiME类别xmlHttp.overrideMimeType('text/xml'>。

}}else if (window.ActiveXObject> { // IE(7以下版本>浏览器try {xmlHttp = new ActiveXObject("Msxml2.XMLHTTP">。

} catch (e> {try {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP">。

} catch (e> {xmlHttp=false。

}}}在定义对象后，就要发送请求了。

可以调用HTTP请求类的open(>和send(>方法，如下所示：xmlHttp.open('GET', URL, true>。

xmlHttp.send(null>。

open(>的第一个参数是HTTP请求方式—GET，POST或任何服务器所支持的您想调用的方式。

按照HTTP规范，该参数要大写；否则，某些浏览器(如Firefox>可能无法处理请求。

第二个参数是请求页面的URL。

第三个参数设置请求是否为异步模式。

如果是TRUE，JavaScript函数将继续执行，而不等待服务器响应。

这就是"AJAX"中的"A"。

用JavaScript来创建XMLHttpRequest 类向服务器发送一个HTTP请求后，接下来要决定当收到服务器的响应后，需要做什么。

这需要告诉HTTP请求对象用哪一个JavaScript 函数处理这个响应。

可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名，如下所示：xmlHttp.onreadystatechange = function(>{// JavaScript代码段if(xmlHttp.readyState == 4> {if(xmlHttp.status == 200> {if(xmlHttp.responseText>{//操作服务器返回的数据process(xmlHttp.responseText>。

}}}else{//show loading}}。

首先要检查请求的状态。

只有当一个完整的服务器响应已经收到了，函数才可以处理该响应。

XMLHttpRequest 提供了readyState属性来对服务器响应进行判断。

readyState的取值如下：0 (未初始化>、1 (正在装载>、2 (装载完毕>、3 (交互中>、4 (完成>当readyState=4时，一个完整的服务器响应已经收到了，接着，函数会检查HTTP服务器响应的状态值。

完整的状态取值可参见W3C文档。

当HTTP服务器响应的值为200时，表示状态正常。

Ajax一次操作就算是完成了，是不是很简单？实际上Ajax的基础操作也就是这样简单，只是在不同的应用上对返回特殊处理就显得很复杂，我们透过现象看本质也就这样几行，详细的Ajax基础教程可以参考各个浏览器的官方说明。

6.3 jQuery中Ajax在第一章提到Javascript框架或者是工具中都包含了封装上述功能的Ajax工具，就不一一介绍，下边主要讲讲JQuery中的Ajax工具包。

使用 jQuery 将使 Ajax 变得及其简单。

jQuery 提供有一些函数，这些函数是根据我们日常开发的需要而封装的一些快捷操作，比如：load、ajax、get、post等等。

可以使简单的工作变得更加简单，复杂的工作变得不再复杂。

jQuery的ajax工具包封装有三个层次，目的有两，第一为了符合命名规范，见明思义；第二就是为区分跨域操作，因为第三层的两个函数可以跨域操作。

这样写有点牵强，先这里理解，后边讲了JSON和JSONP就明白了。

最底层就是Ajax，封装了基础Ajax一些操作；第二层就是load、get、post，封装了jQuery的Ajax；第三层就是getScript、getJSON，封装了get。

下边我们就一一的介绍这些函数<方法）的用法。

6.3.1. jQuery.getScript( url, [callback] > : 通过GET 方式请求载入并执行一个JavaScript 文件。

这个函数就是一个get的简写，看看源代码：return jQuery.get(url, null, callback, "script">。

参数名称类型说明url String 请求的HTML页的URL地址Callback<可选）Function载入成功时回调函数(只有当Response的返回状态是success才是调用该方法>，不传递参数jQuery 1.2 版本之前，getScript 只能调用同域JS 文件。

1.2中，您可以跨域调用JavaScript 文件。

注意：Safari 2 或更早的版本不能在全局作用域中同步执行脚本。

如果通过 getScript 加入脚本，请加入延时函数。

示例代码：加载并执行 test.js。

$.getScript("test.js">。

提示：本身xmlHttp对象是不能进行异域操作的，但是浏览器head中加载script可以，这个函数就是在head中创建一个script元素，元素的src属性是url，应该真正不属于Ajax范畴。

6.3.5. jQuery.getJSON( url, [callback] > : 通过GET 方式请求载入并执行一个JavaScript 文件。

这个函数就是一个get的简写，看看源代码：return jQuery.get(url, null, callback, "json">。

参数名称类型说明url String 请求的HTML页的URL地址Callback<可选）Function载入成功时回调函数(只有当Response的返回状态是success才是调用该方法>，自动将请求结果<执行后的JS对象）传递给该函数这个函数的和上边的getScript的工作原理基本一样，我们看看上边的源代码就知道，支持跨域操作，本身也支持jsonp，什么是jsonp下边的章节我们再说。

示例代码：$.getJSON("test.js",function(json>{$.each(json function(i,n>{alert(n>。

alert(json.i>。

}>}>。

6.3.2. load( url, [data], [callback] > ：载入远程 HTML 文件代码并插入至 DOM 中。

参数名称类型说明url String 请求的HTML页的URL地址Data(可选> Obj 发送至服务器的 key/value 数据Callback<可选）Function请求完成时(不需要是success的>的回调函数，自动会将请求的结果，状态，XMLHttp对象传递给该函数。

合集下载

jquery $.ajax 同步调用 实现原理

jquery $.ajax 同步调用 实现原理

jquery $.ajax 同步调用实现原理jQuery .ajax 同步调用实现原理在前端开发中，经常会涉及到使用Ajax进行异步请求。

而jQuery库中的.ajax()方法是非常常用的一种实现方式。

.ajax()方法使用起来非常方便，可以对数据进行异步请求，并且可以设置回调函数来处理返回的数据。

但是有时候我们需要在请求完成之前进行一些操作，此时可以使用同步调用的方式来实现。

本文将详细介绍使用jQuery .ajax()方法进行同步请求的实现原理。

1. .ajax()方法简介.ajax()是jQuery库中用于发送HTTP请求的核心方法。

它是一个异步方法，可以向服务器发送GET、POST等请求，并处理服务器返回的数据。

.ajax()方法使用一个包含键值对的配置对象作为参数，可以设置请求的地址、请求方式、请求参数、回调函数等。

当请求完成时，可以在回调函数中处理返回的数据。

2. 异步请求与同步请求的区别在讲解实现原理之前，我们先来了解一下异步请求和同步请求的区别：- 异步请求：是指在发送请求的同时，主线程不会阻塞，而是继续执行后续的代码。

当请求完成后，会通过回调函数来处理返回的数据。

异步请求一般使用于需要较长时间才能返回结果的场景，如网络请求、文件上传等。

- 同步请求：是指在发送请求的同时，主线程会一直等待请求的响应结果，而不会继续执行后续的代码。

只有在请求完成后，才会继续执行下面的代码。

同步请求一般使用于需要立即获取结果的场景，如表单提交、页面加载等。

在默认情况下，.ajax()方法是异步请求的，即发送请求后会继续执行后续的代码。

而实现同步请求则需要额外的设置。

3. 同步请求的设置要实现同步请求，可以通过设置.ajax()方法的async选项为false来实现。

async的默认值为true，表示异步请求，当设置为false时表示同步请求。

示例代码：javascript.ajax({url: 'example',async: false,其他配置项...success: function(data) {处理返回的数据}});4. 同步请求的实现原理实现同步请求的关键在于事先知道请求需要的时间，以便正确地进行阻塞。

jQuery中的Ajax几种请求方法

jQuery中的Ajax几种请求方法

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文件，例如表单。

示例代码：$(".ajax.load").load("[url]/QLeelulu/archive/2008/03/30/1130270.html[/url] .post",function (responseText, textStatus, XMLHttpRequest){this;//在这里this指向的是当前的DOM对象，即$(".ajax.load")[0]//alert(responseText);//请求返回的内容//alert(textStatus);//请求状态：success，error//alert(XMLHttpRequest);//XMLHttpRequest对象});这里将显示结果。

jQueryajaxForm（）的应用

jQueryajaxForm（）的应用

jQueryajaxForm（）的应⽤jQuery Form插件是⼀个优秀的Ajax表单插件，可以⾮常容易地、⽆侵⼊地升级HTML表单以⽀持Ajax。

提供了很多有⽤的⽅法可以让你轻松的处理表单⾥的数据和表单的提交过程。

本⽂就是介绍了ajaxForm()的应⽤.⼀、ajaxForm() 介绍ajaxForm预处理将要使⽤ AJAX ⽅式提交的表单，将所有需要⽤到的事件监听器添加到其中。

它不是提交这个表单。

在页⾯的ready函数⾥使⽤ajaxForm来给你页⾯上的表单做这些AJAX提交的准备⼯作。

ajaxForm 需要零个或⼀个参数。

这唯⼀的⼀个参数可以是⼀个回调函数或者是⼀个可选参数对象。

是否可以连环调⽤: 是。

⼆、引⼊依赖的js<script src="jquery-1.3.1.js" type="text/javascript"></script><script src="jquery.form.js" type="text/javascript"></script>三、编写页⾯<form id="myForm" action="demo.jsp" method="post">名称： <input type="text" name="name" /> <br/>地址： <input type="text" name="address" /><br/>⾃我介绍： <textarea name="comment"></textarea> <br/><input type="submit" id="test" value="提交" /> <br/><div id="output1" style="display:none;"></div></form>四、调⽤ajaxForm() ⽅法<script type="text/javascript">$(document).ready(function() {$('#myForm').ajaxForm(function() {$('#output1').html("提交成功！欢迎下次再来！").show();});});</script>五、详细代码如下：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>jQuery Form插件例⼦-ajaxForm()</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><script src="jquery-1.3.1.js" type="text/javascript"></script><script src="jquery.form.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function() {$('#myForm').ajaxForm(function() {$('#output1').html("提交成功！欢迎下次再来！").show();});});</script></head><body><h3> Demo 1 : form插件的使⽤--ajaxForm(). </h3><form id="myForm" action="demo.jsp" method="post">名称： <input type="text" name="name" /> <br/>地址： <input type="text" name="address" /><br/>⾃我介绍： <textarea name="comment"></textarea> <br/><input type="submit" id="test" value="提交" /> <br/><div id="output1" style="display:none;"></div></form></body></html>六、编写接收表单的测试代码。

jquery中$.ajax（）方法使用详解

jquery中$.ajax（）方法使用详解

jquery中$.ajax（）⽅法使⽤详解1.url说明：发送请求的地址（默认为当前页⾯），要求是String类型的参数，⽐如是.net下，"~wexin(控制器)/getweinxinmenu(动作)"，2.type说明：请求⽅法(post或者get)，默认是get，要求是String类型的参数。

其他的htpp请求如（put、delete）等也⽀持，但是要浏览器⽀持3.timeout说明：设置请求超时时间（毫秒），要求是number类型的参数。

此设置将覆盖$.ajaxSetup()⽅法的全局设置。

4.async说明：默认值为true，所有请求是异步，要求是Bool类型的参数，如果需要发送同步请求，将此项设置为false。

注意：同步时浏览器会被锁住。

5.cache说明：默认为true(当datatype为script时，默认为false)从浏览器缓存中加载请求信息，要求是Bool类型的参数。

6.data说明：发送到服务器的数据，要求是Object或string类型的参数。

如果已经不是字符串，将⾃动转换为字符串格式。

get请求中将附加在url 后。

防⽌这种⾃动转换，可以查看 processData选项。

对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。

如果是数组，JQuery将⾃动为不同值对应同⼀个名称。

例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

7.dataType:说明：预期服务器返回的数据类型，要求为String类型的参数。

如果不指定，JQuery将⾃动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。