首页技术js中ajax，ajax async

js中ajax，ajax async

编程之家2026-06-01603次浏览

大家好，关于js中ajax很多朋友都还不太明白，今天小编就来为大家分享关于ajax async的知识，希望对各位有所帮助！

js中ajax，ajax async

jQuery.ajax()的参数

options(可选)ObjectAJAX请求设置。所有选项都是可选的。 asyncBoolean

(默认: true)默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

beforeSend(XHR)Function

发送请求前可修改 XMLHttpRequest对象的函数，如添加自定义 HTTP头。XMLHttpRequest对象是唯一的参数。这是一个 Ajax事件。如果返回false可以取消本次ajax请求。

function(XMLHttpRequest){ this;//调用本次AJAX请求时传递的options参数}cacheBoolean(默认: true,dataType为script和jsonp时默认为false) jQuery 1.2新功能，设置为 false将不缓存此页面。

complete(XHR, TS)Function

js中ajax，ajax async

请求完成后回调函数(请求成功或失败之后均调用)。参数： XMLHttpRequest对象和一个描述成功请求类型的字符串。 Ajax事件。

function(XMLHttpRequest, textStatus){ this;//调用本次AJAX请求时传递的options参数}contentTypeString(默认: application/x-www-form-urlencoded)发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个content-type给$.ajax()那么他必定会发送给服务器（即使没有数据要发送）

contextObject

这个对象用于设置Ajax相关回调函数的上下文。也就是说，让回调函数内this指向这个对象（如果不设定这个参数，那么this就指向调用本次AJAX请求时传递的options参数）。比如指定一个DOM元素作为context参数，这样就设置了success回调函数的上下文为这个DOM元素。就像这样：

$.ajax({ url: test.html, context: document.body, success: function(){$(this).addClass(done);}});

dataObject,String

发送到服务器的数据。将自动转换为请求字符串格式。GET请求中将附加在 URL后。查看 processData选项说明以禁止此自动转换。必须为 Key/Value格式。如果为数组，jQuery将自动为不同值对应同一个名称。如{foo:[bar1, bar2]}转换为'&foo=bar1&foo=bar2'。

dataFilterFunction

给Ajax返回的原始数据的进行预处理的函数。提供data和type两个参数：data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。

function(data, type){//对Ajax返回的原始数据进行预处理 return data//返回处理后的数据}dataTypeString预期服务器返回的数据类型。如果不指定，jQuery将自动根据 HTTP包 MIME信息来智能判断，比如XML MIME类型就被识别为XML。在1.4中，JSON就会生成一个JavaScript对象，而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:

xml:返回 XML文档，可用 jQuery处理。

html:返回纯文本 HTML信息；包含的script标签会在插入dom时执行。

script:返回纯文本 JavaScript代码。不会自动缓存结果。除非设置了cache参数。'''注意：'''在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)

json:返回 JSON数据。

jsonp: JSONP格式。使用 JSONP形式调用函数时，如 myurl?callback=? jQuery将自动替换?为正确的函数名，以执行回调函数。

text:返回纯文本字符串

errorFunction

(默认:自动判断(xml或 html))请求失败时调用此函数。有以下三个参数：XMLHttpRequest对象、错误信息、（可选）捕获的异常对象。如果发生了错误，错误信息（第二个参数）除了得到null之外，还可能是timeout, error, notmodified和 parsererror。Ajax事件。

function(XMLHttpRequest, textStatus, errorThrown){//通常 textStatus和 errorThrown之中//只有一个会包含信息 this;//调用本次AJAX请求时传递的options参数}globalBoolean(默认: true)是否触发全局 AJAX事件。设置为 false将不会触发全局 AJAX事件，如 ajaxStart或 ajaxStop可用于控制不同的 Ajax事件。

ifModifiedBoolean

(默认: false)仅在服务器数据改变时获取新数据。使用 HTTP包 Last-Modified头信息判断。在jQuery 1.4中，他也会检查服务器指定的'etag'来确定数据没有被修改过。

jsonpString在一个jsonp请求中重写回调函数的名字。这个值用来替代在callback=?这种GET或POST请求中URL参数里的callback部分，比如{jsonp:'onJsonPLoad'}会导致将onJsonPLoad=?传给服务器。

jsonpCallbackString为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名。

passwordString

用于响应HTTP访问认证请求的密码

processDataBoolean

(默认: true)默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 application/x-www-form-urlencoded。如果要发送 DOM树信息或其它不希望转换的信息，请设置为 false。

scriptCharsetString

只有当请求时dataType为jsonp或script，并且type是GET才会用于强制修改charset。通常只在本地和远程的内容编码不同时使用。

successFunction

请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据；描述状态的字符串。 Ajax事件。

function(data, textStatus){// data可能是 xmlDoc, jsonObj, html, text,等等... this;//调用本次AJAX请求时传递的options参数}

traditionalBoolean

如果你想要用传统的方式来序列化数据，那么就设置为true。请参考工具分类下面的jQuery.param方法。

timeoutNumber

设置请求超时时间（毫秒）。此设置将覆盖全局设置。

typeString

(默认: GET)请求方式(POST或 GET)，默认为 GET。注意：其它 HTTP请求方法，如 PUT和 DELETE也可以使用，但仅部分浏览器支持。

urlString

(默认:当前页地址)发送请求的地址。

usernameString

用于响应HTTP访问认证请求的用户名

xhrFunction

需要返回一个XMLHttpRequest对象。默认在IE下是ActiveXObject而其他情况下是XMLHttpRequest。用于重写或者提供一个增强的XMLHttpRequest对象。这个参数在jQuery 1.3以前不可用。描述:加载并执行一个 JS文件。

jQuery代码:$.ajax({ type: GET, url: test.js, dataType: script});

描述:

保存数据到服务器，成功时显示信息。

jQuery代码:$.ajax({ type: POST, url: some.php, data: name=John&location=Boston, success: function(msg){ alert( Data Saved:+ msg);}});

描述:

装入一个 HTML网页最新版本。

jQuery代码:$.ajax({ url: test.html, cache: false, success: function(html){$(#results).append(html);}});

描述:

同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。

jQuery代码: var html=$.ajax({ url: some.php, async: false}).responseText;

描述:

发送 XML数据至服务器。设置 processData选项为 false，防止自动转换数据格式。

jQuery代码:

var xmlDocument= [create xml document];$.ajax({ url: page.php, processData: false, data: xmlDocument, success: handleResponse});

jQuery post实例代码：

$.post(test.php,{name:name,pwd:pwd},function(msg){

alert(msg);

})

test.php里面用$_POST[name]和$_POST[pwd]接收参数.

$.post第一个参数是url，{}这里里面的是参数名称和值之间用:非开，多个值用,分开，最后一个是返回的函数msg就是返回的结果。根据自己的需要返回不用的数据。

$.get和post一样，php接收的话改成$_GET[name]和$_GET[pwd]

什么是ajax技术

术语Ajax用来描述一组技术，它使浏览器可以为用户提供更为自然的浏览体验。在Ajax之前，Web站点强制用户进入提交/等待/重新显示范例，用户的动作总是与服务器的“思考时间”同步。Ajax提供与服务器异步通信的能力，从而使用户从请求/响应的循环中解脱出来。借助于Ajax，可以在用户单击按钮时，使用JavaScript和DHTML立即更新UI，并向服务器发出异步请求，以执行更新或查询数据库。当请求返回时，就可以使用JavaScript和CSS来相应地更新UI，而不是刷新整个页面。最重要的是，用户甚至不知道浏览器正在与服务器通信：Web站点看起来是即时响应的。

虽然Ajax所需的基础架构已经出现了一段时间，但直到最近异步请求的真正威力才得到利用。能够拥有一个响应极其灵敏的Web站点确实激动人心，因为它最终允许开发人员和设计人员使用标准的HTML/CSS/JavaScript堆栈创建“桌面风格的（desktop-like）”可用性。

通常，在J2EE中，开发人员过于关注服务和持久性层的开发，以至于用户界面的可用性已经落后。在一个典型的J2EE开发周期中，常常会听到这样的话，“我们没有可投入UI的时间”或“不能用HTML实现”。但是，以下Web站点证明，这些理由再也站不住脚了：

BackPack

Google Suggest

Google Maps

PalmSphere

所有这些Web站点都告诉我们，Web应用程序不必完全依赖于从服务器重新载入页面来向用户呈现更改。一切似乎就在瞬间发生。简而言之，在涉及到用户界面的响应灵敏度时，基准设得更高了。

定义Ajax

Adaptive Path公司的Jesse James Garrett这样定义Ajax：

Ajax不是一种技术。实际上，它由几种蓬勃发展的技术以新的强大方式组合而成。Ajax包含：

基于CSS标准的表示；

使用Document Object Model进行动态显示和交互；

使用XMLHttpRequest与服务器进行异步通信；

使用JavaScript绑定一切。

这非常好，但为什么要以Ajax命名呢？其实术语Ajax是由Jesse James Garrett创造的，他说它是“Asynchronous JavaScript+ XML的简写”。

Ajax的工作原理

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

1 AJAX还是AJAH

* AJAX的很多经典应用其实都是利用xmlhttp空间访问后台程序，后台程序返回脚本用eval回调或者返回简单数据的方式来开发。这样的开发模式的好处是设计简单轻巧，对熟悉dhtml的开发者来说上手会比较块，跨浏览器问题也容易解决，做简单的应用也够用。gmail，google suggest都是用这种方式。但是在我看来gmail已经吧AJAH应用到极限了，更复杂的数据结构用简单数据和回调方式来组织就开始有点力不从心了。

*前AJAX的一种传统做法是后台返回完整的xml文件后用脚本（利用控件）解析xml后操作页面的dom节点来动态生成页面的一部分。这样作的优点是可以充分利用xml的强大表达能力传输各种数据结构，缺点是页面的dom操作效率不高，而且IE在dom操作的API上bug多多。之所以叫“前AJAX”，因为我们在AJAX这个名词出现前已经这样做了很多年了。

* AJAX另一种传统做法是后台返回完整的xml文件后用脚本（利用控件）解析xml后生成html代码再灌回页面的层中。这样的做法回避了页面dom操作的一些问题，在生成的内容比较多的时候利用一些字符串计算的优化技巧（主要是数组和正则的应用）可以相当高效的生成页面。在我看来这是未来的发展趋势。

我现在的项目主要采用的是第三种方式，结合第二种。我使用的是自己的一个小巧的框架，模拟jsp的语法来生成html代码，但是依赖于浏览器的xml解析API，因此难以跨浏览器。google的开源项目ajaxslt提供了一个纯js的xslt解决方式，功能更强大，可以在页面中局部的应用xslt解析xml生成html或者其他形式的数据，但是带来了xslt这个技术门槛。sf上的ZK似乎也不错，但是带来的是xul这个技术门槛，同时后台被绑定在了J2EE服务器上面。

2 CACHE

如果使用xmlhttp控件，在发起http请求的时候IE会包办cache策略，很多时候更新了数据却无法获得更新后的数据。一开始试图用传统方式在URL后面加随机数来强制更新，但是IE仍然距不发出新的请求。

一个解决方法是在后台写expires: 0或者其他的禁止前台cache的头，但是这样在数据没有更新的时候又会带来不必要的服务器压力、响应延迟和带宽浪费。

一个稍微好一点的解决方法是，前台在提交数据以后，需要强制更新数据的时候：

xmlhttp.setRequestHeader("If-Modified-Since","0");

3系统错误:-1072896748。

用xmlhttp接收到数据的时候经常是用xmldom.loadXML(xmlhttp.responseXML.xml）来判断返回的数据的正确性，但是如果后台送过来不正确的xml的时候有时回触发-1072896748系统错误。这是因为xmlhttp.responseXML已经没有解析到东西了，我们还试图访问它的xml属性而触发的。

解决的方法是在使用responseXML.xml或者 responseText的时候要做try/catch：

try{var tmp= xmlhttp.responseXML.xml}catch(ex){err=true;}

有些人喜欢catch的时候判断 exception.description=="系统错误:-1072896748。",如果客户端不是简体中文版的系统的时候就判断不到了。其实这个地方只要有异常，都必须走异常处理流程了，不用区分的那么仔细。

如何利用script标签构建跨域ajax

要解决ajax跨域问题,网上给出的方法有二:

1是构建服务器端的代理。简而言之，就是ajax中调用的实质还是本机的url,而服务器端替js去取回远端地址。

2.利用script标记，生成一个标签。在js加载完成后，再执行后续操作。

就是将原来新建xmlHTTPrequest对象的操作改成了新建script标签的操作.

这里给出一个例子:

#ajah.js

var Ajah=function(url,varname,handleSuccess,handleFailure){

/**

* handleSuccess,handleFailure must be functions

**/

script= document.createElement("script");

script.src=url;

var handler= function(str)

{

handleSuccess(str);

}

script.onload= function()

{

var json=eval(varname);

handler(json);

}

if(window.ie)

{

script.onreadystatechange= function()

{

if(script.readyState=='complete'||script.readyState=='loaded')

{

var json=eval(varname);

if(typeof json!='undefined')

{

handler(json);

}

}

}

}

document.body.appendChild(script);

}

而在网页中应这样调用:

#demo.html

<pre>

<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 3.2//EN">

<html>

<head>

<meta name="generator" content=

"HTML Tidy for Linux(vers 1 September 2005), see www.w3.org">

<title></title>

<script src="mootools.js"></script>

<script src="ajah.js"></script>

</head>

<body>

<script>

var ajah=new Ajah("data.js","json198",function(str){

console.debug("returned:");

console.debug(str);

},

function(str){});

</script>

</body>

</html>

</pre>

被调用的数据文件如下

#data.js

var json198="hello,this is json198";

funciton Ajah(url,varname,handleSuccess,handleFailure){…}

Ajah这个构造函数调用四个参数:

url:远端地址

varname:远端返回数据的变量名

handleSuccess:加载完毕后加载的函数

handleFailure:暂时没用上

js中ajax和ajax async的问题分享结束啦，以上的文章解决了您的问题吗？欢迎您下次再来哦！

css的内部样式表？css内部样式怎么写java接口实现类？java开发面试题及答案
↑